[Observability AI Assistant] Chat tweaks + keyboard shortcut #176350

CoenWarmer · 2024-02-06T22:31:32Z

Summary

Some small tweaks for the Chat Flyout.

Adds an expand flyout button so the user can toggle the flyout between 'normal' width and 100% width
Adds a 'navigate to conversations app' button in the flyout
Adds a keyboard handler for <control> + <;> (semicolon) to open the assistant.

What it looks like

Screen.Recording.2024-02-06.at.23.25.14.mov

apmmachine · 2024-02-06T22:31:47Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
/oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

klacabane · 2024-02-07T10:20:26Z

Triggered this error when opening conversation app from flyout

conversation_open_error.mov

klacabane · 2024-02-07T10:21:11Z

...k/plugins/observability_ai_assistant/public/components/action_menu_item/action_menu_item.tsx

@@ -30,6 +30,20 @@ export function ObservabilityAIAssistantActionMenuItem() {

  const initialMessages = useMemo(() => [], []);

+  useEffect(() => {
+    const keyboardListener = (event: KeyboardEvent) => {
+      if (event.ctrlKey && event.code === 'Semicolon') {


Is this documented anywhere for users ?

Not yet. Perhaps we can add something instead of the friendly Moose image. @boriskirov ?

What about a tooltip on the AI Assistant button that describes the shortcut?

Similar to what the desktop menus do:

I like it! @boriskirov wdyt?

Yes, good idea!

klacabane · 2024-02-07T10:23:25Z

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx

+                  <EuiButtonIcon
+                    aria-label={i18n.translate(
+                      'xpack.observabilityAiAssistant.chatHeader.euiButtonIcon.navigateToConversationsLabel',
+                      { defaultMessage: 'Navigate to conversations' }


It's not obvious to me what this button does since it only has icon, wonder if we should add a tooltip to it ?

I was about to say the same thing. I intuitively understand 3 out of 4 icons but not the "Navigate to conversations" icon.

I think it's especially important to make it clear what the "Navigate to conversations" icon does because it performs an actual page navigation.

Yes, I considered that, was wondering if it wouldn't make the UI too busy. But yeah, can be added.

sorenlouv · 2024-02-07T13:32:01Z

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx

+  const handleNavigateToConversations = () => {
+    if (conversationId) {
+      router.navigateToConversationsApp('/conversations/{conversationId}', {
+        path: {
+          conversationId,
+        },
+        query: {},
+      });
+    } else {
+      router.navigateToConversationsApp('/conversations/new', { path: {}, query: {} });
+    }
+  };


I'm getting this error when starting a new conversation, then clicking on the conversations icon

Conversation not found Could not find a conversation with id :conversationId. Make sure the conversation exists and you have access to it.

URL is /observabilityAIAssistant/conversations/%7BconversationId%7D

Picking an existing conversation leads, then clicking the icon results in the same error

Addressed with b03cd4d

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx

sorenlouv · 2024-02-07T13:54:23Z

x-pack/plugins/observability_ai_assistant/public/hooks/use_observability_ai_assistant_router.ts

+      navigateToConversationsApp: (path, ...args) => {
+        navigateToApp('observabilityAIAssistant', { path, ...args });
+      },


I suggest keeping the router api simple and using push/replace directly.

Suggested change

navigateToConversationsApp: (path, ...args) => {

navigateToApp('observabilityAIAssistant', { path, ...args });

},

See earlier comment

In order to do so we have to change push and replace to use navigateToApp:

push: (...args) => { const next = link(...args); navigateToApp('observabilityAIAssistant', { path: next, replace: false }); }, replace: (path, ...args) => { const next = link(path, ...args); navigateToApp('observabilityAIAssistant', { path: next, replace: true }); },

But then we would also use the navigateToApp method when it is not needed, like when we are in the conversations app.

But then we would also use the navigateToApp method when it is not needed, like when we are in the conversations app.

Is that an actual problem?

We could also have two pairs of push/replace methods. One pair for navigating within the app (current ones) and the other pair for navigating from another app into the AI Assistant app. But I am not sure if it's actually necessary.

Not sure if it's an actual problem. FWIW, I always found it slightly odd that Kibana has a separate navigate and navigateToApp method. Unsure as to why that is, do you know?

No, I don't either

I've tried using replace from the existing router API:

replace: (path, ...args) => { const next = link(path, ...args); history.replace(next); }, link: (path, ...args) => { return http.basePath.prepend('/app/observabilityAIAssistant' + link(path, ...args)); },

it really does not navigate the user to a different app, even though it uses link with the http.basePath.prepend etc.

It seems we need a dedicated method when navigating from another app into the conversations app.

Implemented b03cd4d

sorenlouv

really nice improvements!

CoenWarmer · 2024-02-07T16:36:07Z

x-pack/plugins/observability_ai_assistant/public/hooks/use_observability_ai_assistant_router.ts

+        const sanitized = routeParam.replace('{', '').replace('}', '');
+
+        const pathKey = args[0]?.path;
+
+        if (typeof pathKey !== 'object') {
+          return;
+        }
+
+        if (Object.keys(pathKey).length === 0) {
+          navigateToApp('observabilityAIAssistant', {
+            path: route,
+          });
+          return;
+        }
+
+        if (Object.keys(pathKey).length === 1) {
+          navigateToApp('observabilityAIAssistant', {
+            // @ts-expect-error
+            path: `${route}/${pathKey[sanitized]}`,
+          });
+          return;
+        }


I really dislike this code, but the combination of this API with the Typescript typing is throwing me for a loop. This works but is not ideal. Better suggestions welcome.

Did you try this?

push: (...args) => { const next = link(...args); navigateToApp('observabilityAIAssistant', { path: next, replace: false }); },

CoenWarmer · 2024-02-07T16:38:34Z

Triggered this error when opening conversation app from flyout

conversation_open_error.mov

Addressed with b03cd4d

CoenWarmer · 2024-02-07T20:51:56Z

@elasticmachine merge upstream

kibana-ci · 2024-02-07T22:13:40Z

💚 Build Succeeded

Buildkite Build
Commit: dbfa12c

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`observabilityAIAssistant`	165.4KB	168.6KB	+3.2KB

History

💔 Build #192008 failed b03cd4d
💔 Build #191757 failed 9f9971e

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

klacabane

Nice change!

…#176350)

CoenWarmer added 2 commits February 6, 2024 22:01

Add expand flyout and navigate to conversation buttons to header

5fe40b0

Add keyboard handler to open assistant

9f9971e

CoenWarmer requested a review from a team as a code owner February 6, 2024 22:31

CoenWarmer added the release_note:skip Skip the PR/issue when compiling release notes label Feb 6, 2024

klacabane reviewed Feb 7, 2024

View reviewed changes

sorenlouv reviewed Feb 7, 2024

View reviewed changes

x-pack/plugins/observability_ai_assistant/public/components/chat/chat_header.tsx Show resolved Hide resolved

sorenlouv reviewed Feb 7, 2024

View reviewed changes

CoenWarmer added the v8.13.0 label Feb 7, 2024

sorenlouv reviewed Feb 7, 2024

View reviewed changes

CoenWarmer added 2 commits February 7, 2024 16:21

Add popovers for icon buttons

c94635b

Fix bug with navigating from other app to conversations app

b03cd4d

CoenWarmer requested review from sorenlouv and klacabane February 7, 2024 16:34

CoenWarmer commented Feb 7, 2024

View reviewed changes

Merge branch 'main' into feat/chat-tweak

dbfa12c

klacabane approved these changes Feb 8, 2024

View reviewed changes

CoenWarmer merged commit 52f35fc into elastic:main Feb 8, 2024
16 checks passed

kibanamachine added the backport:skip This commit does not require backporting label Feb 8, 2024

sorenlouv mentioned this pull request Feb 9, 2024

[Obs AI Assistant] Simplify routing #176569

Merged

CoenWarmer added a commit to CoenWarmer/kibana that referenced this pull request Feb 15, 2024

[Observability AI Assistant] Chat tweaks + keyboard shortcut (elastic…

0edadcb

…#176350)

fkanout pushed a commit to fkanout/kibana that referenced this pull request Mar 4, 2024

[Observability AI Assistant] Chat tweaks + keyboard shortcut (elastic…

0b6b94b

…#176350)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Observability AI Assistant] Chat tweaks + keyboard shortcut #176350

[Observability AI Assistant] Chat tweaks + keyboard shortcut #176350

CoenWarmer commented Feb 6, 2024 •

edited

Loading

apmmachine commented Feb 6, 2024

klacabane commented Feb 7, 2024

klacabane Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv Feb 7, 2024 •

edited

Loading

CoenWarmer Feb 7, 2024

boriskirov Feb 12, 2024

klacabane Feb 7, 2024 •

edited

Loading

sorenlouv Feb 7, 2024

CoenWarmer Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv Feb 7, 2024

sorenlouv Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv Feb 7, 2024

sorenlouv Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv Feb 7, 2024

CoenWarmer Feb 7, 2024

CoenWarmer Feb 7, 2024

sorenlouv left a comment

CoenWarmer Feb 7, 2024 •

edited

Loading

sorenlouv Feb 8, 2024

CoenWarmer commented Feb 7, 2024

CoenWarmer commented Feb 7, 2024

kibana-ci commented Feb 7, 2024

klacabane left a comment

	navigateToConversationsApp: (path, ...args) => {
	navigateToApp('observabilityAIAssistant', { path, ...args });
	},

[Observability AI Assistant] Chat tweaks + keyboard shortcut #176350

[Observability AI Assistant] Chat tweaks + keyboard shortcut #176350

Conversation

CoenWarmer commented Feb 6, 2024 • edited Loading

Summary

What it looks like

apmmachine commented Feb 6, 2024

🤖 GitHub comments

klacabane commented Feb 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sorenlouv Feb 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

klacabane Feb 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sorenlouv left a comment

Choose a reason for hiding this comment

CoenWarmer Feb 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CoenWarmer commented Feb 7, 2024

CoenWarmer commented Feb 7, 2024

kibana-ci commented Feb 7, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

History

klacabane left a comment

Choose a reason for hiding this comment

CoenWarmer commented Feb 6, 2024 •

edited

Loading

sorenlouv Feb 7, 2024 •

edited

Loading

klacabane Feb 7, 2024 •

edited

Loading

CoenWarmer Feb 7, 2024 •

edited

Loading