ReplyToBubble: improve inline

src/apps/chat/components/message/ChatMessage.tsx

@@ -551,6 +551,15 @@ export function ChatMessage(props: {
             </Typography>
           )}
 
+          {/* Reply-To Bubble */}
+          {!!messageMetadata?.inReplyToText && (
+            <ReplyToBubble
+              inlineUserMessage
+              replyToText={messageMetadata.inReplyToText}
+              className='reply-to-bubble'
+            />
+          )}
+
           {/* Image Attachment Fragments (just for a prettier display on top of the message) */}
           {imageAttachments.length >= 1 && !isEditingText && (
             <ImageAttachmentFragments
@@ -607,15 +616,6 @@ export function ChatMessage(props: {
             />
           )}
 
-          {/* Reply-To Bubble */}
-          {!!messageMetadata?.inReplyToText && (
-            <ReplyToBubble
-              inlineUserMessage
-              replyToText={messageMetadata.inReplyToText}
-              className='reply-to-bubble'
-            />
-          )}
-
         </Box>
 
         {/* Editing: Cancel */}

src/apps/chat/components/message/ReplyToBubble.tsx

@@ -34,9 +34,10 @@ export const inlineMessageBubbleSx: SxProps = {
   // redefine
   // border: 'none',
   // mt: 1,
-  borderColor: `${INLINE_COLOR}.outlinedColor`,
+  borderColor: `${INLINE_COLOR}.outlinedColor`, // outlinedBorder:lighter, outlinedColor:darker
   borderRadius: 'sm',
   boxShadow: 'xs',
+  // boxShadow: 'inset 2px 0px 5px -4px var(--joy-palette-primary-outlinedColor)',
   width: undefined,
   padding: '0.375rem 0.25rem 0.375rem 0.5rem',
 
@@ -45,7 +46,8 @@ export const inlineMessageBubbleSx: SxProps = {
   // mr: { xs: 7.75, md: 10.5 }, // personaSx.minWidth + gap (md: 1) + 1.5 (text margin)
 
   // now: the parent is a 'grid' to v-layout fragment types
-  mx: '0.75rem', // 1.5, like margin of text blocks
+  // mx: '0.75rem', // 1.5, like margin of text blocks
+  ml: 'auto', // right-align the bubble in the parent
 
 };
 
@@ -58,6 +60,7 @@ export function ReplyToBubble(props: {
 }) {
   return (
     <Box className={props.className} sx={!props.inlineUserMessage ? bubbleComposerSx : inlineMessageBubbleSx}>
+
       <Tooltip disableInteractive arrow title='Referring to this assistant text' placement='top'>
         <ReplyRoundedIcon sx={{
           color: props.inlineUserMessage ? `${INLINE_COLOR}.outlinedColor` : 'primary.solidBg',
@@ -65,23 +68,26 @@ export function ReplyToBubble(props: {
           mt: 0.125,
         }} />
       </Tooltip>
+
       <Typography level='body-sm' sx={{
         flex: 1,
         ml: 1,
-        mr: 0.5,
+        mr: props.inlineUserMessage ? 1 : 0.5,
         overflow: 'auto',
-        maxHeight: '5.75rem',
+        maxHeight: props.inlineUserMessage ? '8rem' : '5.75rem',
         lineHeight: 'xl',
-        color: /*props.inlineMessage ? 'text.tertiary' :*/ 'text.secondary',
+        color: props.inlineUserMessage ? 'primary.softActiveColor' : 'text.secondary',
         whiteSpace: 'break-spaces', // 'balance'
       }}>
         {props.replyToText}
       </Typography>
+
       {!!props.onClear && (
         <IconButton size='sm' onClick={props.onClear} sx={{ my: -0.5, background: 'none' }}>
           <CloseRoundedIcon />
         </IconButton>
       )}
+
     </Box>
   );
 }