feat(ask-ai): integrate kapa-ai page [BE-11409] (#214)

app/react/components/PageHeader/AskAILink.tsx

@@ -0,0 +1,29 @@
+import { BotMessageSquare } from 'lucide-react';
+import clsx from 'clsx';
+
+import headerStyles from './HeaderTitle.module.css';
+
+const docsUrl = 'https://www.portainer.io/ask-the-ai';
+
+export function AskAILink() {
+  return (
+    <div className={headerStyles.menuButton}>
+      <a
+        href={docsUrl}
+        target="_blank"
+        color="none"
+        className={clsx(
+          headerStyles.menuIcon,
+          'icon-badge mr-1 !p-2 text-lg cursor-pointer',
+          'text-gray-8',
+          'th-dark:text-gray-warm-7'
+        )}
+        title="Ask AI"
+        rel="noreferrer"
+        data-cy="ask-ai-button"
+      >
+        <BotMessageSquare className="lucide" />
+      </a>
+    </div>
+  );
+}

app/react/components/PageHeader/ContextHelp.tsx

@@ -4,8 +4,7 @@ import { useCurrentStateAndParams } from '@uirouter/react';
 
 import { useSystemVersion } from '@/react/portainer/system/useSystemVersion';
 
-import headerStyles from '../HeaderTitle.module.css';
-import './ContextHelp.css';
+import headerStyles from './HeaderTitle.module.css';
 
 export function ContextHelp() {
   const docsUrl = useDocsUrl();
@@ -18,12 +17,11 @@ export function ContextHelp() {
         color="none"
         className={clsx(
           headerStyles.menuIcon,
-          'menu-icon',
-          'icon-badge mr-1 !p-2 text-lg',
+          'icon-badge mr-1 !p-2 text-lg cursor-pointer',
           'text-gray-8',
           'th-dark:text-gray-warm-7'
         )}
-        title="Help"
+        title="Documentation"
         rel="noreferrer"
         data-cy="context-help-button"
       >

app/react/components/PageHeader/ContextHelp/ContextHelp.css

@@ -1,5 +0,0 @@
-.menu-icon {
-  background: var(--user-menu-icon-color);
-  cursor: pointer;
-  flex-shrink: 0;
-}

app/react/components/PageHeader/ContextHelp/index.ts

@@ -1 +0,0 @@
-export { ContextHelp } from './ContextHelp';

app/react/components/PageHeader/HeaderTitle.module.css

@@ -10,6 +10,12 @@
 .menu-icon {
   background: var(--user-menu-icon-color);
   position: relative;
+  flex-shrink: 0;
+}
+
+.menu-icon:hover {
+  /* keep the links and button icon colors consistent on hover */
+  @apply text-gray-8 th-dark:text-gray-warm-7;
 }
 
 .menu-list {

app/react/components/PageHeader/HeaderTitle.tsx

@@ -5,6 +5,7 @@ import { ContextHelp } from '@@/PageHeader/ContextHelp';
 import { useHeaderContext } from './HeaderContainer';
 import { NotificationsMenu } from './NotificationsMenu';
 import { UserMenu } from './UserMenu';
+import { AskAILink } from './AskAILink';
 
 interface Props {
   title: string;
@@ -25,6 +26,7 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
         {children && <>{children}</>}
       </div>
       <div className="flex items-end">
+        <AskAILink />
         <NotificationsMenu />
         <ContextHelp />
         {!window.ddExtension && <UserMenu />}