From b8d0a5064bb22a1abdf2000ed3ea1b19cacefa92 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Wed, 24 Jul 2024 21:18:21 -0700
Subject: [PATCH] Tool Use/Response terrible rendering

---
 .../fragments-content/ContentFragments.tsx    | 126 +++++++++++++++++-
 1 file changed, 123 insertions(+), 3 deletions(-)

diff --git a/src/apps/chat/components/message/fragments-content/ContentFragments.tsx b/src/apps/chat/components/message/fragments-content/ContentFragments.tsx
index 76a7fe015..1b36d551b 100644
--- a/src/apps/chat/components/message/fragments-content/ContentFragments.tsx
+++ b/src/apps/chat/components/message/fragments-content/ContentFragments.tsx
@@ -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 (