Improve CG tool appearance

This commit is contained in:
Enrico Ros
2025-11-18 20:19:09 -08:00
parent 2675934ff8
commit 05d9869326
4 changed files with 10 additions and 10 deletions
@@ -102,7 +102,7 @@ export function BlockPartToolInvocation(props: {
const { humanName, originalName } = React.useMemo(() => {
const invocationType = invocation.type;
const originalName = invocationType === 'function_call' ? invocation.name : 'code_execution';
const humanName = humanReadableFunctionName(originalName, invocationType);
const humanName = humanReadableFunctionName(originalName, invocationType, 'invocation');
return { humanName, originalName };
}, [invocation]);
@@ -138,7 +138,7 @@ export function BlockPartToolInvocation(props: {
return (
<BlocksContainer onDoubleClick={props.onDoubleClick}><Box sx={{ px: 1.5 }}>
<BlocksContainer onDoubleClick={props.onDoubleClick}><Box /*sx={{ px: 1.5 }}*/>
<Sheet
variant='soft'
@@ -34,9 +34,9 @@ const KNOWN_TOOL_TRANSLATIONS: Record<string, string> = {
*
* First checks for known hosted tools, then applies heuristics for function names
*/
export function humanReadableFunctionName(name: string, invocationType: 'function_call' | 'code_execution'): string {
export function humanReadableFunctionName(name: string, invocationType: 'function_call' | 'code_execution', phase: 'invocation' | 'response'): string {
if (invocationType === 'code_execution')
return 'Code Execution';
return phase === 'invocation' ? 'Generated code' : 'Executed code';
// check for known hosted tools
if (KNOWN_TOOL_TRANSLATIONS[name])
@@ -35,7 +35,7 @@ export function BlockPartToolResponse(props: {
const { humanName, originalName, envInfo } = React.useMemo(() => {
const invocationType = response.type;
const originalName = invocationType === 'function_call' ? response.name : 'code_execution';
const humanName = humanReadableFunctionName(originalName, invocationType);
const humanName = humanReadableFunctionName(originalName, invocationType, 'response');
const envInfo = functionNameAppearance(environment);
return { humanName, originalName, envInfo };
}, [response, environment]);
@@ -85,7 +85,7 @@ export function BlockPartToolResponse(props: {
return (
<BlocksContainer onDoubleClick={props.onDoubleClick}><Box sx={{ px: 1.5 }}>
<BlocksContainer onDoubleClick={props.onDoubleClick}><Box /*sx={{ px: 1.5 }}*/>
<Sheet
variant='soft'
color={rError ? 'danger' : undefined}
@@ -119,18 +119,18 @@ export function ContentFragments(props: {
else if (part.pt === 'tool_invocation') {
if (part.invocation.type === 'function_call') {
editText = part.invocation.args /* string | null */ || '';
const humanName = humanReadableFunctionName(part.invocation.name, 'function_call');
const humanName = humanReadableFunctionName(part.invocation.name, 'function_call', 'invocation');
editLabel = `[Invocation] ${humanName} · \`${part.invocation.name}\``;
} else {
editText = part.invocation.code;
const humanName = humanReadableFunctionName('code_execution', 'code_execution');
const humanName = humanReadableFunctionName('code_execution', 'code_execution', 'invocation');
editLabel = `[Invocation] ${humanName} · \`${part.invocation.language}\``;
}
} else if (part.pt === 'tool_response') {
if (!part.error) {
editText = part.response.result;
const responseName = part.response.type === 'function_call' ? part.response.name : 'code_execution';
const humanName = humanReadableFunctionName(responseName, part.response.type);
const humanName = humanReadableFunctionName(responseName, part.response.type, 'response');
editLabel = `[Response] ${humanName} · \`${part.id}\``;
}
}
@@ -170,7 +170,7 @@ export function ContentFragments(props: {
const rt = part.rt;
switch (rt) {
case 'zync':
const zt = part.zType
const zt = part.zType;
switch (zt) {
case 'asset':
// TODO: [ASSET] future: implement rendering for the real Reference to Zync Asset