zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-11 14:10:15 -07:00
Code Issues Packages Projects Releases Wiki Activity

Tool Use/Response terrible rendering

Browse Source
This commit is contained in:
Enrico Ros
2024-07-24 21:18:21 -07:00
parent b50b796f15
commit b8d0a5064b
1 changed files with 123 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/chat/components/message/fragments-content/ContentFragments.tsx
+123 -3
View File
@@ -1,7 +1,9 @@
import * as React from 'react';
import type { SxProps } from '@mui/joy/styles/types';
import { Box } from '@mui/joy';
import { Box, Sheet } from '@mui/joy';
import { BlocksContainer } from '~/modules/blocks/BlocksContainer';
import type { ContentScaling } from '~/common/app.theme';
import type { DMessageRole } from '~/common/stores/chat/chat.message';
@@ -102,7 +104,7 @@ export function ContentFragments(props: {
messageRole={props.messageRole}
contentScaling={props.contentScaling}
showAsDanger
showAsItalic
// showAsItalic
/>
);
@@ -150,8 +152,126 @@ export function ContentFragments(props: {
/>
);
case 'tool_call':
case 'tool_invocation':
return (
<BlocksContainer key={fragment.fId}>
{fragment.part.invocation.type === 'function_call' ? (
<Sheet color='neutral' variant='soft' sx={{
flex: 1,
border: '1px solid',
borderColor: 'neutral.outlinedColor',
width: '100%',
borderRadius: 'lg',
boxShadow: 'inset 2px 0 4px -2px rgba(0, 0, 0, 0.2)',
fontSize: 'sm',
p: 2,
// grid layout with 2 cols
display: 'grid',
gridTemplateColumns: 'auto 1fr',
columnGap: 2,
rowGap: 1,
}}>
<div>Id</div>
<div>{fragment.part.id}</div>
<div>Name</div>
<div>{fragment.part.invocation.name}</div>
<div>Args</div>
<div>{fragment.part.invocation.args/*?.replaceAll('{', '').replaceAll('}', '').replaceAll('","', '", "')*/}</div>
</Sheet>
) : (
<Sheet color='neutral' variant='soft' sx={{
flex: 1,
border: '1px solid',
borderColor: 'neutral.outlinedColor',
width: '100%',
borderRadius: 'lg',
boxShadow: 'inset 2px 0 4px -2px rgba(0, 0, 0, 0.2)',
fontSize: 'sm',
p: 2,
// grid layout with 2 cols
display: 'grid',
gridTemplateColumns: 'auto 1fr',
columnGap: 2,
rowGap: 1,
}}>
<div>Id</div>
<div>{fragment.part.id}</div>
<div>Language</div>
<div>{fragment.part.invocation.language}</div>
<div>Code</div>
<div style={{ whiteSpace: 'pre' }}>{fragment.part.invocation.code?.trim()}</div>
<div>Author</div>
<div>{fragment.part.invocation.author}</div>
</Sheet>
)}
</BlocksContainer>
);
case 'tool_response':
return (
<BlocksContainer key={fragment.fId}>
{fragment.part.response.type === 'function_call' ? (
<Sheet color='neutral' variant='soft' sx={{
flex: 1,
border: '1px solid',
borderColor: 'neutral.outlinedColor',
width: '100%',
borderRadius: 'lg',
boxShadow: 'inset 2px 0 4px -2px rgba(0, 0, 0, 0.2)',
fontSize: 'sm',
p: 2,
// grid layout with 2 cols
display: 'grid',
gridTemplateColumns: 'auto 1fr',
columnGap: 2,
rowGap: 1,
}}>
<div>Type</div>
<div>Function Call Response</div>
<div>Id</div>
<div>{fragment.part.id}</div>
<div>Error</div>
<div>{fragment.part.error === null ? 'null' : fragment.part.error === 'false' ? '' : fragment.part.error}</div>
<div>Name</div>
<div style={{ fontWeight: 700 }}>{fragment.part.response.name}</div>
<div>Result</div>
<div style={{ fontWeight: 700 }}>{fragment.part.response.result}</div>
<div>Environment</div>
<div>{fragment.part.environment}</div>
</Sheet>
) : (
<Sheet color='neutral' variant='solid' sx={{
flex: 1,
border: '1px solid',
borderColor: 'neutral.outlinedColor',
width: '100%',
borderRadius: 'lg',
boxShadow: 'inset 2px 0 4px -2px rgba(0, 0, 0, 0.2)',
fontSize: 'sm',
p: 2,
// grid layout with 2 cols
display: 'grid',
gridTemplateColumns: 'auto 1fr',
columnGap: 2,
rowGap: 1,
}}>
<div>Type</div>
<div>Code Execution Response</div>
<div>Id</div>
<div>{fragment.part.id}</div>
<div>Error</div>
<div>{fragment.part.error === null ? 'null' : fragment.part.error === 'false' ? '' : fragment.part.error}</div>
<div>Result</div>
<div style={{ fontWeight: 700 }}>{fragment.part.response.result}</div>
<div>Executor</div>
<div>{fragment.part.response.executor}</div>
<div>Environment</div>
<div>{fragment.part.environment}</div>
</Sheet>
)}
</BlocksContainer>
);
case '_pt_sentinel':
default:
return (