Added new slots for the spright-chat-message to allow adding action buttons and follow-up prompts #2552

joseahdz · 2025-03-12T15:21:52Z

Pull Request

🤨 Rationale

UX design calls for adding action buttons to chat messages to allow user to edit prompts and provide feedback on AI responses.
Also, messages can have suggested follow-up button prompts and those should be below the action buttons.

👩‍💻 Implementation

Added slots to allow adding buttons to the left and bottom-left side of a message. In the future, we might allow adding buttons to the top-left, top-left and bottom-right. This is the main reason I have decided to call the bottom slot left-bottom.
I also have added a new slot for follow-up prompts which is below the bottom action buttons slot.

🧪 Testing

Since changes are visual only, I added a new interactions from states matrix.

✅ Checklist

I have updated the project documentation to reflect my changes or determined no changes are needed.

The action controls provide "actions" that can be done to the chat-message like copying and thumbs up/down.

Action buttons on outbound messages appear on the left side when hovering over the message row

* main: applying package updates [skip ci] Update to .net 8.0.406 (#2545) Changed Rich Text Viewer markdown property to an attribute (#2542) applying package updates [skip ci] Blazor chat components (#2541)

* main: Created Blazor wrapper for nimble-rich-text-viewer component (#2544)

* main: Add usage guidance about table column mapping performance (#2548) Improve usage guidance for select filter mode (#2549) applying package updates [skip ci] Update npm dependencies update to latest (#2547) Update npm dependencies lock update only (#2546) applying package updates [skip ci]

* main: applying package updates [skip ci] Migrate to `@ni/fast-*` packages (#2550)

change/@ni-spright-components-095116e3-8f7b-478c-8c7f-4d72964c5c4d.json

jattasNI

Mostly looked at the spec and the docs, not the implementation yet

packages/spright-components/src/chat/specs/README.md

packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts

packages/spright-components/src/chat/specs/README.md

packages/storybook/src/spright/chat/message/chat-message.stories.ts

packages/spright-components/src/chat/specs/README.md

packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts

packages/spright-components/src/chat/message/styles.ts

packages/spright-components/src/chat/specs/README.md

packages/storybook/src/spright/chat/message/chat-message.stories.ts

jattasNI · 2025-04-01T15:50:12Z

packages/spright-components/src/chat/message/styles.ts

+        display: none;
+    }
+
+    [part='end'] ::slotted(*) {


There are some changes to make to this styling. We want the element which contains the content to be sized according to the content but right now it's tiny:

And while we may want the slot to provide some initial spacing, that should largely be applied to the container, not set on the buttons that the client provides.

And finally we should check if there are tokens we can use rather than hard coding values like 16px.

I can push some changes to address this if you'd like.

I will greatly appreciate if you make those changes. Thank you.

I'm not sure I'll get to this today but tomorrow morning looks open.

packages/storybook/src/spright/chat/message/chat-message.stories.ts

packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts

jattasNI · 2025-04-01T16:03:23Z

packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts

@@ -119,6 +144,15 @@ export const systemSizing: StoryFn = createStory(html`
    ])}
 `);

+export const messageInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(


It's good that you're adding matrix test coverage for the new slots. But there are a few issues:

it's not necessary to include coverage for states combinations like hover and active. Those states will be covered by existing button tests and we don't need to verify that they still work inside a message slot

we should add coverage for layout and sizing. If there are multiple buttons, what's the default padding between them? If there are more buttons than the width of the message, how do they layout? If there are more buttons than fit in the width of the conversation, how do they layout?

For 2 I think the designers are still deciding but we could add the tests with whatever behavior we get today and then when we adopt the designers' suggestions we'll see a useful diff in the snapshots for the tests.

Are there examples I can look at for those types of tests? If not, I am concern about how much time it will take to write them. I am under a very tight schedule and I need to minimize the amount of time I spend on non-chat Blazor UI changes.

Your existing conversation sizing tests cover some similar cases. You could just add a few more cases to those:

a couple footer action buttons and end buttons on the same message

lots of footer action buttons

wider than the message but narrower than the conversation

wider than the conversation

lots of end buttons

wider than the message but narrower than the conversation

wider than the conversation

Milan and I discussed a couple more ideas. Let me take a stab at this along with the styling changes. I think we want some of this in a new matrix test and some of it in the existing sizing tests.

packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor

packages/spright-components/src/chat/specs/README.md

jattasNI · 2025-04-01T16:32:38Z

packages/spright-components/src/chat/message/index.ts

+ * SprightChatMessage configuration options
+ * @public
+ */
+export type ChatMessageOptions = FoundationElementDefinition & StartEndOptions;


I'm not familiar with the our/FAST's StartEndOptions pattern. It looks like this follows what the tab does by exporting this type and using it from the template. But I was expecting to see the pattern in more other components. @rajsite could you double check that it's being applied correctly?

packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts

packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts

joseahdz added 17 commits February 14, 2025 15:47

Adding action controls slots to spright-chat-message

71b8aa0

The action controls provide "actions" that can be done to the chat-message like copying and thumbs up/down.

Change files

2468b3e

Outbound messages have actions buttons on left side

7ac3e1b

Action buttons on outbound messages appear on the left side when hovering over the message row

Merge branch 'main' into chat-message-slots

afbce76

* main: applying package updates [skip ci] Update to .net 8.0.406 (#2545) Changed Rich Text Viewer markdown property to an attribute (#2542) applying package updates [skip ci] Blazor chat components (#2541)

Supporting slots to left and bottom of message

615e6fe

Reserve space for edit button on the left side

6de7cb5

Merge branch 'main' into chat-message-slots

ce1d2c0

* main: Created Blazor wrapper for nimble-rich-text-viewer component (#2544)

Reverted markdown example string change

d7b638e

Submitting latest changes including spec updates

24a8b91

Merge branch 'main' into chat-message-slots

312a6c3

* main: applying package updates [skip ci] Migrate to `@ni/fast-*` packages (#2550)

Fixed compile error

e070c7e

Some cleanup

35e5958

Added interactive matrix

cd64240

Minor rename

1a145d9

Fixed linting errors

54b3b11

Some small changes

b6efdc4

rajsite reviewed Mar 17, 2025

View reviewed changes

change/@ni-spright-components-095116e3-8f7b-478c-8c7f-4d72964c5c4d.json Show resolved Hide resolved

Merge branch 'main' into chat-message-slots

4780be8

jattasNI reviewed Mar 19, 2025

View reviewed changes

jattasNI reviewed Mar 20, 2025

View reviewed changes

packages/spright-components/src/chat/specs/README.md Show resolved Hide resolved

joseahdz added 5 commits March 24, 2025 10:50

Implemented some feedback

5b45f72

Implemented more feedback

ec5f5eb

Merge branch 'main' into chat-message-slots

c26ebc2

Added toolbar to add action buttons and other feedback

117beae

Removed toolbar

8ccd582

joseahdz marked this pull request as ready for review March 27, 2025 13:38

joseahdz requested review from atmgrifter00, mollykreis and msmithNI as code owners March 27, 2025 13:38

joseahdz added 2 commits March 27, 2025 08:52

Some tests updates

c78a2c2

Merge branch 'main' into chat-message-slots

3a09a8f

jattasNI mentioned this pull request Mar 27, 2025

Toolbar should support content slotted across a shadow root #2571

Open

3 tasks

jattasNI reviewed Mar 27, 2025

View reviewed changes

packages/spright-components/src/chat/specs/README.md Outdated Show resolved Hide resolved

rajsite reviewed Mar 28, 2025

View reviewed changes

packages/storybook/src/spright/chat/message/chat-message.stories.ts Show resolved Hide resolved

joseahdz added 3 commits March 31, 2025 08:18

Merge branch 'main' into chat-message-slots

56f1c01

Implemented feedback

f13073c

Fixed compile errors

6344665

rajsite reviewed Mar 31, 2025

View reviewed changes

packages/storybook/src/spright/chat/message/chat-message.stories.ts Outdated Show resolved Hide resolved

joseahdz added 3 commits March 31, 2025 16:10

More updates

ee81695

Added toggle buttons to conversation story

32568ec

Small updates

5c1f0f5

joseahdz requested review from rajsite and jattasNI April 1, 2025 02:27

Trying to fix lint error

e6b4169

jattasNI reviewed Apr 1, 2025

View reviewed changes

rajsite reviewed Apr 1, 2025

View reviewed changes

packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts Outdated Show resolved Hide resolved

rajsite reviewed Apr 1, 2025

View reviewed changes

packages/storybook/src/spright/chat/conversation/chat-conversation.stories.ts Outdated Show resolved Hide resolved

Feedback

d7850e9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added new slots for the spright-chat-message to allow adding action buttons and follow-up prompts #2552

Added new slots for the spright-chat-message to allow adding action buttons and follow-up prompts #2552

joseahdz commented Mar 12, 2025 •

edited

Loading

jattasNI left a comment

jattasNI Apr 1, 2025

joseahdz Apr 1, 2025 •

edited

Loading

jattasNI Apr 1, 2025

jattasNI Apr 1, 2025

joseahdz Apr 1, 2025

jattasNI Apr 1, 2025

jattasNI Apr 1, 2025

jattasNI Apr 1, 2025

Added new slots for the spright-chat-message to allow adding action buttons and follow-up prompts #2552

Are you sure you want to change the base?

Added new slots for the spright-chat-message to allow adding action buttons and follow-up prompts #2552

Conversation

joseahdz commented Mar 12, 2025 • edited Loading

Pull Request

🤨 Rationale

👩‍💻 Implementation

🧪 Testing

✅ Checklist

jattasNI left a comment

Choose a reason for hiding this comment

jattasNI Apr 1, 2025

Choose a reason for hiding this comment

joseahdz Apr 1, 2025 • edited Loading

Choose a reason for hiding this comment

jattasNI Apr 1, 2025

Choose a reason for hiding this comment

jattasNI Apr 1, 2025

Choose a reason for hiding this comment

joseahdz Apr 1, 2025

Choose a reason for hiding this comment

jattasNI Apr 1, 2025

Choose a reason for hiding this comment

jattasNI Apr 1, 2025

Choose a reason for hiding this comment

jattasNI Apr 1, 2025

Choose a reason for hiding this comment

joseahdz commented Mar 12, 2025 •

edited

Loading

joseahdz Apr 1, 2025 •

edited

Loading