From 40d05771c121e82dbbc4a012ef2dcc21aff35bbf Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Sat, 11 Jan 2025 16:09:40 -0800
Subject: [PATCH] Doc edit pane: improve edit buttons, swap the order for
 assistant segments

---
 .../DocAttachmentFragment.tsx                 | 49 ++++++++++++++-----
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragment.tsx b/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragment.tsx
index 7d409b129..234c9f867 100644
--- a/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragment.tsx
+++ b/src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragment.tsx
@@ -31,6 +31,13 @@ function inferInitialViewAsCode(attachmentFragment: DMessageAttachmentFragment)
 }
 
 
+const _styles = {
+  button: {
+    minWidth: 100,
+  } as const,
+} as const;
+
+
 export function DocAttachmentFragment(props: {
   fragment: DMessageAttachmentFragment,
   editedText?: string,
@@ -63,7 +70,8 @@ export function DocAttachmentFragment(props: {
   if (!isDocPart(fragmentDocPart))
     throw new Error('Unexpected part type: ' + fragmentDocPart.pt);
 
-  const fragmentTitle = fragmentDocPart.l1Title || fragment.title;
+  const fragmentTitle = fragmentDocPart.l1Title || fragment.caption;
+  const reverseToolbar = props.messageRole === 'assistant';
 
 
   // hooks
@@ -220,16 +228,24 @@ export function DocAttachmentFragment(props: {
   const toolbarRow = React.useMemo(() => (
     <Box sx={{
       display: 'flex',
+      flexDirection: !reverseToolbar ? 'row' : 'row-reverse',
       flexWrap: 'wrap',
       justifyContent: 'space-between',
       gap: 1,
     }}>
 
       {/* Delete / Confirm */}
-      <Box sx={{ display: 'flex', gap: 1 }}>
-        <Button variant='outlined' color={isDeleteArmed ? 'neutral' : DocSelColor} size='sm' onClick={handleToggleDeleteArmed} startDecorator={isDeleteArmed ? <CloseRoundedIcon /> : <DeleteOutlineIcon />}>
+      <Box sx={{ display: 'flex', flexDirection: !reverseToolbar ? 'row' : 'row-reverse', gap: 1 }}>
+        {!isEditing && <Button
+          variant='soft'
+          color={DocSelColor}
+          size='sm'
+          onClick={handleToggleDeleteArmed}
+          startDecorator={isDeleteArmed ? <CloseRoundedIcon /> : <DeleteOutlineIcon />}
+          sx={_styles.button}
+        >
           {isDeleteArmed ? 'Cancel' : 'Delete'}
-        </Button>
+        </Button>}
         {isDeleteArmed && (
           <Button variant='solid' color='danger' size='sm' onClick={handleFragmentDelete} startDecorator={<DeleteForeverIcon />}>
             Delete
@@ -238,18 +254,25 @@ export function DocAttachmentFragment(props: {
       </Box>
 
       {/* Edit / Save */}
-      <Box sx={{ display: 'flex', gap: 1 }}>
-        <Button variant='outlined' color={isEditing ? 'neutral' : DocSelColor} size='sm' onClick={handleToggleEdit} startDecorator={isEditing ? <CloseRoundedIcon /> : <EditRoundedIcon />}>
+      <Box sx={{ display: 'flex', flexDirection: !reverseToolbar ? 'row' : 'row-reverse', gap: 1 }}>
+        <Button
+          variant='soft'
+          color={DocSelColor}
+          size='sm'
+          onClick={handleToggleEdit}
+          startDecorator={isEditing ? <CloseRoundedIcon /> : <EditRoundedIcon />}
+          sx={_styles.button}
+        >
           {isEditing ? 'Cancel' : 'Edit'}
         </Button>
         {isEditing && (
-          <Button variant='solid' color='success' onClick={handleEditApply} size='sm' startDecorator={<CheckRoundedIcon />}>
+          <Button variant='solid' color='success' onClick={handleEditApply} size='sm' startDecorator={<CheckRoundedIcon />} sx={_styles.button}>
             Save
           </Button>
         )}
       </Box>
     </Box>
-  ), [handleEditApply, handleFragmentDelete, handleToggleDeleteArmed, handleToggleEdit, isDeleteArmed, isEditing]);
+  ), [handleEditApply, handleFragmentDelete, handleToggleDeleteArmed, handleToggleEdit, isDeleteArmed, isEditing, reverseToolbar]);
 
 
   return (
@@ -283,11 +306,11 @@ export function DocAttachmentFragment(props: {
             // text={marshallWrapText(fragmentDocPart.data.text, /*part.meta?.srcFileName || part.ref*/ undefined, 'markdown-code')}
             text={fragmentDocPart.data.text}
             renderAsCodeWithTitle={viewAsCode ? (fragmentDocPart.data?.mimeType || fragmentDocPart.ref || fragmentTitle) : undefined}
-          fromRole={props.messageRole}
-          contentScaling={props.contentScaling}
-          fitScreen={props.isMobile}
-          isMobile={props.isMobile}
-          codeRenderVariant='plain'
+            fromRole={props.messageRole}
+            contentScaling={props.contentScaling}
+            fitScreen={props.isMobile}
+            isMobile={props.isMobile}
+            codeRenderVariant='plain'
             textRenderVariant={props.disableMarkdownText ? 'text' : 'markdown'}
           />
         </Box>