From cd02fbd70a51b4b3da3004c7124d3f87413e3412 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 18 Dec 2023 15:12:16 +0100
Subject: [PATCH] [Obs ai assistant] Uses eui scrollbar styles (#173516)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Elegance is everything. 💅

This PR uses the eui scrollbar styles to align the scrollbar with the
rest of kibana. Right now the scrollbars look differently in some
machines.

One example:
![image
(24)](https://github.com/elastic/kibana/assets/17003240/cb5bf061-b82f-4d37-a40c-a42f27d71fb0)

But now with this PR we have the same scrollbars as in other places (for
example check the kibana sidebar scrollbar):

<img width="2016" alt="image"
src="https://github.com/elastic/kibana/assets/17003240/c7cb2a8f-b369-43f2-8bc2-9fe04e35feff">
---
 .../public/components/chat/chat_body.tsx                 | 9 +++++++--
 .../public/components/chat/conversation_list.tsx         | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
index 60aa56c15dda8..c38d328a87bcb 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/chat_body.tsx
@@ -14,6 +14,8 @@ import {
   EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
+  useEuiTheme,
+  euiScrollBarStyles,
 } from '@elastic/eui';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
 import { euiThemeVars } from '@kbn/ui-theme';
@@ -40,8 +42,9 @@ const fullHeightClassName = css`
   height: 100%;
 `;
 
-const timelineClassName = css`
+const timelineClassName = (scrollBarStyles: string) => css`
   overflow-y: auto;
+  ${scrollBarStyles}
 `;
 
 const promptEditorClassname = css`
@@ -104,6 +107,8 @@ export function ChatBody({
 }) {
   const license = useLicense();
   const hasCorrectLicense = license?.hasAtLeast('enterprise');
+  const euiTheme = useEuiTheme();
+  const scrollBarStyles = euiScrollBarStyles(euiTheme);
 
   const chatService = useObservabilityAIAssistantChatService();
 
@@ -217,7 +222,7 @@ export function ChatBody({
   } else {
     footer = (
       <>
-        <EuiFlexItem grow className={timelineClassName}>
+        <EuiFlexItem grow className={timelineClassName(scrollBarStyles)}>
           <div ref={timelineContainerRef} className={fullHeightClassName}>
             <EuiPanel
               grow
diff --git a/x-pack/plugins/observability_ai_assistant/public/components/chat/conversation_list.tsx b/x-pack/plugins/observability_ai_assistant/public/components/chat/conversation_list.tsx
index 1551c744d4561..932170c060c61 100644
--- a/x-pack/plugins/observability_ai_assistant/public/components/chat/conversation_list.tsx
+++ b/x-pack/plugins/observability_ai_assistant/public/components/chat/conversation_list.tsx
@@ -16,6 +16,8 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  useEuiTheme,
+  euiScrollBarStyles,
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
@@ -33,8 +35,9 @@ const panelClassName = css`
   max-height: 100%;
 `;
 
-const overflowScrollClassName = css`
+const overflowScrollClassName = (scrollBarStyles: string) => css`
   overflow-y: auto;
+  ${scrollBarStyles}
 `;
 
 const newChatButtonWrapperClassName = css`
@@ -56,10 +59,12 @@ export function ConversationList({
   onClickNewChat: () => void;
   onClickDeleteConversation: (id: string) => void;
 }) {
+  const euiTheme = useEuiTheme();
+  const scrollBarStyles = euiScrollBarStyles(euiTheme);
   return (
     <EuiPanel paddingSize="s" hasShadow={false} className={panelClassName}>
       <EuiFlexGroup direction="column" gutterSize="none" className={containerClassName}>
-        <EuiFlexItem grow className={overflowScrollClassName}>
+        <EuiFlexItem grow className={overflowScrollClassName(scrollBarStyles)}>
           <EuiFlexGroup direction="column" gutterSize="xs">
             <EuiFlexItem grow={false}>
               <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s">