From faa68784af127d32995c83b56ee4096a2e54dada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Valderrama?= <mavalroot@gmail.com>
Date: Wed, 21 May 2025 14:17:48 +0200
Subject: [PATCH] :lipstick: Add styles for external widgets on workspace
 (#6509)

* :lipstick: Add styles for Inkeep Chat at workspace

* :paperclip: Styles review
---
 .../src/app/main/ui/workspace/palette.cljs    |  1 +
 .../src/app/main/ui/workspace/palette.scss    | 34 +++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index ff13a57b13..f4c3afec5e 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -147,6 +147,7 @@
         (swap! state* assoc :width width)))
 
     [:div {:class (stl/css :palette-wrapper)
+           :id "palette-wrapper"
            :style  (calculate-palette-padding rulers?)
            :data-testid "palette"}
      (when-not workspace-read-only?
diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss
index 9474a79090..c4896a1c19 100644
--- a/frontend/src/app/main/ui/workspace/palette.scss
+++ b/frontend/src/app/main/ui/workspace/palette.scss
@@ -4,6 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@use "../ds/spacing.scss" as *;
+@use "../ds/z-index.scss" as *;
+@use "../ds/_sizes.scss" as *;
+
 @import "refactor/common-refactor.scss";
 
 .palette-wrapper {
@@ -12,6 +16,12 @@
   left: 0;
   bottom: 0;
   padding-bottom: $s-4;
+
+  /** Aligns AI Chat button **/
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-s);
 }
 
 .palettes {
@@ -164,3 +174,27 @@
     padding-bottom: $s-8;
   }
 }
+
+/** AI Chat button styles **/
+.help-btn {
+  z-index: var(--z-index-panels);
+  flex-shrink: 0;
+  @extend .button-secondary;
+  inline-size: $sz-40;
+  block-size: $sz-40;
+  border-radius: $br-circle;
+  border: none;
+  &.selected {
+    @extend .button-icon-selected;
+  }
+  &:hover {
+    border: none;
+  }
+}
+
+.icon-help {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+  inline-size: var(--sp-xxl);
+  block-size: var(--sp-xxl);
+}