iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1843 from xKevIsDev/mcp-tweaks

Browse Source 
refactor(chat): streamline AssistantMessage and ToolInvocations components
This commit is contained in:
KevIsDev
2025-07-13 09:39:45 +01:00
committed by GitHub
parent 7408fc7b42 c93f6d0d0a
commit ece763e4c9
2 changed files with 134 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/chat/AssistantMessage.tsx
View File

@@ -176,6 +176,9 @@ export const AssistantMessage = memo(
</div>
</div>
</>
<Markdown append={append} chatMode={chatMode} setChatMode={setChatMode} model={model} provider={provider} html>
{content}
</Markdown>
{toolInvocations && toolInvocations.length > 0 && (
<ToolInvocations
toolInvocations={toolInvocations}
@@ -183,9 +186,6 @@ export const AssistantMessage = memo(
addToolResult={addToolResult}
/>
)}
<Markdown append={append} chatMode={chatMode} setChatMode={setChatMode} model={model} provider={provider} html>
{content}
</Markdown>
</div>
);
},

178
app/components/chat/ToolInvocations.tsx
View File

@@ -1,6 +1,6 @@
import type { ToolInvocationUIPart } from '@ai-sdk/ui-utils';
import { AnimatePresence, motion } from 'framer-motion';
import { memo, useMemo, useState } from 'react';
import { memo, useMemo, useState, useEffect } from 'react';
import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
import { classNames } from '~/utils/classNames';
import {
@@ -102,18 +102,17 @@ export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, add
}
return (
<div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150 mt-4 mb-4">
<div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
<div className="flex">
<button
className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
onClick={toggleDetails}
aria-label={showDetails ? 'Collapse details' : 'Expand details'}
>
<div className="p-2">
<div className="p-2.5">
<div className="i-ph:wrench text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
</div>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
<div className="px-5 p-2 w-full text-left">
<div className="border-l border-bolt-elements-borderColor p-2.5 w-full text-left">
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
MCP Tool Invocations{' '}
{hasToolResults && (
@@ -124,7 +123,6 @@ export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, add
</div>
</div>
</button>
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
<AnimatePresence>
{hasToolResults && (
<motion.button
@@ -155,7 +153,7 @@ export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, add
>
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
<div className="p-5 text-left bg-bolt-elements-actions-background">
<div className="px-3 py-3 text-left bg-bolt-elements-actions-background">
<ToolCallsList
toolInvocations={toolCalls}
toolCallAnnotations={toolCallAnnotations}
@@ -276,6 +274,71 @@ interface ToolCallsListProps {
}
const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResult, theme }: ToolCallsListProps) => {
const [expanded, setExpanded] = useState<{ [id: string]: boolean }>({});
// OS detection for shortcut display
const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
const toggleExpand = (toolCallId: string) => {
setExpanded((prev) => ({
...prev,
[toolCallId]: !prev[toolCallId],
}));
};
useEffect(() => {
const expandedState: { [id: string]: boolean } = {};
toolInvocations.forEach((inv) => {
if (inv.toolInvocation.state === 'call') {
expandedState[inv.toolInvocation.toolCallId] = true;
}
});
setExpanded(expandedState);
}, [toolInvocations]);
// Keyboard shortcut logic
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Ignore if focus is in an input/textarea/contenteditable
const active = document.activeElement as HTMLElement | null;
if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) {
return;
}
if (Object.keys(expanded).length === 0) {
return;
}
const openId = Object.keys(expanded).find((id) => expanded[id]);
if (!openId) {
return;
}
// Cancel: Cmd/Ctrl + Backspace
if ((isMac ? e.metaKey : e.ctrlKey) && e.key === 'Backspace') {
e.preventDefault();
addToolResult({
toolCallId: openId,
result: TOOL_EXECUTION_APPROVAL.REJECT,
});
}
// Run tool: Cmd/Ctrl + Enter
if ((isMac ? e.metaKey : e.ctrlKey) && (e.key === 'Enter' || e.key === 'Return')) {
e.preventDefault();
addToolResult({
toolCallId: openId,
result: TOOL_EXECUTION_APPROVAL.APPROVE,
});
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [expanded, addToolResult, isMac]);
return (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
<ul className="list-none space-y-4">
@@ -287,10 +350,7 @@ const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResul
}
const { toolName, toolCallId } = tool.toolInvocation;
const annotation = toolCallAnnotations.find((annotation) => {
return annotation.toolCallId === toolCallId;
});
const annotation = toolCallAnnotations.find((annotation) => annotation.toolCallId === toolCallId);
return (
<motion.li
@@ -298,51 +358,55 @@ const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResul
variants={toolVariants}
initial="hidden"
animate="visible"
transition={{
duration: 0.2,
ease: cubicEasingFn,
}}
transition={{ duration: 0.2, ease: cubicEasingFn }}
>
<div className="ml-6 mb-2">
<div key={toolCallId}>
<div className="text-bolt-elements-textPrimary">Bolt wants to use a tool.</div>
<div className="text-bolt-elements-textSecondary text-xs mb-1">
Server:{' '}
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</span>
</div>
<div className="text-bolt-elements-textSecondary text-xs mb-1">
Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
<div className="">
<div key={toolCallId} className="flex flex-col gap-1">
<div className="flex items-center text-bolt-elements-textSecondary font-semibold text-sm">
<button
onClick={() => toggleExpand(toolCallId)}
className="mr-1 focus:outline-none bg-transparent"
aria-label={expanded[toolCallId] ? 'Collapse' : 'Expand'}
tabIndex={0}
type="button"
>
<span
className={`i-ph:caret-down-bold inline-block transition-transform duration-150 ${expanded[toolCallId] ? '' : '-rotate-90'}`}
/>
</button>
Calling MCP tool{' '}
<span className="ml-0.5 font-light font-mono text-bolt-elements-textPrimary bg-bolt-elements-background-depth-3 px-1.5 py-0.5 rounded-md">
{toolName}
</span>
</div>
{expanded[toolCallId] && (
<div className="flex gap-3">
<div className="w-[0.1px] min-h-[40px] bg-bolt-elements-background-depth-3 ml-1.5" />
<div className="flex flex-col gap-1 w-full">
<div className="text-bolt-elements-textSecondary text-xs mb-1">
Description:{' '}
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
<span className="text-bolt-elements-textPrimary font-semibold">
{annotation?.toolDescription}
</span>
</div>
<div className="flex w-full items-stretch space-x-2">
<div className="w-full rounded-md bg-bolt-elements-background-depth-3 p-3 ml-0 border-l-2 border-bolt-elements-borderColor">
<JsonCodeBlock
className="mb-0"
code={JSON.stringify(tool.toolInvocation.args, null, 2)}
theme={theme}
/>
</div>
</div>
</div>
</div>
<div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
</div>{' '}
<div className="flex justify-end gap-2 pt-2">
<button
className={classNames(
'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
'bg-purple-500 hover:bg-purple-600',
'text-white',
'disabled:opacity-50 disabled:cursor-not-allowed',
)}
onClick={() =>
addToolResult({
toolCallId,
result: TOOL_EXECUTION_APPROVAL.APPROVE,
})
}
>
Approve
</button>
<div className="flex justify-end gap-2 pt-2.5">
<button
className={classNames(
'px-3 py-1.5 rounded-lg text-sm',
'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
'text-bolt-elements-textPrimary',
'px-2.5 py-1.5 rounded-lg text-xs',
'bg-transparent',
'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary',
'transition-all duration-200',
'flex items-center gap-2',
)}
@@ -353,7 +417,23 @@ const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResul
})
}
>
Reject
Cancel <span className="opacity-70 text-xs ml-1">{isMac ? '⌘⌫' : 'Ctrl+Backspace'}</span>
</button>
<button
className={classNames(
'inline-flex items-center gap-2 px-3.5 py-1.5 text-xs font-normal rounded-lg transition-colors',
'bg-accent-500 hover:bg-accent-600',
'text-black',
'disabled:opacity-50 disabled:cursor-not-allowed',
)}
onClick={() =>
addToolResult({
toolCallId,
result: TOOL_EXECUTION_APPROVAL.APPROVE,
})
}
>
Run tool <span className="opacity-70 text-xs ml-1">{isMac ? '⌘↵' : 'Ctrl+Enter'}</span>
</button>
</div>
</div>