fix: update based on suggestions

Author: lyjeileen

docs/chatControlIcons.stories.mdx

@@ -6,7 +6,7 @@ import { Source, Meta } from '@storybook/addon-docs'
 
 The chat control options are a set of interactive buttons that allow users to perform various actions on messages within a chat interface. These options provide users with functionalities to engage with messages in different ways, such as editing, copying, and deleting.
 
-The examples of chat control options are shown in the `MessageCanvas` and `MessageSpace`'s stories. Users can import the necessary components and integrate them via the `getActionsComponent` props. Below are the available control options along with their accepted fields:
+The examples of chat control options are shown in the `MessageCanvas` and `MessageSpace`'s stories. Users can import the necessary components and integrate them via the `getActionsComponent` props. Keep in mind that the `getActionsComponent` props must always be a single React element and can be composed of several control options supported for the message. Below are the available control options along with their accepted fields:
 
 ## Copy
 

src/components/messageCanvas/actions/copy/copy.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import Icon from '../../../icon'
 import type { ThreadableMessage } from '../../../types'
@@ -9,16 +9,31 @@ export interface CopyProps {
 }
 
 export default function Copy(props: CopyProps) {
+  const [tooltipContent, setTooltipContent] = useState('Copy')
+  const twoSeconds = 2000
+
+  function handleOnClick(message: ThreadableMessage) {
+    if (message.data.text) {
+      navigator.clipboard
+        .writeText(message.data.text)
+        .then(() => {
+          setTooltipContent('Copied')
+          setTimeout(() => {
+            setTooltipContent('Copy')
+          }, twoSeconds)
+        })
+        .catch(() => {
+          setTooltipContent('Failed to copy')
+        })
+    }
+  }
+
   return (
     <Action
       message={props.message}
       icon={<Icon name="file_copy" />}
-      onClick={(message: ThreadableMessage) => {
-        if (message.data.text) {
-          navigator.clipboard.writeText(message.data.text)
-        }
-      }}
-      label="Copy"
+      onClick={handleOnClick}
+      label={tooltipContent}
     />
   )
 }

src/components/messageCanvas/messageCanvas.stories.tsx

@@ -1,4 +1,3 @@
-import Card from '@mui/material/Card'
 import React from 'react'
 
 import { ElementRenderer, type ThreadableMessage } from '..'
@@ -165,7 +164,7 @@ export const WithCopyIcon = {
     getActionsComponent: (message: ThreadableMessage) => {
       const copyButton = message.format === 'text' && <Copy message={message} />
       if (copyButton) {
-        return <Card variant="outlined">{copyButton}</Card>
+        return <>{copyButton}</>
       }
     },
   },
@@ -180,7 +179,7 @@ export const WithCopyIcon = {
   getActionsComponent: (message: ThreadableMessage) => {
     const copyButton = message.format === 'text' && <Copy message={message} />
     if (copyButton) {
-      return <Card variant="outlined">{copyButton}</Card>
+      return <>{copyButton}</>
     }
   },
   message={{

src/components/messageCanvas/messageCanvas.tsx

@@ -16,8 +16,8 @@ export interface MessageCanvasProps {
   message: ThreadableMessage
   /** React component to be displayed in the message canvas. */
   children: ReactNode
-  /** Message actions. For example, this could be a list of buttons for different actions (e.g. copy, delete, save, etc.) */
-  getActionsComponent?: (message: ThreadableMessage) => ReactNode
+  /** A function that returns a single React element which contains message actions. For example, this could be a list of buttons for different actions (e.g. copy, delete, save, etc.). The function may also return no element if no actions are applicable or available for a particular message. */
+  getActionsComponent?: (message: ThreadableMessage) => ReactNode | undefined
 }
 
 export default function MessageCanvas(props: MessageCanvasProps) {
@@ -37,7 +37,12 @@ export default function MessageCanvas(props: MessageCanvasProps) {
         {props.children}
       </Card>
       <Box className="rustic-message-footer">
-        {props.getActionsComponent && props.getActionsComponent(props.message)}
+        {props.getActionsComponent &&
+          props.getActionsComponent(props.message) && (
+            <Card variant="outlined">
+              {props.getActionsComponent(props.message)}
+            </Card>
+          )}
         <Box className="rustic-timestamp">
           {props.message.lastThreadMessage && (
             <Typography variant="caption">last updated: </Typography>

src/components/messageSpace/messageSpace.stories.tsx

@@ -1,4 +1,3 @@
-import Card from '@mui/material/Card'
 import React from 'react'
 import { v4 as getUUID } from 'uuid'
 
@@ -38,7 +37,7 @@ export default {
     },
     getActionsComponent: {
       description:
-        'Message actions. For example, this could be a list of buttons for different actions (e.g. copy, delete, save, etc.)',
+        'A function that returns a single React element which contains message actions. For example, this could be a list of buttons for different actions (e.g. copy, delete, save, etc.). However, the function may also return no element if no actions are applicable or available for a particular message.',
     },
     getProfileComponent: {
       description: "Profile icon to be shown before the sender's name.",
@@ -401,7 +400,7 @@ export const Default = {
     getActionsComponent: (message: ThreadableMessage) => {
       const copyButton = message.format === 'text' && <Copy message={message} />
       if (copyButton) {
-        return <Card variant="outlined">{copyButton}</Card>
+        return <>{copyButton}</>
       }
     },
   },