feat: Improve UX of AI banner (kyma-project#4061)

* UX corrections and new translations added

* update SVGs for AI banner

* Move styles to adjust the entire banner component

* Styles for better responsiveness have been added

* Update kyma/environments/prod/config.yaml

Co-authored-by: Mateusz Wisniewski <mwisnia97@gmail.com>

* AI banner description corrected

---------

Co-authored-by: mrCherry97 <mwisnia97@gmail.com>

Author: KonradPietocha

kyma/environments/dev/config.yaml

@@ -72,6 +72,7 @@ config:
       isEnabled: true
       config:
         feedbackLink: https://www.youtube.com/watch?v=dQw4w9WgXcQ
+        documentationLink: https://help.sap.com/docs/btp/sap-business-technology-platform-internal/kyma-companion?locale=en-US&version=Internal&state=DRAFT
         model: 'gpt-4.1'
         queryMaxTokens: 8000
     TRACKING:

kyma/environments/prod/config.yaml

@@ -75,6 +75,7 @@ config:
       isEnabled: false
       config:
         feedbackLink: ''
+        documentationLink: ''
         model: ''
         queryMaxTokens: 0
     GARDENER_LOGIN:

kyma/environments/stage/config.yaml

@@ -73,6 +73,7 @@ config:
       isEnabled: true
       config:
         feedbackLink: https://sapinsights.eu.qualtrics.com/jfe/form/SV_dmWATTfes5SstG6
+        documentationLink: https://help.sap.com/docs/btp/sap-business-technology-platform-internal/kyma-companion?locale=en-US&version=Internal&state=DRAFT
         model: 'gpt-4.1'
         queryMaxTokens: 8000
     GARDENER_LOGIN:

public/defaultConfig.yaml

@@ -56,6 +56,7 @@ config:
       isEnabled: false
       config:
         feedbackLink: https://sapinsights.eu.qualtrics.com/jfe/preview/previewId/1fa80b40-56c3-4b20-9902-877df3da3493/SV_dmWATTfes5SstG6?Q_CHL=preview&Q_SurveyVersionID=current
+        documentationLink: https://help.sap.com/docs/btp/sap-business-technology-platform-internal/kyma-companion?locale=en-US&version=Internal&state=DRAFT
         model: 'gpt-4.1'
         queryMaxTokens: 8000
     TRACKING:

public/i18n/en.yaml

@@ -767,9 +767,10 @@ kubeconfig-id:
 kyma-companion:
   banner:
     title: Meet Joule
-    description: Joule is your personal, contextual assistant, ready to help with all Kyma-related questions. Ask about Kyma features, Kubernetes best practices, step-by-step instructions, and more.
+    description: Joule in Kyma dashboard assists you with a wide range of tasks specific to Kyma and Kubernetes. You can use it, for example, to troubleshoot issues, create Functions, scale applications, or configure Ingress. As this is an experimental feature, we encourage you to explore its capabilities and share your feedback to help us improve.
     buttons:
       try-joule: Try Out Joule
+      documentation: Documentation
   name: Joule
   feedback:
     title: We’d love to hear from you!

src/components/Clusters/views/ClusterOverview/ClusterOverview.js

@@ -95,20 +95,21 @@ export function ClusterOverview() {
         actions={actions}
         content={
           <>
-            <BannerCarousel
-              children={
-                <>
-                  {isKymaCompanionEnabled && (
-                    <AIBanner feedbackUrl={companionConfig?.feedbackLink} />
-                  )}
-                  <Injections
-                    destination="ClusterOverview"
-                    slot="banner"
-                    root=""
+            <BannerCarousel>
+              <>
+                {isKymaCompanionEnabled && (
+                  <AIBanner
+                    feedbackUrl={companionConfig?.feedbackLink}
+                    documentationUrl={companionConfig?.documentationLink}
                   />
-                </>
-              }
-            />
+                )}
+                <Injections
+                  destination="ClusterOverview"
+                  slot="banner"
+                  root=""
+                />
+              </>
+            </BannerCarousel>
             <Injections
               destination="ClusterOverview"
               slot="details-top"

src/components/KymaCompanion/components/AIBanner/AIBanner.tsx

@@ -27,7 +27,13 @@ const getIllustration = (theme: ThemeType): string | undefined => {
   }
 };
 
-export function AIBanner({ feedbackUrl }: { feedbackUrl: string }) {
+export function AIBanner({
+  feedbackUrl,
+  documentationUrl,
+}: {
+  feedbackUrl: string;
+  documentationUrl: string;
+}) {
   const { t } = useTranslation();
   const setShowCompanion = useSetRecoilState(showKymaCompanionState);
   const theme = useRecoilValue(themeState);
@@ -36,6 +42,7 @@ export function AIBanner({ feedbackUrl }: { feedbackUrl: string }) {
   return (
     <FeatureCardBanner
       id="ai-banner"
+      className="ai-banner-card"
       title={t('kyma-companion.banner.title')}
       titleIcon={titleIcon}
       description={t('kyma-companion.banner.description')}
@@ -65,6 +72,15 @@ export function AIBanner({ feedbackUrl }: { feedbackUrl: string }) {
           >
             {t('feedback.give-feedback')}
           </Button>
+          <Button
+            key="ai-documentation"
+            endIcon="inspect"
+            onClick={() => {
+              window.open(documentationUrl, '_blank');
+            }}
+          >
+            {t('kyma-companion.banner.buttons.documentation')}
+          </Button>
         </>
       }
     />

src/shared/components/FeatureCard/BannerCarousel.tsx

@@ -6,23 +6,24 @@ export default function BannerCarousel({ children }: { children: ReactNode }) {
   const [childrenLength, setChildrenLength] = useState(0);
   const [activeIndex, setActiveIndex] = useState(0);
   const [isHovered, setIsHovered] = useState(false);
-  const SCROLL_INTERVALL_MS = 6000;
+  const [isUserChoice, setIsUserChoice] = useState(false);
+  const SCROLL_INTERVALL_MS = 25000;
 
   useEffect(() => {
     setChildrenLength(carouselRef?.current?.children?.length ?? 0);
   }, [carouselRef?.current?.children?.length]);
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      if (!isHovered) {
+      if (!isHovered && !isUserChoice) {
         const newIndex = (activeIndex + 1) % childrenLength;
         carouselRef?.current?.navigateTo(newIndex);
         setActiveIndex(newIndex);
       }
     }, SCROLL_INTERVALL_MS);
 
     return () => clearTimeout(timeoutId);
-  }, [activeIndex, isHovered, childrenLength]);
+  }, [activeIndex, isHovered, childrenLength, isUserChoice]);
 
   const handleMouseEnter = () => {
     setIsHovered(true);
@@ -39,12 +40,16 @@ export default function BannerCarousel({ children }: { children: ReactNode }) {
       backgroundDesign="Transparent"
       pageIndicatorBackgroundDesign="Transparent"
       pageIndicatorBorderDesign="None"
-      children={children}
       ref={carouselRef}
       style={childrenLength === 0 ? { display: 'none' } : {}}
-      onNavigate={event => setActiveIndex(event.detail.selectedIndex)}
+      onNavigate={event => {
+        setIsUserChoice(true);
+        setActiveIndex(event.detail.selectedIndex);
+      }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-    />
+    >
+      {children}
+    </Carousel>
   );
 }

src/shared/components/FeatureCard/FeatureCard.tsx

@@ -62,6 +62,7 @@ export function FeatureCardBanner({
   image = '',
   buttons,
   titleIcon,
+  className = '',
 }: FeatureCardBannerProps) {
   const [hideBanner, setHideBanner] = useState(false);
   const hideBannerKey = `hideBanner${id}`;
@@ -98,7 +99,7 @@ export function FeatureCardBanner({
   };
   const illustration = getIllustration(image, theme);
   return (
-    <div className="sap-margin-top-small">
+    <div className={`sap-margin-top-small ${className}`}>
       <Card className="feature-card-container">
         <div className="feature-card" style={getBackgroundStyle(design)}>
           <Button
@@ -107,7 +108,7 @@ export function FeatureCardBanner({
             className="decline-button"
             onClick={handleToggle}
           />
-          <div className="outer-container" style={{ margin: '2rem 2.5rem' }}>
+          <div className="outer-container">
             <div className="inner-container">
               <div style={{ width: '100%' }} className="title-container">
                 <Title
@@ -118,7 +119,8 @@ export function FeatureCardBanner({
                     display: 'inline-flex',
                   }}
                 >
-                  {title}
+                  {/* This extra span element is for the ability to add additional styles that cannot be added to the Title component. */}
+                  <span className="banner-title">{title}</span>
                 </Title>
                 {titleIcon && (
                   <img

src/shared/components/FeatureCard/FeaturedCard.scss

@@ -22,48 +22,68 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 50px;
+    padding: 32px 32px 0 32px;
   }
 
   .inner-container {
     display: flex;
     flex-direction: column;
     gap: 16px;
-    width: 100%;
+    width: 50%;
+    max-width: 700px;
+    margin: 0 32px 32px 0;
+
+    .title-container {
+      ui5-title {
+        margin-right: 8px;
+        .banner-title {
+          font-weight: 900;
+        }
+      }
+      img {
+        width: 46px;
+        height: 46px;
+      }
+    }
+    ui5-text {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
 
     .button-container {
       display: flex;
-      gap: 16px;
+      margin-top: 8px;
+      gap: 8px;
     }
   }
 
   .decline-button {
     position: absolute;
-    top: 12.5px;
-    right: 17.5px;
+    top: 8px;
+    right: 8px;
     color: var(--sapContent_IconColor);
   }
 
   .illustration {
-    max-height: 180px;
-    max-width: 100%;
-    margin-right: 4%;
+    height: 100%;
+    max-width: 50%;
   }
 }
 
-@container (max-width: 850px) {
+@container (max-width: 625px) {
   .feature-card {
     .illustration {
-      margin-right: 0%;
+      max-width: 100%;
     }
-  }
-}
-
-@container (max-width: 625px) {
-  .feature-card {
     .outer-container {
       flex-direction: column-reverse;
-      gap: 16px;
+      align-items: start;
+      gap: 32px;
+
+      .inner-container {
+        width: 100%;
+      }
     }
   }
 }