ReplyTo: improve bubble

src/apps/chat/components/composer/BubbleReplyTo.tsx

@@ -1,38 +1,53 @@
 import * as React from 'react';
 
+import type { SxProps } from '@mui/joy/styles/types';
 import { Box, IconButton, Tooltip, Typography } from '@mui/joy';
-
-import ReplyRoundedIcon from '@mui/icons-material/ReplyRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import ReplyRoundedIcon from '@mui/icons-material/ReplyRounded';
 
 
-export function BubbleReplyTo(props: { replyToText: string | null, onClick: () => void }) {
+const bubbleComposerSx: SxProps = {
+  // contained
+  width: '100%',
+  zIndex: 2, // stays on top of the 'tokens' bubble in the composer
+
+  // style
+  backgroundColor: 'background.surface',
+  border: '1px solid',
+  borderColor: 'neutral.outlinedBorder',
+  borderRadius: 'sm',
+  boxShadow: 'xs',
+  padding: '0.5rem 0.25rem 0.5rem 0.5rem',
+
+  // layout
+  display: 'flex',
+  alignItems: 'start',
+};
+
+
+export function BubbleReplyTo(props: {
+  replyToText: string | null,
+  onClear: () => void
+  className?: string,
+}) {
   return (
-    <Box sx={{
-      backgroundColor: 'background.popup',
-      p: 1,
-      pr: 0.5,
-      border: '1px solid',
-      borderColor: 'neutral.outlinedBorder',
-      borderRadius: 'xl',
-      borderTopLeftRadius: 0,
-      display: 'flex', alignItems: 'start',
-    }}>
+    <Box className={props.className} sx={bubbleComposerSx}>
       <Tooltip disableInteractive arrow title='Replying to the assistant text' placement='top'>
-        <ReplyRoundedIcon sx={{ color: 'primary.solidBg', fontSize: 'xl' }} />
+        <ReplyRoundedIcon sx={{ color: 'primary.solidBg', fontSize: 'xl', mt: 0.125 }} />
       </Tooltip>
       <Typography level='body-sm' sx={{
         flex: 1,
-        ml: 1, mr: 0.5,
+        ml: 1,
+        mr: 0.5,
         overflow: 'auto',
-        maxHeight: '7.5rem',
+        maxHeight: '5.75rem',
         lineHeight: 'xl',
         color: 'text.secondary',
         whiteSpace: 'break-spaces', // 'balance'
       }}>
         {props.replyToText}
       </Typography>
-      <IconButton size='sm' onClick={props.onClick} sx={{ my: -0.5, background: 'none' }}>
+      <IconButton size='sm' onClick={props.onClear} sx={{ my: -0.5, background: 'none' }}>
         <CloseRoundedIcon />
       </IconButton>
     </Box>

src/apps/chat/components/composer/Composer.tsx

@@ -630,9 +630,6 @@ export function Composer(props: {
             minWidth: 200, // flex: enable X-scrolling (resetting any possible minWidth due to the attachments)
           }}>
 
-            {/* Reply-to */}
-            {!!replyToText && <BubbleReplyTo replyToText={replyToText} onClick={handleReplyToCleared} />}
-
             {/* Textarea + Mic buttons + Mic/Drag overlay */}
             <Box sx={{ position: 'relative' }}>
 
@@ -654,6 +651,7 @@ export function Composer(props: {
                   onPasteCapture={handleAttachCtrlV}
                   // onFocusCapture={handleFocusModeOn}
                   // onBlurCapture={handleFocusModeOff}
+                  endDecorator={showReplyTo && <BubbleReplyTo replyToText={replyToGenerateText} onClear={handleReplyToCleared} className='reply-to-bubble' />}
                   slotProps={{
                     textarea: {
                       enterKeyHint: enterIsNewline ? 'enter' : 'send',
@@ -666,7 +664,7 @@ export function Composer(props: {
                   }}
                   sx={{
                     backgroundColor: 'background.level1',
-                    '&:focus-within': { backgroundColor: 'background.popup' },
+                    '&:focus-within': { backgroundColor: 'background.popup', '.reply-to-bubble': { backgroundColor: 'background.popup' } },
                     lineHeight: lineHeightTextareaMd,
                   }} />