From b0e16f59664488fe0a0dda96ade43f65152d66be Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Tue, 4 Nov 2025 15:59:07 +0200
Subject: [PATCH 1/3] feat(ui): rework the visuals of the redis copilot screens

- style the chat bubbles
- style the popovers
- changed sass styles with styled components

re #RI-7690
---
 .../components/copilot-panel/CopilotPanel.tsx |  5 ++-
 .../expert-chat-header/ExpertChatHeader.tsx   | 24 +++++++------
 .../components/shared/chat-form/ChatForm.tsx  | 30 +++++++++-------
 .../shared/chat-history/ChatHistory.styles.ts | 32 +++++++++++++++++
 .../shared/chat-history/ChatHistory.tsx       | 17 +++++----
 .../shared/chat-history/styles.module.scss    | 36 +++----------------
 .../shared/restart-chat/RestartChat.tsx       | 27 ++++++++------
 .../panels/ai-assistant/components/texts.tsx  | 16 +++++----
 .../WelcomeAiAssistant.tsx                    | 17 +++++----
 9 files changed, 113 insertions(+), 91 deletions(-)
 create mode 100644 redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts

diff --git a/redisinsight/ui/src/components/side-panels/components/copilot-panel/CopilotPanel.tsx b/redisinsight/ui/src/components/side-panels/components/copilot-panel/CopilotPanel.tsx
index 13d52a6a91..891e0587a4 100644
--- a/redisinsight/ui/src/components/side-panels/components/copilot-panel/CopilotPanel.tsx
+++ b/redisinsight/ui/src/components/side-panels/components/copilot-panel/CopilotPanel.tsx
@@ -4,6 +4,7 @@ import styles from 'uiSrc/components/side-panels/styles.module.scss'
 import AiAssistant from 'uiSrc/components/side-panels/panels/ai-assistant'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { OnboardingTour } from 'uiSrc/components'
