Add slot for toolbar #2857

codrutaserban · 2026-02-06T12:10:51Z

Pull Request

🤨 Rationale

Task 3739126: Add slot for toolbar in spright conversation

Add toolbar slot in conversation.

👩‍💻 Implementation

Similar to input slot.

🧪 Testing

Manual testing and added test.

✅ Checklist

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

…n/toolbar-in-conversation

packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html

…n/toolbar-in-conversation

mollykreis · 2026-02-10T17:22:08Z

packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html

            <spright-chat-conversation>
+                <nimble-toolbar slot="toolbar" > 
+                        <nimble-icon-messages-sparkle slot="start"></nimble-icon-messages-sparkle>
+                        <span class="toolbar-title" i18n>AI Assistant</span>


This app isn't localized, so there isn't a reason to use i18n tags.

Suggested change

<span class="toolbar-title" i18n>AI Assistant</span>

<span class="toolbar-title">AI Assistant</span>

mollykreis · 2026-02-10T17:22:39Z

packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html

+                        <nimble-icon-messages-sparkle slot="start"></nimble-icon-messages-sparkle>
+                        <span class="toolbar-title" i18n>AI Assistant</span>
+                        <nimble-button appearance="ghost" content-hidden
+                                i18n-title title="Create new chat" slot="end">


Suggested change

i18n-title title="Create new chat" slot="end">

title="Create new chat" slot="end">

mollykreis · 2026-02-10T17:32:21Z

packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts

+    it('should have a toolbar slot element in the shadow DOM', async () => {
+        await connect();
+        const toolbarSlot = element.shadowRoot?.querySelector('slot[name="toolbar"]');
+        expect(toolbarSlot).not.toBeNull();
+    });


It seems like there are some missing tests here. Particularly, I think there should be some tests around the hidden styling and how it updates when the toolbar does (or does not) have elements.

