[Obs AI Assistant] Show Conversations list in flyout #175226

miltonhultgren · 2024-01-22T16:23:07Z

Summary

Changes the ChatFlyout to use EuiResizeablePanel to split the flyout content in two.
On the left we show the Conversations list and this panel can be collapsed to free up space.
On the right we show the ChatBody like before.

Screenshots

Default:

Conversation list made larger:

Conversation list collapsed:

Conversations link moved to three-dot menu:

…rsations-in-flyout

apmmachine · 2024-01-22T16:23:25Z

🤖 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!)

miltonhultgren · 2024-01-22T16:23:38Z

x-pack/plugins/observability_ai_assistant/public/routes/conversations/conversation_view.tsx

-                      hasOtherConversations
-                        ? conversations.value!.conversations[0].conversation.id
-                        : undefined
+                      hasOtherConversations ? hasOtherConversations.conversation.id : undefined


If you deleted the first conversation in the list, you'd get a "conversation not found" error.

miltonhultgren · 2024-01-22T16:24:20Z

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

@@ -161,13 +163,13 @@ export function ChatBody({
    }
  };

-  const handleChangeHeight = (editorHeight: number) => {
+  const handleChangeHeight = useCallback((editorHeight: number) => {


This caused the render to loop which made focus be put onto the PromptEditor over and over.

miltonhultgren · 2024-01-22T16:25:27Z

x-pack/plugins/observability_ai_assistant/public/components/prompt_editor/prompt_editor.tsx

@@ -142,6 +142,8 @@ export function PromptEditor({
  useEffect(() => {
    if (hidden) {
      onChangeHeight(0);
+    } else if (containerRef.current) {
+      onChangeHeight(containerRef.current.clientHeight);


Because I memoized the callback being passed in, this wasn't being called as often due to less renders so had to make sure it's called at least when this flag switches.

The ResizeablePanel causes more renders to happen which caused the focus bug due to missing memoization

…rsations-in-flyout

CoenWarmer · 2024-01-25T12:10:59Z

Did a local checkout and have the following feedback:

On smaller viewports (1600px wide) the conversation list looks squashed. Two suggestions: add a minimum absolute width for the conversation list, and give the complete flyout a larger width when the conversation list is expanded
The padding on the conversation list needs to be a bit smaller so it's in line with the padding on the chat panel
The conversation list needs a dividing border between it and the chat
The title bar + actions button can be moved up now that the link to 'go to conversations' has been removed. This will reclaim more vertical space for the chat.
In the action menu, I would place the link to the conversation view up, so it's closer to all the other links which navigate the user to a different part of kibana.

…rsations-in-flyout

miltonhultgren · 2024-01-29T13:20:20Z

On smaller viewports (1600px wide) the conversation list looks squashed. Two suggestions: add a minimum absolute width for the conversation list, and give the complete flyout a larger width when the conversation list is expanded
The padding on the conversation list needs to be a bit smaller so it's in line with the padding on the chat panel
The conversation list needs a dividing border between it and the chat
The title bar + actions button can be moved up now that the link to 'go to conversations' has been removed. This will reclaim more vertical space for the chat.
In the action menu, I would place the link to the conversation view up, so it's closer to all the other links which navigate the user to a different part of kibana.

It wasn't straightforward to make the conversations list maintain a minimum width due to how the ResizeablePanels work, and the size changing wasn't smooth. We'll need to follow up with better solutions in this area (in collaboration with Design and the EUI team).

…rsations-in-flyout

kibana-ci · 2024-01-30T13:46:08Z

💚 Build Succeeded

Buildkite Build
Commit: a638516

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`	150.2KB	151.7KB	+1.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`observabilityAIAssistant`	14.5KB	14.5KB	+14.0B

Unknown metric groups

async chunk count

id	before	after	diff
`observabilityAIAssistant`	6	7	+1

History

💛 Build #190128 was flaky 4a90536
💔 Build #190112 failed 5224549
💔 Build #189870 failed 883687d
💛 Build #189226 was flaky ee7102c
💚 Build #188606 succeeded 2a3c089
💔 Build #188553 failed 9dc3b67

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

miltonhultgren · 2024-03-07T09:18:58Z

As far as I know, the work attempted in this PR was included in #174677

miltonhultgren added 2 commits January 22, 2024 17:16

[Obs AI Assistant] Show Conversations list in flyout

7ac5802

Merge branch 'main' of github.com:elastic/kibana into oaia-show-conve…

9dc3b67

…rsations-in-flyout

miltonhultgren added the release_note:skip Skip the PR/issue when compiling release notes label Jan 22, 2024

miltonhultgren requested a review from a team as a code owner January 22, 2024 16:23

miltonhultgren commented Jan 22, 2024

View reviewed changes

miltonhultgren changed the title ~~Oaia show conversations in flyout~~ [Obs AI Assistant] Show Conversations list in flyout Jan 22, 2024

miltonhultgren added 3 commits January 22, 2024 20:26

Fix translations

cdc372a

Merge branch 'main' of github.com:elastic/kibana into oaia-show-conve…

2a3c089

…rsations-in-flyout

Merge branch 'main' of github.com:elastic/kibana into oaia-show-conve…

ee7102c

…rsations-in-flyout

miltonhultgren added 2 commits January 29, 2024 14:09

Reclaim vertical space, re-arrange links, align padding, add border

27aa3ac

Merge branch 'main' of github.com:elastic/kibana into oaia-show-conve…

883687d

…rsations-in-flyout

miltonhultgren added 5 commits January 30, 2024 10:38

Merge branch 'main' into oaia-show-conversations-in-flyout

5224549

Merge branch 'main' of github.com:elastic/kibana into oaia-show-conve…

0176820

…rsations-in-flyout

Remove unused state

117dae7

Re-align icon and label in popover menu on smaller screens

4a90536

Merge branch 'main' into oaia-show-conversations-in-flyout

a638516

miltonhultgren closed this Mar 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Obs AI Assistant] Show Conversations list in flyout #175226

[Obs AI Assistant] Show Conversations list in flyout #175226

miltonhultgren commented Jan 22, 2024

apmmachine commented Jan 22, 2024

miltonhultgren Jan 22, 2024

miltonhultgren Jan 22, 2024

miltonhultgren Jan 22, 2024

CoenWarmer commented Jan 25, 2024

miltonhultgren commented Jan 29, 2024 •

edited

Loading

kibana-ci commented Jan 30, 2024

async chunk count

miltonhultgren commented Mar 7, 2024

[Obs AI Assistant] Show Conversations list in flyout #175226

[Obs AI Assistant] Show Conversations list in flyout #175226

Conversation

miltonhultgren commented Jan 22, 2024

Summary

Screenshots

apmmachine commented Jan 22, 2024

🤖 GitHub comments

miltonhultgren Jan 22, 2024

Choose a reason for hiding this comment

miltonhultgren Jan 22, 2024

Choose a reason for hiding this comment

miltonhultgren Jan 22, 2024

Choose a reason for hiding this comment

CoenWarmer commented Jan 25, 2024

miltonhultgren commented Jan 29, 2024 • edited Loading

kibana-ci commented Jan 30, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

async chunk count

History

miltonhultgren commented Mar 7, 2024

miltonhultgren commented Jan 29, 2024 •

edited

Loading