+import { Text } from 'uiSrc/components/base/text'
 
 export interface Props {
   isFullScreen: boolean
@@ -25,7 +26,9 @@ const CopilotPanel = (props: Props) => {
             fullSize
           >
             <div className={styles.titleWrapper}>
-              <span className={styles.title}>Redis Copilot</span>
+              <Text size="L" color="primary">
+                Redis Copilot
+              </Text>
             </div>
           </OnboardingTour>
         </div>
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx
index 6a934a32c8..54cf16d426 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx
@@ -18,7 +18,7 @@ import {
   setExplorePanelIsPageOpen,
 } from 'uiSrc/slices/panels/sidePanels'
 import { RestartChat } from 'uiSrc/components/side-panels/panels/ai-assistant/components/shared'
-
+import { Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { EmptyButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { EraserIcon, LightBulbIcon } from 'uiSrc/components/base/icons'
@@ -102,18 +102,20 @@ const ExpertChatHeader = (props: Props) => {
             }
           >
             <>
-              <Text>
+              <Text size="m" color="primary">
                 Open relevant tutorials to learn more about search and query.
               </Text>
-              <Spacer size="s" />
-              <PrimaryButton
-                size="s"
-                onClick={handleOpenTutorials}
-                className={styles.openTutorialsBtn}
-                data-testid="ai-expert-open-tutorials"
-              >
-                Open tutorials
-              </PrimaryButton>
+              <Spacer size="l" />
+              <Row justify="end">
+                <PrimaryButton
+                  size="s"
+                  onClick={handleOpenTutorials}
+                  className={styles.openTutorialsBtn}
+                  data-testid="ai-expert-open-tutorials"
+                >
+                  Open tutorials
+                </PrimaryButton>
+              </Row>
             </>
           </RiPopover>
         </RiTooltip>
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx
index 6550ec8602..250d0739bd 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx
@@ -3,6 +3,7 @@ import React, { Ref, useRef, useState } from 'react'
 import cx from 'classnames'
 import { isModifiedEvent } from 'uiSrc/services'
 
+import { Row } from 'uiSrc/components/base/layout/flex'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
@@ -99,12 +100,12 @@ const ChatForm = (props: Props) => {
               <div>
                 {validation.title && (
                   <>
-                    <Title size="XS">{validation.title}</Title>
+                    <Title size="S">{validation.title}</Title>
                     <Spacer size="s" />
                   </>
                 )}
                 {validation.content && (
-                  <Text size="xs">{validation.content}</Text>
+                  <Text size="m">{validation.content}</Text>
                 )}
               </div>
               {validation.icon}
@@ -150,21 +151,24 @@ const ChatForm = (props: Props) => {
           >
             <>
               {agreements}
-              <Spacer size="m" />
-              <PrimaryButton
-                size="s"
-                className={styles.agreementsAccept}
-                onClick={submitMessage}
-                onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
-                type="button"
-                data-testid="ai-accept-agreements"
-              >
-                I accept
-              </PrimaryButton>
+              <Spacer size="l" />
+              <Row justify="end">
+                <PrimaryButton
+                  size="s"
+                  className={styles.agreementsAccept}
+                  onClick={submitMessage}
+                  onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()}
+                  type="button"
+                  data-testid="ai-accept-agreements"
+                >
+                  I accept
+                </PrimaryButton>
+              </Row>
             </>
           </RiPopover>
         </form>
       </RiTooltip>
+      <Spacer size="xs" />
       <Text textAlign="center" size="xs" className={styles.agreementText}>
         Verify the accuracy of any information provided by Redis Copilot before
         using it
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
new file mode 100644
index 0000000000..b3f1eba17c
--- /dev/null
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+import { AiChatMessageType } from 'uiSrc/slices/interfaces/aiAssistant'
+
+export const MessageContainer = styled.div<{
+  messageType: AiChatMessageType
+  hasError: boolean
+}>`
+  overflow-wrap: break-word;
+  padding: 8px 16px;
+  border-radius: 8px;
+  gap: 6px;
+
+  ${({ messageType, theme }) =>
+    messageType === AiChatMessageType.AIMessage &&
+    `
+    background-color: ${theme.components.button.variants.primary.disabled?.bgColor};
+  `}
+
+  ${({ messageType, theme }) =>
+    messageType === AiChatMessageType.HumanMessage &&
+    `
+    background-color: ${theme.components.button.variants['secondary-invert'].normal?.bgColor};
+    color: ${theme.components.button.variants['secondary-invert'].normal?.textColor};
+  `}
+  
+  ${({ hasError }) =>
+    hasError &&
+    `
+    opacity: .66;
+    display: flex;
+  `}
+`
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
index bb6bd2a852..a25ca81780 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
@@ -22,6 +22,7 @@ import MarkdownMessage from '../markdown-message'
 import ErrorMessage from '../error-message'
 
 import styles from './styles.module.scss'
+import { MessageContainer } from './ChatHistory.styles'
 
 export interface Props {
   autoScroll?: boolean
@@ -121,17 +122,15 @@ const ChatHistory = (props: Props) => {
                 messageType === AiChatMessageType.HumanMessage,
             })}
           >
-            <div
-              className={cx('jsx-markdown', {
-                [styles.answer]: messageType === AiChatMessageType.AIMessage,
-                [styles.question]:
-                  messageType === AiChatMessageType.HumanMessage,
-                [styles.error]: !!error,
-              })}
+            <MessageContainer
+              as="div"
+              className="jsx-markdown"
+              messageType={messageType}
+              hasError={!!error}
               data-testid={`ai-message-${messageType}_${id}`}
             >
               {error && (
-                <RiIcon type="ToastDangerIcon" className={styles.errorIcon} />
+                <RiIcon type="ToastDangerIcon" size="M" color="danger500" />
               )}
               {messageType === AiChatMessageType.HumanMessage ? (
                 content
@@ -144,7 +143,7 @@ const ChatHistory = (props: Props) => {
                   {content}
                 </MarkdownMessage>
               )}
-            </div>
+            </MessageContainer>
           </div>
           <ErrorMessage error={error} onRestart={onRestart} />
         </React.Fragment>
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss
index 17f2010555..800472c981 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss
@@ -1,5 +1,5 @@
 $spacing: 6px;
-$delay: .13s;
+$delay: 0.13s;
 
 .wrapper {
   width: 100%;
@@ -10,7 +10,7 @@ $delay: .13s;
       background-color: var(--euiColorEmptyShade) !important;
     }
     pre > code {
-      background-color:  var(--browserTableRowEven) !important;
+      background-color: var(--browserTableRowEven) !important;
     }
   }
 }
@@ -36,44 +36,16 @@ $delay: .13s;
     margin-top: auto;
   }
 }
-.answerWrapper, .questionWrapper {
+.answerWrapper,
+.questionWrapper {
   max-width: 90%;
   margin: 8px 0;
 }
 
-.answer, .question {
-  overflow-wrap: break-word;
-  padding: 8px 16px;
-  border-radius: 8px;
-
-  &.error {
-    opacity: .66;
-    display: flex;
-
-    .errorIcon {
-      width: 12px;
-      height: 12px;
-      color: var(--euiColorDangerText);
-      margin-top: 2px;
-      margin-right: 6px;
-    }
-  }
-}
-
 .answerWrapper {
   align-self: flex-start;
 }
 
-.answer {
-  background-color: var(--euiColorLightestShade);
-}
-
 .questionWrapper {
   align-self: flex-end;
 }
-
-.question {
-  background-color: var(--insightsTriggerBgColor);
-}
-
-
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx
index 650ba61b5a..7a8c97ad90 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx
@@ -6,6 +6,7 @@ import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover } from 'uiSrc/components/base'
+import { Row } from 'uiSrc/components/base/layout/flex'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -41,21 +42,25 @@ const RestartChat = (props: Props) => {
       button={extendedButton}
     >
       <>
-        <Title size="S">Restart session</Title>
+        <Title size="S" color="primary">
+          Restart session
+        </Title>
         <Spacer size="s" />
-        <Text size="xs">
+        <Text size="m" color="primary">
           This will delete the current message history and initiate a new
           session.
         </Text>
-        <Spacer size="s" />
-        <PrimaryButton
-          size="s"
-          onClick={handleConfirm}
-          className={styles.confirmBtn}
-          data-testid="ai-chat-restart-confirm"
-        >
-          Restart
-        </PrimaryButton>
+        <Spacer size="l" />
+        <Row justify="end">
+          <PrimaryButton
+            size="s"
+            onClick={handleConfirm}
+            className={styles.confirmBtn}
+            data-testid="ai-chat-restart-confirm"
+          >
+            Restart
+          </PrimaryButton>
+        </Row>
       </>
     </RiPopover>
   )
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx
index 6f90ecf897..4165c8b9dc 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx
@@ -6,16 +6,16 @@ import { Text } from 'uiSrc/components/base/text'
 
 export const ASSISTANCE_CHAT_AGREEMENTS = (
   <>
-    <Text size="xs">
+    <Text size="m" color="primary">
       Redis Copilot is powered by OpenAI API and is designed for general
       information only.
     </Text>
     <Spacer size="xs" />
-    <Text size="xs">
+    <Text size="m" color="primary">
       Please do not input any personal data or confidential information.
     </Text>
     <Spacer size="xs" />
-    <Text size="xs">
+    <Text size="m" color="primary">
       By accessing and/or using Redis Copilot, you acknowledge that you agree to
       the{' '}
       <Link
@@ -44,18 +44,20 @@ export const ASSISTANCE_CHAT_AGREEMENTS = (
 
 export const EXPERT_CHAT_AGREEMENTS = (
   <>
-    <Text size="xs">Redis Copilot is powered by OpenAI API.</Text>
+    <Text size="m" color="primary">
+      Redis Copilot is powered by OpenAI API.
+    </Text>
     <Spacer size="xs" />
-    <Text size="xs">
+    <Text size="m" color="primary">
       Please do not include any personal data (except as expressly required for
       the use of Redis Copilot) or confidential information.
     </Text>
-    <Text size="xs">
+    <Text size="m" color="primary">
       Redis Copilot needs access to the information in your database to provide
       you context-aware assistance.
     </Text>
     <Spacer size="xs" />
-    <Text size="xs">
+    <Text size="m" color="primary">
       By accepting these terms, you consent to the processing of any information
       included in your database, and you agree to the{' '}
       <Link
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/welcome-ai-assistant/WelcomeAiAssistant.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/welcome-ai-assistant/WelcomeAiAssistant.tsx
index 823d32c4e0..59e88e158b 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/welcome-ai-assistant/WelcomeAiAssistant.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/welcome-ai-assistant/WelcomeAiAssistant.tsx
@@ -35,24 +35,27 @@ const WelcomeAiAssistant = () => {
         <OAuthForm action={OAuthSocialAction.SignIn} onClick={handleSsoClick}>
           {(form: React.ReactNode) => (
             <>
-              <Text style={{ lineHeight: '1.35' }}>
-                Welcome to Redis Copilot.
-              </Text>
+              <Title size="L" variant="semiBold" color="primary">
+                Welcome to Redis Copilot
+              </Title>
               <Spacer size="s" />
-              <Text style={{ lineHeight: '1.35' }}>
+              <Text size="s" color="secondary">
                 Learn about Redis and explore your data, in a conversational
                 manner.
               </Text>
               <Spacer size="s" />
-              <Text style={{ lineHeight: '1.35' }}>
+              <Text size="s" color="secondary">
                 Build faster with Redis Copilot.
               </Text>
-              <Spacer size="xl" />
-              <Title size="S">Sign in to get started.</Title>
+              <Spacer size="xxl" />
+              <Title size="XS" color="secondary">
+                Sign in to get started
+              </Title>
 
               <Spacer size="l" />
               {form}
               <Spacer />
+
               <div className={styles.agreement}>
                 <OAuthAgreement />
               </div>

From 665c6ed9d7d992693fdf025e380ca81336d15f8d Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Tue, 4 Nov 2025 16:37:43 +0200
Subject: [PATCH 2/3] fix(ui): added default styles for the welcome message in
 redis copilot

re #RI-7690
---
 .../shared/chat-history/ChatHistory.styles.ts     |  2 +-
 .../shared/chat-history/ChatHistory.tsx           | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
index b3f1eba17c..425a4b21bd 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
@@ -3,7 +3,7 @@ import { AiChatMessageType } from 'uiSrc/slices/interfaces/aiAssistant'
 
 export const MessageContainer = styled.div<{
   messageType: AiChatMessageType
-  hasError: boolean
+  hasError?: boolean
 }>`
   overflow-wrap: break-word;
   padding: 8px 16px;
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
index a25ca81780..9368c20c2f 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
@@ -165,12 +165,13 @@ const ChatHistory = (props: Props) => {
       <div className={styles.wrapper}>
         <div className={styles.history} data-testid="ai-chat-empty-history">
           <div className={styles.answerWrapper}>
-            <div
-              className={styles.answer}
+            <MessageContainer
+              as="div"
+              messageType={AiChatMessageType.AIMessage}
               data-testid="ai-message-initial-message"
             >
               {initialMessage}
-            </div>
+            </MessageContainer>
           </div>
         </div>
       </div>
@@ -190,9 +191,13 @@ const ChatHistory = (props: Props) => {
         {getMessage(inProgressMessage)}
         {content === '' && (
           <div className={styles.answerWrapper}>
-            <div className={styles.answer} data-testid="ai-loading-answer">
+            <MessageContainer
+              as="div"
+              messageType={AiChatMessageType.AIMessage}
+              data-testid="ai-loading-answer"
+            >
               <LoadingMessage />
-            </div>
+            </MessageContainer>
           </div>
         )}
         <div className={styles.scrollAnchor} ref={scrollDivRef} />

From 6c227120b455b4c8d70ef71b8752d59551eb7d0c Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Wed, 5 Nov 2025 13:32:28 +0200
Subject: [PATCH 3/3] refactor(ui): port chat history sass styles to styled
 components

re #RI-7690
---
 .../shared/chat-history/ChatHistory.styles.ts | 26 +++++++++
 .../shared/chat-history/ChatHistory.tsx       | 54 ++++++++-----------
 .../shared/chat-history/styles.module.scss    | 51 ------------------
 3 files changed, 49 insertions(+), 82 deletions(-)
 delete mode 100644 redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss

diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
index 425a4b21bd..fab50310cd 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.styles.ts
@@ -1,6 +1,32 @@
 import styled from 'styled-components'
 import { AiChatMessageType } from 'uiSrc/slices/interfaces/aiAssistant'
 
+export const HistoryWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`
+
+export const HistoryContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  padding: 8px 12px;
+
+  > :first-child {
+    margin-top: auto;
+  }
+`
+
+export const MessageWrapper = styled.div<{
+  messageType: AiChatMessageType
+}>`
+  max-width: 90%;
+  margin: 8px 0;
+  align-self: ${({ messageType }) =>
+    messageType === AiChatMessageType.AIMessage ? 'flex-start' : 'flex-end'};
+`
+
 export const MessageContainer = styled.div<{
   messageType: AiChatMessageType
   hasError?: boolean
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
index 9368c20c2f..49a95fdebd 100644
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
+++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/ChatHistory.tsx
@@ -5,7 +5,6 @@ import React, {
   useEffect,
   useRef,
 } from 'react'
-import cx from 'classnames'
 
 import { throttle } from 'lodash'
 import {
@@ -21,8 +20,12 @@ import LoadingMessage from '../loading-message'
 import MarkdownMessage from '../markdown-message'
 import ErrorMessage from '../error-message'
 
-import styles from './styles.module.scss'
-import { MessageContainer } from './ChatHistory.styles'
+import {
+  HistoryContainer,
+  HistoryWrapper,
+  MessageContainer,
+  MessageWrapper,
+} from './ChatHistory.styles'
 
 export interface Props {
   autoScroll?: boolean
@@ -114,14 +117,7 @@ const ChatHistory = (props: Props) => {
 
       return (
         <React.Fragment key={id}>
-          <div
-            className={cx({
-              [styles.answerWrapper]:
-                messageType === AiChatMessageType.AIMessage,
-              [styles.questionWrapper]:
-                messageType === AiChatMessageType.HumanMessage,
-            })}
-          >
+          <MessageWrapper as="div" messageType={messageType}>
             <MessageContainer
               as="div"
               className="jsx-markdown"
@@ -144,7 +140,7 @@ const ChatHistory = (props: Props) => {
                 </MarkdownMessage>
               )}
             </MessageContainer>
-          </div>
+          </MessageWrapper>
           <ErrorMessage error={error} onRestart={onRestart} />
         </React.Fragment>
       )
@@ -154,17 +150,17 @@ const ChatHistory = (props: Props) => {
 
   if (isLoading) {
     return (
-      <div className={cx(styles.wrapper, styles.loader)}>
+      <HistoryWrapper>
         <Loader size="xl" data-testid="ai-loading-spinner" />
-      </div>
+      </HistoryWrapper>
     )
   }
 
   if (history.length === 0) {
     return (
-      <div className={styles.wrapper}>
-        <div className={styles.history} data-testid="ai-chat-empty-history">
-          <div className={styles.answerWrapper}>
+      <HistoryWrapper>
+        <HistoryContainer as="div" data-testid="ai-chat-empty-history">
+          <MessageWrapper as="div" messageType={AiChatMessageType.AIMessage}>
             <MessageContainer
               as="div"
               messageType={AiChatMessageType.AIMessage}
@@ -172,25 +168,21 @@ const ChatHistory = (props: Props) => {
             >
               {initialMessage}
             </MessageContainer>
-          </div>
-        </div>
-      </div>
+          </MessageWrapper>
+        </HistoryContainer>
+      </HistoryWrapper>
     )
   }
 
   const { content } = inProgressMessage || {}
 
   return (
-    <div className={styles.wrapper}>
-      <div
-        ref={listRef}
-        className={styles.history}
-        data-testid="ai-chat-history"
-      >
+    <HistoryWrapper>
+      <HistoryContainer as="div" ref={listRef} data-testid="ai-chat-history">
         {history.map(getMessage)}
         {getMessage(inProgressMessage)}
         {content === '' && (
-          <div className={styles.answerWrapper}>
+          <MessageWrapper as="div" messageType={AiChatMessageType.AIMessage}>
             <MessageContainer
               as="div"
               messageType={AiChatMessageType.AIMessage}
@@ -198,11 +190,11 @@ const ChatHistory = (props: Props) => {
             >
               <LoadingMessage />
             </MessageContainer>
-          </div>
+          </MessageWrapper>
         )}
-        <div className={styles.scrollAnchor} ref={scrollDivRef} />
-      </div>
-    </div>
+        <div ref={scrollDivRef} />
+      </HistoryContainer>
+    </HistoryWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss
deleted file mode 100644
index 800472c981..0000000000
--- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/styles.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-$spacing: 6px;
-$delay: 0.13s;
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-
-  :global {
-    code {
-      background-color: var(--euiColorEmptyShade) !important;
-    }
-    pre > code {
-      background-color: var(--browserTableRowEven) !important;
-    }
-  }
-}
-
-.loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.history {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-  @include eui.scrollBar;
-  padding: 8px 12px;
-
-  font-size: 12px;
-
-  > :first-child {
-    margin-top: auto;
-  }
-}
-.answerWrapper,
-.questionWrapper {
-  max-width: 90%;
-  margin: 8px 0;
-}
-
-.answerWrapper {
-  align-self: flex-start;
-}
-
-.questionWrapper {
-  align-self: flex-end;
-}