feat: add copy function #118

lyjeileen · 2024-05-02T20:21:04Z

Changes

Add copy and action component

(I added a note in the MessageSpace's story and asked people to refer to MessageCanvas for the usage of getActionsComponent and getProfileComponent. It's showing ()={} right now in the MessageSpace's stories. I thought about overwriting the original code, but the message array is quite long and we will have a lot of duplicate code.

Screenshots

Video

docs/chatControlIcons.stories.mdx

Shiti · 2024-05-03T17:35:10Z

src/components/messageCanvas/messageCanvas.tsx

-            {props.getActionsComponent(props.message)}
-          </Card>
-        )}
+        {props.getActionsComponent && props.getActionsComponent(props.message)}


This should not be changed. The component is expected to be several supported actions. Styling should be set here for the container.

If we want to have the border in the messageCanvas, we need to hide it when no button is returned by props.getActionsComponent. Is it ok that I change the type of getActionsComponent from (message: ThreadableMessage) => ReactNode to (message: ThreadableMessage) => ReactNode | undefined?

Shiti · 2024-05-03T17:36:08Z

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

+        if (message.data.text) {
+          navigator.clipboard.writeText(message.data.text)
+        }


I think we should indicate the text was copied using tooltip or something similar

Shiti · 2024-05-06T16:37:53Z

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

