From 70f78ce0662a04914ed6be41e454e78b6c76a6df Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Wed, 26 Nov 2025 15:22:46 +0200
Subject: [PATCH] refactor(ui): migrate CopilotTrigger from SCSS modules to
 styled-components

Migrated CopilotTrigger component from SCSS modules to styled-components
following the project's migration guidelines. Replaced styles.module.scss
with CopilotTrigger.styles.ts using FlexGroup and IconButton styled components.
Removed classnames dependency and improved type safety.

References: #RI-7774
---
 .../copilot-trigger/CopilotTrigger.styles.ts  | 29 ++++++++++++++
 .../copilot-trigger/CopilotTrigger.tsx        | 22 +++++------
 .../copilot-trigger/styles.module.scss        | 38 -------------------
 3 files changed, 38 insertions(+), 51 deletions(-)
 create mode 100644 redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts
 delete mode 100644 redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss

diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts
new file mode 100644
index 0000000000..11994de524
--- /dev/null
+++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts
@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components'
+
+import { FlexGroup } from 'uiSrc/components/base/layout/flex'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton'
+
+export const CopilotWrapper = styled(FlexGroup)`
+  user-select: none;
+`
+
+export const CopilotIconButton = styled(IconButton)<
+  { isOpen: boolean } & IconButtonProps
+>`
+  padding: ${({ theme }) => theme.core.space.space200};
+
+  // TODO: Remove this once size property is enabled for IconButton
+  svg {
+    width: 21px;
+    height: 21px;
+    color: var(--triggerIconActiveColor);
+  }
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      background-color: ${({ theme }) =>
+        theme.semantic.color.background.primary200};
+    `}
+`
diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx
index 566bee3bd0..fec74accf7 100644
--- a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx
+++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx
@@ -1,6 +1,4 @@
 import React from 'react'
-import cx from 'classnames'
-
 import { useDispatch, useSelector } from 'react-redux'
 import {
   sidePanelsSelector,
@@ -10,34 +8,32 @@ import {
 import { RiTooltip } from 'uiSrc/components'
 import { CopilotIcon } from 'uiSrc/components/base/icons'
 import { SidePanels } from 'uiSrc/slices/interfaces/insights'
-import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
-import styles from './styles.module.scss'
+import { CopilotWrapper, CopilotIconButton } from './CopilotTrigger.styles'
 
 const CopilotTrigger = () => {
   const { openedPanel } = useSelector(sidePanelsSelector)
-
   const dispatch = useDispatch()
 
   const handleClickTrigger = () => {
     dispatch(toggleSidePanel(SidePanels.AiAssistant))
   }
 
+  const isCopilotOpen = openedPanel === SidePanels.AiAssistant
+
   return (
-    <div
-      className={cx(styles.container, {
-        [styles.isOpen]: openedPanel === SidePanels.AiAssistant,
-      })}
-    >
+    <CopilotWrapper align="center" justify="end">
       <RiTooltip content="Redis Copilot">
-        <EmptyButton
-          className={styles.btn}
+        <CopilotIconButton
+          size="S"
           role="button"
           icon={CopilotIcon}
           onClick={handleClickTrigger}
           data-testid="copilot-trigger"
+          isOpen={isCopilotOpen}
+          aria-label="Copilot-trigger"
         />
       </RiTooltip>
-    </div>
+    </CopilotWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss b/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss
deleted file mode 100644
index e3f7ba2bf1..0000000000
--- a/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  user-select: none;
-
-  &.isOpen {
-    .btn {
-      outline: 0 !important;
-      border-color: var(--euiColorPrimary) !important;
-      background-color: var(--insightsTriggerBgColor) !important;
-      border-radius: 4px;
-    }
-  }
-
-  .btn {
-    display: flex;
-    align-items: center;
-    color: var(--recommendationColor);
-    background: transparent !important;
-    border-color: transparent !important;
-    position: relative;
-    height: 36px !important;
-    width: 36px !important;
-    min-width: 36px !important;
-    box-shadow: none !important;
-
-    :global(.euiButton__text) {
-      display: none;
-    }
-
-    svg {
-      width: 21px;
-      height: 21px;
-      color: var(--triggerIconActiveColor) !important;
-    }
-  }
-}