Skip to content

fix: consistent font sizing in ToolCallWithResponse #4167

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
alexhancock merged 1 commit into from
Aug 18, 2025
Merged

fix: consistent font sizing in ToolCallWithResponse #4167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 12 additions & 11 deletions ui/desktop/src/components/MarkdownContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const CodeBlock = ({ language, children }: { language: string; children: string
<div className="relative group w-full">
<button
onClick={handleCopy}
className="absolute right-2 bottom-2 p-1.5 rounded-lg bg-gray-700/50 text-gray-300
className="absolute right-2 bottom-2 p-1.5 rounded-lg bg-gray-700/50 text-gray-300 font-sans text-sm
opacity-0 group-hover:opacity-100 transition-opacity duration-200
hover:bg-gray-600/50 hover:text-gray-100 z-10"
title="Copy code"
Expand All @@ -68,6 +68,7 @@ const CodeBlock = ({ language, children }: { language: string; children: string
whiteSpace: 'pre-wrap',
wordBreak: 'break-all',
overflowWrap: 'break-word',
fontFamily: 'var(--font-sans)',
},
}}
>
Expand All @@ -86,7 +87,7 @@ const MarkdownCode = React.forwardRef(function MarkdownCode(
return !inline && match ? (
<CodeBlock language={match[1]}>{String(children).replace(/\n$/, '')}</CodeBlock>
) : (
<code ref={ref} {...props} className="break-all bg-inline-code whitespace-pre-wrap">
<code ref={ref} {...props} className="break-all bg-inline-code whitespace-pre-wrap font-sans">
{children}
</code>
);
Expand All @@ -110,21 +111,21 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
<div className="w-full overflow-x-hidden">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
className={`prose prose-sm text-text-default dark:prose-invert w-full max-w-full word-break
className={`prose prose-sm text-text-default dark:prose-invert w-full max-w-full word-break font-sans
prose-pre:p-0 prose-pre:m-0 !p-0
prose-code:break-all prose-code:whitespace-pre-wrap
prose-code:break-all prose-code:whitespace-pre-wrap prose-code:font-sans
prose-table:table prose-table:w-full
prose-blockquote:text-inherit
prose-td:border prose-td:border-border-default prose-td:p-2
prose-th:border prose-th:border-border-default prose-th:p-2
prose-thead:bg-background-default
prose-h1:text-2xl prose-h1:font-normal prose-h1:mb-5 prose-h1:mt-0
prose-h2:text-xl prose-h2:font-normal prose-h2:mb-4 prose-h2:mt-4
prose-h3:text-lg prose-h3:font-normal prose-h3:mb-3 prose-h3:mt-3
prose-p:mt-0 prose-p:mb-2
prose-ol:my-2
prose-ul:mt-0 prose-ul:mb-3
prose-li:m-0
prose-h1:text-2xl prose-h1:font-normal prose-h1:mb-5 prose-h1:mt-0 prose-h1:font-sans
prose-h2:text-xl prose-h2:font-normal prose-h2:mb-4 prose-h2:mt-4 prose-h2:font-sans
prose-h3:text-lg prose-h3:font-normal prose-h3:mb-3 prose-h3:mt-3 prose-h3:font-sans
prose-p:mt-0 prose-p:mb-2 prose-p:font-sans
prose-ol:my-2 prose-ol:font-sans
prose-ul:mt-0 prose-ul:mb-3 prose-ul:font-sans
prose-li:m-0 prose-li:font-sans
${className}`}
components={{
a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
Expand Down
11 changes: 7 additions & 4 deletions ui/desktop/src/components/ToolCallArguments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {

if (!needsExpansion) {
return (
<div className="text-xs mb-2">
<div className="font-sans text-sm mb-2">
<div className="flex flex-row">
<span className="text-textSubtle min-w-[140px]">{key}</span>
<span className="text-textPlaceholder">{value}</span>
Expand All @@ -38,7 +38,7 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
}

return (
<div className="text-sm mb-2">
<div className="font-sans text-sm mb-2">
<div className="flex flex-row items-stretch">
<button
onClick={() => toggleKey(key)}
Expand All @@ -49,7 +49,10 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
<div className="w-full flex items-stretch">
{isExpanded ? (
<div>
<MarkdownContent content={value} className="text-sm text-textPlaceholder" />
<MarkdownContent
content={value}
className="font-sans text-sm text-textPlaceholder"
/>
</div>
) : (
<button onClick={() => toggleKey(key)} className="text-left text-textPlaceholder">
Expand Down Expand Up @@ -78,7 +81,7 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {

return (
<div className="mb-2">
<div className="flex flex-row text-xs">
<div className="flex flex-row font-sans text-sm">
<span className="text-textSubtle min-w-[140px]">{key}</span>
<pre className="whitespace-pre-wrap text-textPlaceholder overflow-x-auto max-w-full">
{content}
Expand Down
28 changes: 18 additions & 10 deletions ui/desktop/src/components/ToolCallWithResponse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function ToolCallWithResponse({
<>
<div
className={cn(
'w-full text-sm rounded-lg overflow-hidden border-borderSubtle border bg-background-muted'
'w-full text-sm font-sans rounded-lg overflow-hidden border-borderSubtle border bg-background-muted'
)}
>
<ToolCallView
Expand All @@ -56,7 +56,7 @@ export default function ToolCallWithResponse({
<MCPUIResourceRenderer content={content} />
<div className="mt-3 p-4 py-3 border border-borderSubtle rounded-lg bg-background-muted flex items-center">
<FlaskConical className="mr-2" size={20} />
<div className="text-sm font-medium mono">
<div className="text-sm font-sans">
MCP UI is experimental and may change at any time.
</div>
</div>
Expand Down Expand Up @@ -99,7 +99,7 @@ function ToolCallExpandable({
className="group w-full flex justify-between items-center pr-2 transition-colors rounded-none"
variant="ghost"
>
<span className="flex items-center font-mono">{label}</span>
<span className="flex items-center font-sans text-sm">{label}</span>
<ChevronRight
className={cn(
'group-hover:opacity-100 transition-transform opacity-70',
Expand Down Expand Up @@ -523,7 +523,7 @@ interface ToolDetailsViewProps {
function ToolDetailsView({ toolCall, isStartExpanded }: ToolDetailsViewProps) {
return (
<ToolCallExpandable
label={<span className="pl-4 font-medium">Tool Details</span>}
label={<span className="pl-4 font-sans text-sm">Tool Details</span>}
isStartExpanded={isStartExpanded}
>
<div className="pr-4 pl-8">
Expand All @@ -543,7 +543,7 @@ interface ToolResultViewProps {
function ToolResultView({ result, isStartExpanded }: ToolResultViewProps) {
return (
<ToolCallExpandable
label={<span className="pl-4 py-1 font-medium">Output</span>}
label={<span className="pl-4 py-1 font-sans text-sm">Output</span>}
isStartExpanded={isStartExpanded}
>
<div className="pl-4 pr-4 py-4">
Expand All @@ -564,7 +564,9 @@ function ToolResultView({ result, isStartExpanded }: ToolResultViewProps) {
}}
/>
)}
{result.type === 'resource' && <pre>{JSON.stringify(result, null, 2)}</pre>}
{result.type === 'resource' && (
<pre className="font-sans text-sm">{JSON.stringify(result, null, 2)}</pre>
)}
</div>
</ToolCallExpandable>
);
Expand All @@ -586,12 +588,18 @@ function ToolLogsView({
if (boxRef.current) {
boxRef.current.scrollTop = boxRef.current.scrollHeight;
}
}, [logs]);
}, [logs.length]);
// normally we do not want to put .length on an array in react deps:
//
// if the objects inside the array change but length doesn't change you want updates
//
// in this case, this is array of strings which once added do not change so this cuts
// down on the possibility of unwanted runs

return (
<ToolCallExpandable
label={
<span className="pl-4 py-1 font-medium flex items-center">
<span className="pl-4 py-1 font-sans text-sm flex items-center">
<span>Logs</span>
{working && (
<div className="mx-2 inline-block">
Expand All @@ -612,7 +620,7 @@ function ToolLogsView({
className={`flex flex-col items-start space-y-2 overflow-y-auto p-4 ${working ? 'max-h-[4rem]' : 'max-h-[20rem]'}`}
>
{logs.map((log, i) => (
<span key={i} className="font-mono text-sm text-textSubtle">
<span key={i} className="font-sans text-sm text-textSubtle">
{log}
</span>
))}
Expand All @@ -627,7 +635,7 @@ const ProgressBar = ({ progress, total, message }: Omit<Progress, 'progressToken

return (
<div className="w-full space-y-2">
{message && <div className="text-sm text-textSubtle">{message}</div>}
{message && <div className="font-sans text-sm text-textSubtle">{message}</div>}

<div className="w-full bg-background-subtle rounded-full h-4 overflow-hidden relative">
{isDeterminate ? (
Expand Down
Loading