@mollykreis for the input slot we're relying on the conversation's matrix tests to cover that behavior by including a state with the slot empty and a state with it populated. Same for the dialog footer being empty, which follows a similar pattern (see #2579 for discussion of the pattern). Since we have a similar matrix test for the toolbar slot, I'd advocate that it's ok to skip a unit test here too. Thoughts?

mollykreis · 2026-02-10T17:44:38Z

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


+#### Toolbar example
+
+```html


A few minor pieces of feedback on this html snippet:

It should be written in a framework-agnostic way (i.e. don't use i18n tags)

Everything within the nimble-toolbar element looks too far indented

It isn't clear if the "Create new chat" button is supposed to be an example of a text+icon button or an icon-only button. Either way, it isn't quite right:

the nimble-icon-pencil-to-rectangle button should be in the "start" slot

the button should have text content (i.e. "Create new chat")

if it is intended to be an icon-only button, it should be marked as content-hidden

mollykreis · 2026-02-10T17:49:51Z

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

+                            <${iconMessagesSparkleTag} slot="start"></${iconMessagesSparkleTag}>
+                            <${buttonTag} appearance="ghost" slot="end" title="Create new chat" content-hidden>
+                                Create new chat
+                                <${iconPencilToRectangleTag} slot="start"></${iconPencilToRectangleTag}>
+                            </${buttonTag}>


nit: The content within the toolbar looks like it's indented one extra level.

jattasNI · 2026-02-10T23:23:57Z

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

        },
+        toolbar: {
+            description:
+                'A slot to optionally include toolbar content which will be displayed on top of the conversation.',


nit: it'd be good to make it clear that you slot the entire toolbar, not the content of the toolbar

Suggested change

'A slot to optionally include toolbar content which will be displayed on top of the conversation.',

'A slot to optionally include a \`${toolbarTag}\` which will be displayed on top of the conversation.',

jattasNI · 2026-02-10T23:25:30Z

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

        </style>
        <${chatConversationTag} ${ref('conversationRef')} appearance="${x => x.appearance}">
+            ${when(x => x.toolbar, html<ChatConversationArgs>`
+                <${toolbarTag} slot='toolbar' class='toolbar'>


I'm not seeing anything that requires the class to be present so let's remove it for simplicity. (Let me know if I missed a reason it needs to be there)

Suggested change

<${toolbarTag} slot='toolbar' class='toolbar'>

<${toolbarTag} slot='toolbar'>

jattasNI · 2026-02-10T23:29:23Z

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

 `);

+const conversationWithToolbar = (
+    [heightLabel, height]: HeightStates,


In the rendered matrix story the state called "conversation is shorter than the height of the messages" isn't actually true: because we removed the input control the conversation doesn't show a scrollbar.

Could you adjust the height or the conversation contents to make it true? The goal is for the story to show a scrollbar so that we can verify the right part of the conversation is scrollable. It looks like the behavior is correct (just the messages part scrolls, not the toolbar or input) but we want the test to show that.

jattasNI · 2026-02-10T23:31:49Z

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


 1. Lays out messages vertically based on their order.
 1. Displays a vertical scrollbar if there are more messages than fit in the height allocated to the conversation.
+1. Includes a slot to place toolbar content (such as buttons or menu buttons) on top of the conversation.


Similar feedback as I left on the story: we should make it clear that the client provides the toolbar and the content, not just the content.

Suggested change

1. Includes a slot to place toolbar content (such as buttons or menu buttons) on top of the conversation.

1. Includes a slot to place a toolbar (and its content such as buttons or menu buttons) on top of the conversation.

jattasNI · 2026-02-10T23:33:13Z

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

    - chat messages are added to the default slot. The DOM order of the messages controls their screen order within the conversation (earlier DOM order => earlier message => top of the conversation)
-    - a single chat input can optionally be added to the `input` slot. It will be placed below the messages.
+    - a single chat input can optionally be added to the `input` slot. It will be placed below the messages
+    - optional slot for toolbar content (such as buttons or menu buttons) that will be displayed above the messages. This can be used for actions like starting a new conversation, copying all messages, or other conversation-level operations.


Suggested change

- optional slot for toolbar content (such as buttons or menu buttons) that will be displayed above the messages. This can be used for actions like starting a new conversation, copying all messages, or other conversation-level operations.

- a toolbar can optionally be added to the `toolbar` slot. The toolbar will be displayed above the messages. The toolbar content can be buttons or menus used for actions like starting a new conversation, copying all messages, or other conversation-level operations.

jattasNI · 2026-02-10T23:41:46Z

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


+    .toolbar {
+        display: flex;
+        flex-direction: column;


I think we could delete flex-direction: column, but I want to check that I'm understanding its purpose.

This flex-direction controls how children of the .toolbar div will be laid out, correct? And we typically expect only one direct child: a single nimble-toolbar? So for our known use cases we could probably leave this unset (it defaults to row) with no impact. If a user added multiple toolbars then maybe it would be best to lay them out in a column rather than a row, but I don't see that as a supported use case so I'd vote to delete it for simplicity.

If I misunderstood the layout then please explain what this is achieving!

jattasNI · 2026-02-10T23:54:00Z

packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts

+    it('should have a toolbar slot element in the shadow DOM', async () => {
+        await connect();
+        const toolbarSlot = element.shadowRoot?.querySelector('slot[name="toolbar"]');
+        expect(toolbarSlot).not.toBeNull();
+    });


@mollykreis for the input slot we're relying on the conversation's matrix tests to cover that behavior by including a state with the slot empty and a state with it populated. Same for the dialog footer being empty, which follows a similar pattern (see #2579 for discussion of the pattern). Since we have a similar matrix test for the toolbar slot, I'd advocate that it's ok to skip a unit test here too. Thoughts?

jattasNI · 2026-02-10T23:56:28Z

change/@ni-spright-components-3fe4bded-5bf1-497e-a816-187849d38bd4.json

+  "type": "minor",
+  "comment": "Add slot for toolbar in conversation component",
+  "packageName": "@ni/spright-components",
+  "email": "codruta.serban@ni.com",


Reminder that you can configure GitHub to hide your NI email if you want. See the instructions in CONTRIBUTING for more info. Once you do this you'll either have to delete and regenerate the change file or manually copy the secret GitHub email into this changefile.

codrutaserban added 7 commits February 6, 2026 14:10

Add slot for toolbar

5e4f017

Add test and fix lint

6782ce7

Fix lint

cff8eb8

Merge branch 'main' of https://github.com/ni/nimble into users/cserba…

cb93898

…n/toolbar-in-conversation

Handle nullable element

8de7fc0

Change files

43f7b91

Fix example

20386af

OliverCosma reviewed Feb 10, 2026

View reviewed changes

packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html Outdated Show resolved Hide resolved

codrutaserban added 4 commits February 10, 2026 12:29

Update storybook and readme

e940386

Update storybook

51c77bc

Use content-hidden for buttons

0dcf5ce

Updated buttons in storybook

a6af576

OliverCosma approved these changes Feb 10, 2026

View reviewed changes

Merge branch 'main' of https://github.com/ni/nimble into users/cserba…

4822dc5

…n/toolbar-in-conversation

codrutaserban marked this pull request as ready for review February 10, 2026 15:24

codrutaserban requested review from jattasNI, mollykreis and rajsite as code owners February 10, 2026 15:24

mollykreis reviewed Feb 10, 2026

View reviewed changes

jattasNI reviewed Feb 10, 2026

View reviewed changes

	<span class="toolbar-title" i18n>AI Assistant</span>
	<span class="toolbar-title">AI Assistant</span>

	i18n-title title="Create new chat" slot="end">
	title="Create new chat" slot="end">

	'A slot to optionally include toolbar content which will be displayed on top of the conversation.',
	'A slot to optionally include a \`${toolbarTag}\` which will be displayed on top of the conversation.',

	<${toolbarTag} slot='toolbar' class='toolbar'>
	<${toolbarTag} slot='toolbar'>

	1. Includes a slot to place toolbar content (such as buttons or menu buttons) on top of the conversation.
	1. Includes a slot to place a toolbar (and its content such as buttons or menu buttons) on top of the conversation.

	- optional slot for toolbar content (such as buttons or menu buttons) that will be displayed above the messages. This can be used for actions like starting a new conversation, copying all messages, or other conversation-level operations.
	- a toolbar can optionally be added to the `toolbar` slot. The toolbar will be displayed above the messages. The toolbar content can be buttons or menus used for actions like starting a new conversation, copying all messages, or other conversation-level operations.


		#### Toolbar example

		```html

Add slot for toolbar #2857

Are you sure you want to change the base?

Add slot for toolbar #2857

Uh oh!

Conversation

codrutaserban commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request

🤨 Rationale

👩‍💻 Implementation

🧪 Testing

✅ Checklist

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!

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codrutaserban commented Feb 6, 2026 •

edited

Loading