add copy button and replace message buttons

Chainlit · Dec 18, 2023 · d075560 · d075560
1 parent b1e0c2c
commit d075560
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 100 deletions.
diff --git a/libs/react-components/src/ClipboardCopy.tsx b/libs/react-components/src/ClipboardCopy.tsx
@@ -1,37 +1,19 @@
-import { grey } from 'theme/palette';
 import { useCopyToClipboard, useToggle } from 'usehooks-ts';
 
-import CopyAll from '@mui/icons-material/CopyAll';
-import { IconProps } from '@mui/material/Icon';
-import IconButton from '@mui/material/IconButton';
+import ContentPaste from '@mui/icons-material/ContentPaste';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
-import { useIsDarkMode } from 'hooks/useIsDarkMode';
-
 interface ClipboardCopyProps {
   value: string;
   theme?: 'dark' | 'light';
-  size?: IconProps['fontSize'];
+  edge?: IconButtonProps['edge'];
 }
 
-const ClipboardCopy = ({
-  value,
-  size,
-  theme
-}: ClipboardCopyProps): JSX.Element => {
+const ClipboardCopy = ({ value, edge }: ClipboardCopyProps): JSX.Element => {
   const [showTooltip, toggleTooltip] = useToggle();
-  const isDarkMode = useIsDarkMode();
   const [_, copy] = useCopyToClipboard();
 
-  const getColor = () => {
-    if (theme) {
-      if (theme === 'dark') return grey[200];
-      else if (theme === 'light') return grey[800];
-    }
-
-    return isDarkMode ? grey[200] : grey[800];
-  };
-
   return (
     <Tooltip
       open={showTooltip}
@@ -40,12 +22,8 @@ const ClipboardCopy = ({
       sx={{ zIndex: 2 }}
     >
       <IconButton
-        sx={{
-          color: getColor(),
-          position: 'absolute',
-          right: 0,
-          top: 0
-        }}
+        color="inherit"
+        edge={edge}
         onClick={() => {
           copy(value)
             .then(() => toggleTooltip())
@@ -54,7 +32,7 @@ const ClipboardCopy = ({
             );
         }}
       >
-        <CopyAll fontSize={size} />
+        <ContentPaste sx={{ height: 16, width: 16 }} />
       </IconButton>
     </Tooltip>
   );

diff --git a/libs/react-components/src/Code.tsx b/libs/react-components/src/Code.tsx
@@ -86,17 +86,19 @@ const Code = ({ children, ...props }: any) => {
     >
       <Stack
         px={2}
-        py={1}
+        py={0.5}
         direction="row"
         sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
           borderTopLeftRadius: '4px',
           borderTopRightRadius: '4px',
           background: isDarkMode ? grey[900] : grey[200],
           borderBottom: `1px solid ${grey[950]}`
         }}
       >
         <Typography variant="caption">{match?.[1] || 'Raw code'}</Typography>
-        <ClipboardCopy value={code} size="small" />
+        <ClipboardCopy edge="end" value={code} />
       </Stack>
 
       {highlightedCode}

diff --git a/libs/react-components/src/Collapse.tsx b/libs/react-components/src/Collapse.tsx
@@ -1,6 +1,5 @@
 import { useToggle } from 'usehooks-ts';
 
-import DownloadOutlined from '@mui/icons-material/DownloadOutlined';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Box from '@mui/material/Box';
@@ -11,13 +10,11 @@ import Tooltip from '@mui/material/Tooltip';
 
 interface CollapseProps {
   children: React.ReactNode;
-  onDownload: () => void;
   defaultExpandAll?: boolean;
 }
 
 const Collapse = ({
   children,
-  onDownload,
   defaultExpandAll = false
 }: CollapseProps): JSX.Element => {
   const [expandAll, toggleExpandAll] = useToggle(defaultExpandAll);
@@ -47,11 +44,6 @@ const Collapse = ({
             {expandAll ? <ExpandLess /> : <ExpandMore />}
           </IconButton>
         </Tooltip>
-        <Tooltip title="Download">
-          <IconButton onClick={onDownload} edge="end">
-            <DownloadOutlined />
-          </IconButton>
-        </Tooltip>
       </Stack>
     </Box>
   );

diff --git a/libs/react-components/src/messages/Message.tsx b/libs/react-components/src/messages/Message.tsx
@@ -9,6 +9,7 @@ import { AskUploadButton } from './components/AskUploadButton';
 import { AUTHOR_BOX_WIDTH, Author } from './components/Author';
 import { DetailsButton } from './components/DetailsButton';
 import { MessageActions } from './components/MessageActions';
+import { MessageButtons } from './components/MessageButtons';
 import { MessageContent } from './components/MessageContent';
 
 import type { IAction, IMessageElement, IStep } from 'client-types/';
@@ -126,6 +127,7 @@ const Message = memo(
               {actions?.length ? (
                 <MessageActions message={message} actions={actions} />
               ) : null}
+              <MessageButtons message={message} />
             </Stack>
           </Stack>
         </Box>

diff --git a/libs/react-components/src/messages/components/FeedbackButtons.tsx b/libs/react-components/src/messages/components/FeedbackButtons.tsx
@@ -10,8 +10,7 @@ import ThumbDownAlt from '@mui/icons-material/ThumbDownAlt';
 import ThumbDownAltOutlined from '@mui/icons-material/ThumbDownAltOutlined';
 import ThumbUpAlt from '@mui/icons-material/ThumbUpAlt';
 import ThumbUpAltOutlined from '@mui/icons-material/ThumbUpAltOutlined';
-import Button from '@mui/material/Button';
-import ButtonGroup from '@mui/material/ButtonGroup';
+import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -64,43 +63,39 @@ const FeedbackButtons = ({ message }: Props) => {
   const buttons = useMemo(() => {
     const iconSx = {
       width: ICON_SIZE,
-      height: ICON_SIZE,
-      color: (theme) =>
-        theme.palette.mode === 'light'
-          ? theme.palette.grey[600]
-          : theme.palette.text.primary
+      height: ICON_SIZE
     };
 
     const baseButtons = [
       () => (
-        <Tooltip title="Not helpful">
+        <Tooltip title="Helpful">
           <span>
-            <Button
+            <IconButton
+              color="inherit"
               disabled={disabled}
-              className={`negative-feedback-${feedback === -1 ? 'on' : 'off'}`}
+              className={`positive-feedback-${feedback === 1 ? 'on' : 'off'}`}
               onClick={() => {
-                handleFeedbackClick(-1);
+                handleFeedbackClick(1);
               }}
-              size="small"
             >
-              <DownIcon sx={iconSx} />
-            </Button>
+              <UpIcon sx={iconSx} />
+            </IconButton>
           </span>
         </Tooltip>
       ),
       () => (
-        <Tooltip title="Helpful">
+        <Tooltip title="Not helpful">
           <span>
-            <Button
+            <IconButton
+              color="inherit"
               disabled={disabled}
-              className={`positive-feedback-${feedback === 1 ? 'on' : 'off'}`}
+              className={`negative-feedback-${feedback === -1 ? 'on' : 'off'}`}
               onClick={() => {
-                handleFeedbackClick(1);
+                handleFeedbackClick(-1);
               }}
-              size="small"
             >
-              <UpIcon sx={iconSx} />
-            </Button>
+              <DownIcon sx={iconSx} />
+            </IconButton>
           </span>
         </Tooltip>
       )
@@ -110,17 +105,17 @@ const FeedbackButtons = ({ message }: Props) => {
       baseButtons.push(() => (
         <Tooltip title="Feedback">
           <span>
-            <Button
+            <IconButton
+              color="inherit"
               disabled={disabled}
               onClick={() => {
                 setShowFeedbackDialog(feedback);
                 setCommentInput(comment);
               }}
               className="feedback-comment-edit"
-              size="small"
             >
               <StickyNote2Outlined sx={iconSx} />
-            </Button>
+            </IconButton>
           </span>
         </Tooltip>
       ));
@@ -131,12 +126,10 @@ const FeedbackButtons = ({ message }: Props) => {
 
   return (
     <>
-      <Stack direction="row" spacing={1} color="text.secondary">
-        <ButtonGroup variant="text" color="inherit" sx={{ height: 26 }}>
-          {buttons.map((FeedbackButton, index) => (
-            <FeedbackButton key={`feedback-button-${index}`} />
-          ))}
-        </ButtonGroup>
+      <Stack direction="row">
+        {buttons.map((FeedbackButton, index) => (
+          <FeedbackButton key={`feedback-button-${index}`} />
+        ))}
       </Stack>
 
       <Dialog

diff --git a/libs/react-components/src/messages/components/MessageButtons.tsx b/libs/react-components/src/messages/components/MessageButtons.tsx
@@ -1,8 +1,12 @@
 import { MessageContext } from 'contexts/MessageContext';
 import { useContext } from 'react';
+import { ClipboardCopy } from 'src/ClipboardCopy';
+import { grey } from 'theme/palette';
 
 import Stack from '@mui/material/Stack';
 
+import { useIsDarkMode } from 'hooks/useIsDarkMode';
+
 import type { IStep } from 'client-types/';
 
 import { FeedbackButtons } from './FeedbackButtons';
@@ -13,12 +17,14 @@ interface Props {
 }
 
 const MessageButtons = ({ message }: Props) => {
+  const isDark = useIsDarkMode();
   const { showFeedbackButtons: showFbButtons } = useContext(MessageContext);
 
   const showPlaygroundButton = !!message.generation;
   const isUser = message.type === 'user_message';
   const isAsk = message.waitForAnswer;
   const hasContent = !!message.output;
+  const showCopyButton = hasContent && !isUser && !isAsk;
 
   const showFeedbackButtons =
     showFbButtons &&
@@ -27,16 +33,22 @@ const MessageButtons = ({ message }: Props) => {
     !isAsk &&
     hasContent;
 
-  const show = showPlaygroundButton || showFeedbackButtons;
+  const show = showCopyButton || showPlaygroundButton || showFeedbackButtons;
 
   if (!show) {
     return null;
   }
 
   return (
-    <Stack alignItems="start" ml="auto" direction="row">
-      {showPlaygroundButton ? <PlaygroundButton step={message} /> : null}
+    <Stack
+      sx={{ marginLeft: '-8px !important' }}
+      alignItems="center"
+      direction="row"
+      color={isDark ? grey[400] : grey[600]}
+    >
+      {showCopyButton ? <ClipboardCopy value={message.output} /> : null}
       {showFeedbackButtons ? <FeedbackButtons message={message} /> : null}
+      {showPlaygroundButton ? <PlaygroundButton step={message} /> : null}
     </Stack>
   );
 };

diff --git a/libs/react-components/src/messages/components/MessageContent.tsx b/libs/react-components/src/messages/components/MessageContent.tsx
@@ -2,7 +2,6 @@ import { memo } from 'react';
 import { Collapse } from 'src/Collapse';
 import { Markdown } from 'src/Markdown';
 import { InlinedElements } from 'src/elements/InlinedElements';
-import { exportToFile } from 'utils/exportToFile';
 import { prepareContent } from 'utils/message';
 
 import Box from '@mui/material/Box';
@@ -12,8 +11,6 @@ import Typography from '@mui/material/Typography';
 
 import type { IMessageElement, IStep } from 'client-types/';
 
-import { MessageButtons } from './MessageButtons';
-
 const COLLAPSE_MIN_LINES = 25; // Set this to the maximum number of lines you want to display before collapsing
 const COLLAPSE_MIN_LENGTH = 3000; // Set this to the maximum number of characters you want to display before collapsing
 
@@ -106,12 +103,7 @@ const MessageContent = memo(
       lineCount > COLLAPSE_MIN_LINES || contentLength > COLLAPSE_MIN_LENGTH;
 
     const messageContent = collapse ? (
-      <Collapse
-        defaultExpandAll={preserveSize}
-        onDownload={() => exportToFile(output, `${message.id}.txt`)}
-      >
-        {markdownContent}
-      </Collapse>
+      <Collapse defaultExpandAll={preserveSize}>{markdownContent}</Collapse>
     ) : (
       markdownContent
     );
@@ -122,7 +114,6 @@ const MessageContent = memo(
           {output ? messageContent : null}
           <InlinedElements elements={outputInlinedElements} />
         </Box>
-        <MessageButtons message={message} />
       </Stack>
     );
   }

diff --git a/libs/react-components/src/messages/components/PlaygroundButton.tsx b/libs/react-components/src/messages/components/PlaygroundButton.tsx
@@ -1,7 +1,7 @@
 import { MessageContext } from 'contexts/MessageContext';
 import { useContext } from 'react';
 
-import BugReport from '@mui/icons-material/BugReport';
+import Terminal from '@mui/icons-material/Terminal';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -17,13 +17,13 @@ const PlaygroundButton = ({ step }: Props) => {
   return (
     <Tooltip title="Inspect in prompt playground">
       <IconButton
-        size="small"
+        color="inherit"
         className="playground-button"
         onClick={() => {
           onPlaygroundButtonClick && onPlaygroundButtonClick(step);
         }}
       >
-        <BugReport sx={{ width: '16px', height: '16px' }} />
+        <Terminal sx={{ width: '18px', height: '18px' }} />
       </IconButton>
     </Tooltip>
   );

diff --git a/libs/react-components/src/playground/editor/EditorWrapper.tsx b/libs/react-components/src/playground/editor/EditorWrapper.tsx
@@ -57,7 +57,16 @@ export default function EditorWrapper({
         )}
       >
         {clipboardValue ? (
-          <ClipboardCopy value={clipboardValue} size="small" />
+          <Box
+            sx={{
+              position: 'absolute',
+              right: 0,
+              top: 0,
+              color: 'text.secondary'
+            }}
+          >
+            <ClipboardCopy value={clipboardValue} />
+          </Box>
         ) : null}
         {children}
       </Box>

diff --git a/libs/react-components/src/playground/editor/MessageWrapper.tsx b/libs/react-components/src/playground/editor/MessageWrapper.tsx
@@ -154,7 +154,7 @@ const MessageWrapper = ({
         {index !== undefined ? (
           <Box color="text.secondary">
             <IconButton color="inherit" onClick={onRemove}>
-              <RemoveCircleOutlineOutlined fontSize="small" />
+              <RemoveCircleOutlineOutlined sx={{ height: 18, width: 18 }} />
             </IconButton>
           </Box>
         ) : null}