Add AppMessageToolbar component to LayoutRenderer.jsx

Author: ajhai

llmstack/client/src/components/apps/renderer/LayoutRenderer.jsx

@@ -15,6 +15,7 @@ import {
   Collapse,
   Container,
   Grid,
+  IconButton,
   Paper,
   Stack,
   Typography,
@@ -49,6 +50,29 @@ import "./LayoutRenderer.css";
 
 const liquidEngine = new Liquid();
 
+const AppMessageToolbar = ({ message }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "3px 0",
+        position: "absolute",
+        bottom: 0,
+        right: 0,
+      }}
+    >
+      <IconButton
+        onClick={() => navigator.clipboard.writeText(message.content)}
+        sx={{ color: "#999" }}
+      >
+        <ContentCopyOutlined fontSize="small" />
+      </IconButton>
+    </Box>
+  );
+};
+
 const PromptlyAppInputForm = memo(
   ({ workflow, runApp, submitButtonOptions, sx, clearOnSubmit = false }) => {
     const appRunData = useRecoilValue(appRunDataState);
@@ -221,6 +245,8 @@ const UserMessage = memo(
 const AppMessage = memo(
   (props) => {
     const { message, workflow, assistantImage } = props;
+    const [showToolbar, setShowToolbar] = useState(false);
+
     return (
       <Box
         sx={{
@@ -235,7 +261,13 @@ const AppMessage = memo(
           className={
             workflow ? "layout-workflow-output" : "layout-chat_message_from_app"
           }
+          sx={{
+            position: "relative",
+          }}
+          onMouseEnter={() => setShowToolbar(true)}
+          onMouseLeave={() => setShowToolbar(false)}
         >
+          {showToolbar && <AppMessageToolbar message={message} />}
           <LayoutRenderer>{message.content || ""}</LayoutRenderer>
         </Box>
       </Box>
@@ -249,6 +281,8 @@ const AppMessage = memo(
 const AgentMessage = memo(
   (props) => {
     const { message, workflow, assistantImage } = props;
+    const [showToolbar, setShowToolbar] = useState(false);
+
     return (
       <Box
         sx={{
@@ -264,12 +298,16 @@ const AgentMessage = memo(
             workflow ? "layout-workflow-output" : "layout-chat_message_from_app"
           }
           sx={{
+            position: "relative",
             color:
               message?.subType === "agent-step-error"
                 ? "red !important"
                 : "inherit",
           }}
+          onMouseEnter={() => setShowToolbar(true)}
+          onMouseLeave={() => setShowToolbar(false)}
         >
+          {showToolbar && <AppMessageToolbar message={message} />}
           <LayoutRenderer>{message.content || ""}</LayoutRenderer>
         </Box>
       </Box>