Check if kapa.ai can also be integrated into dstack Sky #296 (#2990)

* dstackai/dstack-cloud#296

* Move tour button

Author: olgenn

frontend/public/index.html

@@ -22,5 +22,19 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class="b-page-header" id="header"></div>
     <div id="root"></div>
+
+    <script src="https://widget.kapa.ai/kapa-widget.bundle.js"
+            data-website-id="1c028b8e-609e-40e3-b792-f3939a461850"
+            data-project-name="dstack"
+            data-project-color="rgba(0, 0, 0, 0.87)"
+            data-font-size-lg="0.78rem"
+            data-button-hide="true"
+            data-modal-image="/logo-notext.svg"
+            data-modal-z-index="1100"
+            data-modal-title="Ask me anything"
+            data-project-logo="/assets/images/kapa.svg"
+            data-modal-disclaimer="This is a custom LLM for dstack with access to Documentation, API references and GitHub issues. This feature is experimental - Give it a try!"
+            data-user-analytics-fingerprint-enabled="true"
+            async></script>
   </body>
 </html>

frontend/public/logo-notext.svg

@@ -137,6 +137,11 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
     const ThemeIcon = THEME_ICON_MAP[systemMode];
 
+    const askAi = () => {
+        window.document.body.focus();
+        window?.Kapa?.open();
+    };
+
     return (
         <AnnotationContext>
             <HeaderPortal>
@@ -148,12 +153,6 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                             logo: { src: logo, alt: 'Dstack logo' },
                         }}
                         utilities={[
-                            process.env.UI_VERSION === 'sky' && {
-                                type: 'button',
-                                iconName: 'gen-ai',
-                                title: t('common.tutorial_other'),
-                                onClick: toggleTutorialPanel,
-                            },
                             {
                                 type: 'button',
                                 text: t('common.docs'),
@@ -172,6 +171,19 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                                 iconSvg: <ThemeIcon />,
                                 onClick: onChangeSystemModeToggle,
                             },
+                            process.env.UI_VERSION === 'sky' && {
+                                type: 'button',
+                                iconName: 'gen-ai',
+                                text: t('common.ask_ai'),
+                                title: t('common.ask_ai'),
+                                onClick: askAi,
+                            },
+                            process.env.UI_VERSION === 'sky' && {
+                                type: 'button',
+                                iconName: 'suggestions',
+                                title: t('common.tutorial_other'),
+                                onClick: toggleTutorialPanel,
+                            },
                             {
                                 'data-class': 'user-menu',
                                 type: 'menu-dropdown',

frontend/src/layouts/AppLayout/index.tsx

@@ -48,7 +48,8 @@
     "danger_zone": "Danger Zone",
     "control_plane": "Control plane",
     "refresh": "Refresh",
-    "quickstart": "Quickstart"
+    "quickstart": "Quickstart",
+    "ask_ai": "Ask AI"
   },
 
   "auth": {