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

app/react/components/BoxSelector/BoxOption.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
-import type { Icon } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 
 import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
 
@@ -16,7 +16,7 @@ interface Props<T extends Value> {
   tooltip?: string;
   className?: string;
   type?: 'radio' | 'checkbox';
-  checkIcon: Icon;
+  checkIcon: LucideIcon;
 }
 
 export function BoxOption<T extends Value>({

app/react/components/BoxSelector/BoxSelectorItem.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Icon as ReactFeatherComponentType, Check } from 'lucide-react';
+import { type LucideIcon, Check } from 'lucide-react';
 import { Fragment } from 'react';
 
 import { Icon } from '@/react/components/Icon';
@@ -22,7 +22,7 @@ type Props<T extends Value> = {
   isSelected(value: T): boolean;
   type?: 'radio' | 'checkbox';
   slim?: boolean;
-  checkIcon?: ReactFeatherComponentType;
+  checkIcon?: LucideIcon;
 };
 
 export function BoxSelectorItem<T extends Value>({

app/react/components/HelpLink/HelpLink.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { useDocsUrl } from '../PageHeader/ContextHelp/ContextHelp';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp';
 
 type HelpLinkProps = {
   docLink: string;

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 />}

app/react/components/form-components/EnvironmentVariablesFieldset/StackEnvironmentVariablesPanel.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 
 import { Alert } from '@@/Alert';
-import { useDocsUrl } from '@@/PageHeader/ContextHelp/ContextHelp';
+import { useDocsUrl } from '@@/PageHeader/ContextHelp';
 
 import { EnvironmentVariablesFieldset } from './EnvironmentVariablesFieldset';
 import { EnvironmentVariablesPanel } from './EnvironmentVariablesPanel';