+        .then(() => {
+          setTooltipContent('Copied')
+          setTimeout(() => {
+            setTooltipContent('Copy')


Suggested change

setTooltipContent('Copy')

setTooltipContent('Copy Text')

kaseyvee · 2024-05-06T19:00:22Z

src/components/messageCanvas/messageCanvas.stories.tsx

      description: {
        component:
-          'The `Message Canvas` component serves as a container for displaying messages within a chat interface. It provides a structured layout for rendering message content along with sender information and timestamp details. This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.',
+          'The `MessageCanvas` component serves as a container for displaying messages within a chat interface. It provides a structured layout for rendering message content along with sender information and timestamp details. This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.\n\n##`getActionsComponent`:\n\n`getActionsComponent` is a single React element and can be composed of several actions supported for the message, such as editing, copying, and deleting. The examples of actions are listed below:\n\n###Copy:\n\nOnly supports copying text from text message.\n\nFields:\n\n```message: ThreadableMessage```\n\nAdditional control options are currently under development.\n\n---\n\n###Advance Usage\n\nFor advanced customization of available message actions, developers can import the `Action` component and extend its functionality to incorporate additional actions as needed. This approach offers flexibility in tailoring message interactions to specific application requirements. For an example, see the copy icon below, which extends the functionality of the `Action` component.',


"The examples of actions are listed below:" > "Listed below are actions you can import from the library to use in your application:"

Or something similar or mentioned somewhere that let's people know we've exposed this action.

Suggested change

'The `MessageCanvas` component serves as a container for displaying messages within a chat interface. It provides a structured layout for rendering message content along with sender information and timestamp details. This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.\n\n##`getActionsComponent`:\n\n`getActionsComponent` is a single React element and can be composed of several actions supported for the message, such as editing, copying, and deleting. The examples of actions are listed below:\n\n###Copy:\n\nOnly supports copying text from text message.\n\nFields:\n\n```message: ThreadableMessage```\n\nAdditional control options are currently under development.\n\n---\n\n###Advance Usage\n\nFor advanced customization of available message actions, developers can import the `Action` component and extend its functionality to incorporate additional actions as needed. This approach offers flexibility in tailoring message interactions to specific application requirements. For an example, see the copy icon below, which extends the functionality of the `Action` component.',

'The `MessageCanvas` component serves as a container for displaying messages within a chat interface. It provides a structured layout for rendering message content along with sender information and timestamp details. This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.\n\n##`getActionsComponent`:\n\n`getActionsComponent` is a single React element and can be composed of several actions supported for the message, such as editing, copying, and deleting. Listed below are actions you can import from the library to use in your application:\n\n###Copy:\n\nOnly supports copying text from text message.\n\nFields:\n\n```message: ThreadableMessage```\n\nAdditional control options are currently under development.\n\n---\n\n###Advance Usage\n\nFor advanced customization of available message actions, developers can import the `Action` component and extend its functionality to incorporate additional actions as needed. This approach offers flexibility in tailoring message interactions to specific application requirements. For an example, see the copy icon below, which extends the functionality of the `Action` component.',

Shiti · 2024-05-06T18:51:41Z

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

+  message: ThreadableMessage
+}
+
+export default function Copy(props: CopyProps) {


Should we rename this to CopyText instead?

Suggested change

export default function Copy(props: CopyProps) {

export default function CopyText(props: CopyProps) {

Shiti · 2024-05-06T18:52:23Z

src/components/messageCanvas/messageCanvas.tsx

+  /** 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


Suggested change

/** 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

/** A function that returns a single React element which may be composed of several actions supported for the message, such as editing, copying, and deleting, etc.

* In case no actions are applicable or available for a particular message, the function may return `undefined`.

* This approach offers flexibility in tailoring message interactions to specific application requirements.

* To define individual message actions, developers can extend the `Action` component's functionality.

* One such example is the CopyText component.

*/

getActionsComponent?: (message: ThreadableMessage) => ReactNode | undefined

Shiti · 2024-05-06T18:54:18Z

src/components/messageCanvas/messageCanvas.tsx

+  getActionsComponent?: (message: ThreadableMessage) => ReactNode | undefined
 }

 export default function MessageCanvas(props: MessageCanvasProps) {


Suggested change

export default function MessageCanvas(props: MessageCanvasProps) {

/**

The `MessageCanvas` component serves as a container for displaying messages within a chat interface.

It provides a structured layout for rendering message content along with sender information and timestamp details.

This component is designed to encapsulate individual message items and facilitate consistent rendering of messages within an application.

*/

export default function MessageCanvas(props: MessageCanvasProps) {

Shiti · 2024-05-06T18:56:35Z

src/components/messageCanvas/messageCanvas.stories.tsx

  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    docs: {


I think we should not use this and instead write JsDoc Comments for the component as recommended on Storybook docs

We recommend using JSDoc comments for descriptions, and only use the parameters.docs.description.X properties in situations where comments are not possible to write for some reason, or where you want the description shown in Storybook to be different from the comments. Comments provide a better writing experience as you don’t have to worry about indentation, and they are more discoverable for other developers that are exploring the story/component sources.

https://storybook.js.org/docs/api/doc-block-description#writing-descriptions

Shiti · 2024-05-06T18:57:54Z

src/components/messageCanvas/messageCanvas.stories.tsx

  },
 }

 const baseMessage = {


I notice a lot of duplicate code in the stories here, is it possible to clean it up using the constants/variables defined here.

Shiti · 2024-05-06T19:12:22Z

src/components/messageSpace/messageSpace.stories.tsx

+import Copy from '../messageCanvas/actions/copy/copy'
 import MessageSpace from './messageSpace'

 export default {


Adding description here for each field is not required if we use JsDoc Comments. We can also avoid duplicate things if we define an interface for the shared props between MessageSpace and MessageCanvas, for example,

export interface MessageContainerProps { /** Profile icon to be shown before sender's name. */ getProfileComponent?: (message: ThreadableMessage) => ReactNode /** A function that returns a single React element which may be composed of several actions supported for the message, such as editing, copying, and deleting, etc. * In case no actions are applicable or available for a particular message, the function may return `undefined`. * This approach offers flexibility in tailoring message interactions to specific application requirements. * To define individual message actions, developers can extend the `Action` component's functionality. * One such example is the CopyText component. */ getActionsComponent?: (message: ThreadableMessage) => ReactNode | undefined } export interface MessageCanvasProps extends MessageContainerProps { /** Message information to be displayed. Please see the `MessageSpace` docs for more information about the `ThreadableMessage` interface. */ message: ThreadableMessage /** React component to be displayed in the message canvas. */ children: ReactNode }

I will extend MessageContainerProps, but we still need to provide details about ThreadableMessage for messages field

kaseyvee reviewed May 2, 2024

View reviewed changes

docs/chatControlIcons.stories.mdx Outdated Show resolved Hide resolved

kaseyvee approved these changes May 2, 2024

View reviewed changes

lyjeileen force-pushed the message branch from df349ba to a280a04 Compare May 2, 2024 21:08

Shiti reviewed May 3, 2024

View reviewed changes

lyjeileen force-pushed the message branch from 0206e20 to 9ec8607 Compare May 3, 2024 18:48

lyjeileen requested a review from Shiti May 3, 2024 18:51

lyjeileen force-pushed the message branch from 9ec8607 to 0ec93d0 Compare May 3, 2024 18:54

Shiti reviewed May 6, 2024

View reviewed changes

lyjeileen requested review from Shiti and kaseyvee May 6, 2024 18:04

kaseyvee reviewed May 6, 2024

View reviewed changes

lyjeileen added 5 commits May 6, 2024 12:06

feat: add copy function

a232081

test: try fixing the failing test

b846d91

fix: update based on suggestions

0fcb163

fix: update based on suggestions

40501c9

test: update tests for messageCanvas and copy

032a094

lyjeileen force-pushed the message branch from dd6db52 to 032a094 Compare May 6, 2024 19:09

Shiti reviewed May 6, 2024

View reviewed changes

lyjeileen added 2 commits May 6, 2024 13:51

fix: update based on feedback

caaf131

refactor: move types to the component files

7fd364a

lyjeileen requested a review from Shiti May 6, 2024 22:29

Shiti approved these changes May 6, 2024

View reviewed changes

Shiti merged commit c218731 into rustic-ai:main May 6, 2024

	export default function Copy(props: CopyProps) {
	export default function CopyText(props: CopyProps) {

		/** 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

-  /** 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
+    /** A function that returns a single React element which may be composed of several actions supported for the message, such as editing, copying, and deleting, etc.
+   * In case no actions are applicable or available for a particular message, the function may return `undefined`.
+   * This approach offers flexibility in tailoring message interactions to specific application requirements.
+   * To define individual message actions, developers can extend the `Action` component's functionality.
+   * One such example is the CopyText component.
+   */
+  getActionsComponent?: (message: ThreadableMessage) => ReactNode | undefined

Uh oh!

feat: add copy function #118

feat: add copy function #118

Uh oh!

Conversation

lyjeileen commented May 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshots

Video

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kaseyvee May 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lyjeileen May 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lyjeileen commented May 2, 2024 •

edited

Loading

kaseyvee May 6, 2024 •

edited

Loading

lyjeileen May 6, 2024 •

edited

Loading