feat: Add AI notice screen (#3973)

chriskari · web-flow · commit 8a732df65258 · 2025-06-27T09:36:26.000+02:00
* feat: add AI notice screen

* feat: add shadow to input field

* feat: add some gradient to companion header

* feat: add link to privacy policy
diff --git a/public/i18n/en.yaml b/public/i18n/en.yaml
@@ -781,7 +781,12 @@ kyma-companion:
   introduction: Hi, I am your Kyma assistant! You can ask me any question, and I will try to help you to the best of my abilities. Meanwhile, you can check the suggested questions below; you may find them helpful!
   introduction-no-suggestions: Hi, I am your Kyma assistant! You can ask me any question, and I will try to help you to the best of my abilities. While I don't have any initial suggestions for this resource, feel free to ask me anything you'd like!
   placeholder: Message Joule...
-  disclaimer: Joule is powered by generative AI, and the output must be reviewed before use. Do not enter any sensitive personal data, and avoid entering any other data you do not wish to be processed.
+  disclaimer:
+    tooltip: Disclaimer
+    title: AI Notice
+    text: "Joule is powered by generative AI and all output should be reviewed before use. Please do not enter any sensitive personal data, and avoid entering any other personal data you do not wish to be processed. Learn more in the <0>Joule Data Protection and Privacy</0>."
+    hint: Joule uses AI. Verify results.
+    back-conversation: Back to Conversation
   tabs:
     chat: Chat
     page-insights: Page Insights
diff --git a/src/components/KymaCompanion/components/Chat/Chat.tsx b/src/components/KymaCompanion/components/Chat/Chat.tsx
@@ -34,6 +34,7 @@ type ChatProps = {
   setIsReset: React.Dispatch<React.SetStateAction<boolean>>;
   error: AIError;
   setError: React.Dispatch<React.SetStateAction<AIError>>;
+  hide: boolean;
 };
 
 export const Chat = ({
@@ -45,6 +46,7 @@ export const Chat = ({
   setLoading,
   isReset,
   setIsReset,
+  hide = false,
 }: ChatProps) => {
   const { t } = useTranslation();
   const chatRef = useRef<HTMLDivElement | null>(null);
@@ -315,6 +317,7 @@ export const Chat = ({
 
   return (
     <FlexBox
+      style={hide ? { display: 'none' } : undefined}
       direction="Column"
       justifyContent="SpaceBetween"
       className="chat-container"
diff --git a/src/components/KymaCompanion/components/Chat/Input/QueryInput.scss b/src/components/KymaCompanion/components/Chat/Input/QueryInput.scss
@@ -9,6 +9,10 @@
       --_ui5-v2-11-0_textarea_padding_top: 8px !important;
       --_ui5-v2-11-0_textarea_padding_bottom: 8px !important;
 
+      #query-input:focus::part(textarea) {
+        box-shadow: 0px 1px 4px var(--sapLinkColor);
+      }
+
       .query-input-actions {
         position: absolute;
         right: 0.5rem;
@@ -42,7 +46,9 @@
     }
 
     #disclaimer {
-      font-size: 0.65rem;
+      font-size: 11px;
+      text-align: center;
+      color: var(--sapContent_LabelColor);
     }
   }
 }
diff --git a/src/components/KymaCompanion/components/Chat/Input/QueryInput.tsx b/src/components/KymaCompanion/components/Chat/Input/QueryInput.tsx
@@ -80,7 +80,12 @@ export default function QueryInput({
 
   useEffect(() => {
     if (!loading && textareaRef.current) {
-      textareaRef.current?.focus();
+      requestAnimationFrame(() => {
+        const innerTextarea = textareaRef.current?.shadowRoot?.querySelector(
+          '.ui5-textarea-inner',
+        ) as HTMLElement;
+        innerTextarea?.focus();
+      });
     }
   }, [loading]);
 
@@ -135,6 +140,7 @@ export default function QueryInput({
     <div className="outer-query-input-container sap-margin-x-small sap-margin-bottom-small sap-margin-top-tiny">
       <div className="query-input-container">
         <TextArea
+          id="query-input"
           ref={textareaRef}
           disabled={loading}
           growing
@@ -174,7 +180,7 @@ export default function QueryInput({
           />
         </div>
       </div>
-      <Text id="disclaimer">{t('kyma-companion.disclaimer')}</Text>
+      <Text id="disclaimer">{t('kyma-companion.disclaimer.hint')}</Text>
     </div>
   );
 }
diff --git a/src/components/KymaCompanion/components/Disclaimer/Disclaimer.scss b/src/components/KymaCompanion/components/Disclaimer/Disclaimer.scss
@@ -0,0 +1,38 @@
+.disclaimer {
+  height: calc(100vh - 60px - 1rem);
+  background: var(--sapAssistant_BackgroundGradient);
+  padding-inline: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  #content-container {
+    padding-bottom: 60px;
+  }
+
+  #disclaimer-icon {
+    color: var(--sapContent_ContrastTextColor);
+    height: 3rem;
+    width: 3rem;
+  }
+
+  #disclaimer-title {
+    color: var(--sapContent_ContrastTextColor);
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-top: 2rem;
+  }
+
+  #disclaimer-text {
+    color: var(--sapContent_ContrastTextColor);
+    font-size: 1rem;
+    text-align: center;
+    max-width: 24rem;
+
+    ui5-link {
+      color: var(--sapContent_ContrastTextColor);
+      font-size: 1rem;
+      text-shadow: none !important;
+    }
+  }
+}
diff --git a/src/components/KymaCompanion/components/Disclaimer/Disclaimer.tsx b/src/components/KymaCompanion/components/Disclaimer/Disclaimer.tsx
@@ -0,0 +1,48 @@
+import { Button, FlexBox, Link, Text } from '@ui5/webcomponents-react';
+import { useTranslation, Trans } from 'react-i18next';
+import JouleIcon from '../JouleIcon';
+import './Disclaimer.scss';
+
+interface DisclaimerProps {
+  hideDisclaimer: () => void;
+}
+
+export default function Disclaimer({ hideDisclaimer }: DisclaimerProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="disclaimer">
+      <FlexBox
+        id="content-container"
+        direction="Column"
+        justifyContent="Center"
+        alignItems="Center"
+        gap={16}
+      >
+        <JouleIcon size={4} />
+        <Text id="disclaimer-title">
+          {t('kyma-companion.disclaimer.title')}
+        </Text>
+        <Text id="disclaimer-text">
+          <Trans
+            i18nKey="kyma-companion.disclaimer.text"
+            components={[
+              <Link
+                href="https://help.sap.com/docs/joule/serviceguide/data-protection-and-privacy"
+                design="Subtle"
+                target="_blank"
+              />,
+            ]}
+          />
+        </Text>
+        <Button
+          className="sap-margin-top-small"
+          onClick={hideDisclaimer}
+          icon="discussion"
+        >
+          {t('kyma-companion.disclaimer.back-conversation')}
+        </Button>
+      </FlexBox>
+    </div>
+  );
+}
diff --git a/src/components/KymaCompanion/components/JouleIcon.tsx b/src/components/KymaCompanion/components/JouleIcon.tsx
@@ -0,0 +1,31 @@
+export default function JouleIcon({ size }: { size: number }) {
+  return (
+    <svg
+      width={`${size}rem`}
+      height={`${size}rem`}
+      viewBox="0 0 122 120"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.6026 37C45.3357 37 44.1364 37.5715 43.3379 38.5556L24.9405 61.23C23.7324 62.7189 23.6834 64.8368 24.8211 66.3802L61.616 116.29C62.4087 117.365 63.6647 118 65 118C66.3353 118 67.5913 117.365 68.384 116.29L105.179 66.3802C106.317 64.8368 106.268 62.7189 105.06 61.23L86.6621 38.5556C85.8636 37.5715 84.6643 37 83.3974 37H46.6026ZM88.3249 63.5392C79.643 62.0748 76.8647 55.2489 75.9469 50.9797C75.8477 50.5577 75.302 50.5825 75.2276 51.0045C73.764 59.6919 66.9425 62.4719 62.6759 63.3903C62.2543 63.4896 62.2791 64.0357 62.7008 64.1101C71.3827 65.5746 74.1609 72.4004 75.0787 76.6697C75.178 77.0917 75.7237 77.0668 75.7981 76.6449C77.2616 67.9574 84.0832 65.1774 88.3497 64.259C88.7714 64.1598 88.7466 63.6137 88.3249 63.5392Z"
+        fill="var(--dasSplashScreenImageColor, #FFFFFF)"
+      />
+      <path
+        d="M101.542 20.3013C102.16 23.126 104.031 27.6422 109.878 28.6111C110.162 28.6604 110.179 29.0217 109.895 29.0874C107.022 29.695 102.428 31.5343 101.442 37.2822C101.392 37.5614 101.024 37.5778 100.958 37.2986C100.34 34.4739 98.4685 29.9578 92.6215 28.9888C92.3375 28.9396 92.3208 28.5783 92.6048 28.5126C95.4782 27.9049 100.072 26.0656 101.058 20.3178C101.108 20.0386 101.476 20.0222 101.542 20.3013Z"
+        fill="var(--dasSplashScreenImageColor, #FFFFFF)"
+      />
+      <path
+        d="M42.2811 0.302036C43.1925 4.53904 45.9515 11.3133 54.5733 12.7667C54.9921 12.8406 55.0167 13.3826 54.598 13.4811C50.361 14.3925 43.5867 17.1515 42.1333 25.7733C42.0594 26.1921 41.5174 26.2167 41.4189 25.798C40.5075 21.561 37.7485 14.7867 29.1267 13.3333C28.7079 13.2594 28.6833 12.7174 29.102 12.6189C33.339 11.7075 40.1133 8.94848 41.5667 0.326668C41.6406 -0.0921059 42.1826 -0.116738 42.2811 0.302036Z"
+        fill="var(--dasSplashScreenImageColor, #FFFFFF)"
+      />
+      <path
+        d="M16.7874 26.3048C17.395 29.1782 19.2344 33.7722 24.9822 34.7579C25.2614 34.808 25.2778 35.1755 24.9986 35.2423C22.174 35.8604 17.6578 37.7315 16.6889 43.5784C16.6396 43.8624 16.2783 43.8791 16.2126 43.5951C15.605 40.7218 13.7657 36.1277 8.01778 35.1421C7.7386 35.092 7.72218 34.7244 8.00136 34.6576C10.826 34.0395 15.3422 32.1685 16.3111 26.3215C16.3604 26.0375 16.7217 26.0208 16.7874 26.3048Z"
+        fill="var(--dasSplashScreenImageColor, #FFFFFF)"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/KymaCompanion/components/KymaCompanion.scss b/src/components/KymaCompanion/components/KymaCompanion.scss
@@ -10,11 +10,21 @@
     height: 100%;
     width: 100%;
 
+    &__disclaimer-header {
+      @extend .kyma-companion__header;
+      background: unset !important;
+      background-position: unset !important;
+      background-size: unset !important;
+      background-color: var(--sapAssistant_Color1) !important;
+    }
+
     &__header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background-color: var(--sapAssistant_Color1);
+      background: var(--sapAssistant_BackgroundGradient);
+      background-size: 100% 400%;
+      background-position: 0 0;
       min-height: 60px;
       padding: 0 1rem;
 
diff --git a/src/components/KymaCompanion/components/KymaCompanion.tsx b/src/components/KymaCompanion/components/KymaCompanion.tsx
@@ -8,6 +8,7 @@ import {
 } from 'state/companion/showKymaCompanionAtom';
 import { Chat } from './Chat/Chat';
 import { ChatGroup, chatGroupHelpers } from './Chat/types';
+import Disclaimer from './Disclaimer/Disclaimer';
 import './KymaCompanion.scss';
 
 export interface AIError {
@@ -21,6 +22,7 @@ export default function KymaCompanion() {
   const [showCompanion, setShowCompanion] = useRecoilState<ShowKymaCompanion>(
     showKymaCompanionState,
   );
+  const [showDisclaimer, setShowDisclaimer] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [isReset, setIsReset] = useState<boolean>(false);
   const [chatHistory, setChatHistory] = useState<ChatGroup[]>(
@@ -47,19 +49,25 @@ export default function KymaCompanion() {
       <Card
         className="kyma-companion"
         header={
-          <div className="kyma-companion__header">
+          <div
+            className={`kyma-companion__${
+              showDisclaimer ? 'disclaimer-' : ''
+            }header`}
+          >
             <Title level="H5" size="H5" className="title">
               {t('kyma-companion.name')}
             </Title>
             <div className="actions-container">
-              <Button
-                design="Transparent"
-                icon="restart"
-                disabled={loading}
-                tooltip={t('common.buttons.reset')}
-                className="action"
-                onClick={() => handleRefresh()}
-              />
+              {!showDisclaimer && (
+                <Button
+                  design="Transparent"
+                  icon="restart"
+                  disabled={loading}
+                  tooltip={t('common.buttons.reset')}
+                  className="action"
+                  onClick={() => handleRefresh()}
+                />
+              )}
               <Button
                 design="Transparent"
                 icon={
@@ -73,6 +81,15 @@ export default function KymaCompanion() {
                   })
                 }
               />
+              {!showDisclaimer && (
+                <Button
+                  design="Transparent"
+                  icon="hint"
+                  tooltip={t('kyma-companion.disclaimer.tooltip')}
+                  className="action"
+                  onClick={() => setShowDisclaimer(true)}
+                />
+              )}
               <Button
                 design="Transparent"
                 icon="decline"
@@ -95,7 +112,11 @@ export default function KymaCompanion() {
           setIsReset={setIsReset}
           error={error}
           setError={setError}
+          hide={showDisclaimer}
         />
+        {showDisclaimer && (
+          <Disclaimer hideDisclaimer={() => setShowDisclaimer(false)} />
+        )}
       </Card>
     </div>
   );

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,10 @@`
`9`	`9`	`--_ui5-v2-11-0_textarea_padding_top: 8px !important;`
`10`	`10`	`--_ui5-v2-11-0_textarea_padding_bottom: 8px !important;`
`11`	`11`
	`12`	`+ #query-input:focus::part(textarea) {`
	`13`	`+ box-shadow: 0px 1px 4px var(--sapLinkColor);`
	`14`	`+ }`
	`15`	`+`
`12`	`16`	`.query-input-actions {`
`13`	`17`	`position: absolute;`
`14`	`18`	`right: 0.5rem;`
`@@ -42,7 +46,9 @@`
`42`	`46`	`}`
`43`	`47`
`44`	`48`	`#disclaimer {`
`45`		`- font-size: 0.65rem;`
	`49`	`+ font-size: 11px;`
	`50`	`+ text-align: center;`
	`51`	`+ color: var(--sapContent_LabelColor);`
`46`	`52`	`}`
`47`	`53`	`}`
`48`	`54`	`}`