feat: Adjust companion to new designs

package.json

@@ -103,6 +103,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0",
+    "react-syntax-highlighter": "^15.6.1",
     "react-tippy": "^1.4.0",
     "recoil": "^0.7.5",
     "resize-observer-polyfill": "^1.5.1",
@@ -122,6 +123,7 @@
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^9.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-polyfill": "^6.26.0",

public/i18n/en.yaml

@@ -761,7 +761,8 @@ kyma-companion:
     subtitle: A temporary interruption occured. Please try again.
   introduction1: Hello there,
   introduction2: How can I help you?
-  placeholder: Type something
+  placeholder: Message Joule
+  disclaimer: 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.
   tabs:
     chat: Chat
     page-insights: Page Insights

src/components/App/App.tsx

@@ -136,7 +136,7 @@ export default function App() {
         <SplitterElement
           resizable={!showCompanion.fullScreen}
           size={showCompanion.fullScreen ? '100%' : '30%'}
-          minSize={350}
+          minSize={400}
         >
           <KymaCompanion />
         </SplitterElement>

src/components/KymaCompanion/components/Chat/Chat.scss

@@ -1,5 +1,5 @@
 .chat-container {
-  height: 100%;
+  height: calc(100vh - 60px - 1rem);
   overflow: hidden;
 
   .chat-list {
@@ -14,18 +14,36 @@
 
     .left-aligned {
       align-self: flex-start;
-      background-color: var(--sapBackgroundColor);
+      // --sapNeutralColor
+      background-color: rgba(#788fa6, 0.2);
       border-radius: 8px 8px 8px 0;
     }
 
     .right-aligned {
       align-self: flex-end;
-      background-color: var(--sapContent_Illustrative_Color1);
+      // --sapContent_Illustrative_Color1
+      background-color: rgba(#5d36ff, 0.2);
       border-radius: 8px 8px 0 8px;
+    }
+  }
+
+  .outer-input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .input-container {
+      position: relative;
 
-      .text {
-        color: white;
+      #text-area-icon {
+        position: absolute;
+        right: 0.5rem;
+        bottom: 0.6rem;
       }
     }
+
+    #disclaimer {
+      font-size: 0.65rem;
+    }
   }
 }

src/components/KymaCompanion/components/Chat/Chat.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import React, { useEffect, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { FlexBox, Icon, Input } from '@ui5/webcomponents-react';
+import { FlexBox, Icon, Text, TextArea } from '@ui5/webcomponents-react';
 import { initialPromptState } from 'components/KymaCompanion/state/initalPromptAtom';
 import Message from './messages/Message';
 import Bubbles from './messages/Bubbles';
@@ -126,12 +126,15 @@ export default function Chat() {
       justifyContent="SpaceBetween"
       className="chat-container"
     >
-      <div className="chat-list sap-margin-tiny" ref={containerRef}>
+      <div
+        className="chat-list sap-margin-x-tiny sap-margin-top-small"
+        ref={containerRef}
+      >
         {chatHistory.map((message, index) => {
           return message.author === 'ai' ? (
             <React.Fragment key={index}>
               <Message
-                className="left-aligned"
+                className="left-aligned sap-margin-begin-tiny"
                 messageChunks={message.messageChunks}
                 isLoading={message.isLoading}
               />
@@ -145,7 +148,7 @@ export default function Chat() {
           ) : (
             <Message
               key={index}
-              className="right-aligned"
+              className="right-aligned sap-margin-end-tiny"
               messageChunks={message.messageChunks}
               isLoading={message.isLoading}
             />
@@ -158,16 +161,34 @@ export default function Chat() {
           />
         )}
       </div>
-      <div className="sap-margin-x-tiny">
-        <Input
-          className="full-width"
-          disabled={chatHistory[chatHistory.length - 1]?.isLoading}
-          placeholder={t('kyma-companion.placeholder')}
-          value={inputValue}
-          icon={<Icon name="paper-plane" onClick={onSubmitInput} />}
-          onKeyDown={e => e.key === 'Enter' && onSubmitInput()}
-          onInput={e => setInputValue(e.target.value)}
-        />
+      <div className="outer-input-container sap-margin-x-small sap-margin-bottom-small sap-margin-top-tiny">
+        <div className="input-container">
+          <TextArea
+            className="full-width"
+            growing
+            growingMaxRows={10}
+            rows={1}
+            placeholder={t('kyma-companion.placeholder')}
+            value={inputValue}
+            onKeyDown={e => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                onSubmitInput();
+              }
+            }}
+            onInput={e => {
+              setInputValue(e.target.value);
+            }}
+            valueState="None"
+          />
+          <Icon
+            id="text-area-icon"
+            name="paper-plane"
+            mode="Interactive"
+            onClick={onSubmitInput}
+          />
+        </div>
+        <Text id="disclaimer">{t('kyma-companion.disclaimer')}</Text>
       </div>
     </FlexBox>
   );

src/components/KymaCompanion/components/Chat/messages/Bubbles.scss

@@ -4,11 +4,13 @@
 
   .bubble-button {
     align-self: flex-start;
-    color: var(--sapChart_OrderedColor_5);
+    color: var(--sapLinkColor);
+    border-radius: 0.75rem;
+    border: none;
+    box-shadow: 0 1px 3px var(--sapLinkColor);
   }
 
   .bubble-button:hover {
-    background-color: var(--sapBackgroundColor1);
-    border-color: var(--sapChart_OrderedColor_5);
+    background-color: var(--sapBackgroundColor);
   }
 }

src/components/KymaCompanion/components/Chat/messages/Bubbles.tsx

@@ -11,7 +11,11 @@ export default function Bubbles({
   onClick,
 }: BubblesProps): JSX.Element {
   return suggestions ? (
-    <FlexBox wrap="Wrap" justifyContent="Start" className={'bubbles-container'}>
+    <FlexBox
+      wrap="Wrap"
+      justifyContent="Start"
+      className="bubbles-container sap-margin-begin-tiny sap-margin-bottom-tiny"
+    >
       {suggestions.map((suggestion, index) => (
         <Button
           key={index}

src/components/KymaCompanion/components/Chat/messages/CodePanel.scss

@@ -1,28 +1,28 @@
 .code-response {
-  background-color: #484848;
-  color: white;
+  background-color: var(--sapBaseColor);
   padding: 0.75rem;
   border-radius: 4px;
+  position: relative;
 
-  .text {
-    color: white;
+  #copy-icon {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.75rem;
+  }
+
+  #code-text {
+    white-space: pre-wrap;
   }
 }
 
 .code-panel::part(header) {
-  background-color: #484848;
-  color: white;
+  background-color: var(--sapBaseColor);
   border-radius: 4px 4px 0 0;
-  font-size: 0.9rem;
+  padding: 0.5rem 0.75rem !important;
 }
 
 .code-panel::part(content) {
-  background-color: #484848;
+  background-color: var(--sapBaseColor);
   border-radius: 0 0 4px 4px;
-}
-
-.code-panel {
-  .text {
-    color: white;
-  }
+  padding: 0;
 }

src/components/KymaCompanion/components/Chat/messages/CodePanel.tsx

@@ -1,20 +1,88 @@
-import { Text, Panel } from '@ui5/webcomponents-react';
+import { Text, Panel, Title, Icon, FlexBox } from '@ui5/webcomponents-react';
 import { formatCodeSegment } from 'components/KymaCompanion/utils/formatMarkdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { useRecoilValue } from 'recoil';
+import {
+  isCurrentThemeDark,
+  Theme,
+  themeState,
+} from 'state/preferences/themeAtom';
 import './CodePanel.scss';
 
+function getCustomTheme(theme: Theme) {
+  const isDark = isCurrentThemeDark(theme);
+  const monacoEditorKeyColorLight = '#008080';
+  const monacoEditorKeyColorDark = '#3dc9b0';
+  const monacoEditorTextColorLight = '#0451a5';
+  const monacoEditorTextColorDark = '#ce9178';
+
+  return {
+    'code[class*="language-"]': {
+      color: isDark ? monacoEditorTextColorDark : monacoEditorTextColorLight,
+      background: 'var(--sapBaseColor)',
+      fontFamily: 'var(--sapFontFamily)',
+      fontSize: '14px',
+    },
+    'pre[class*="language-"]': {
+      background: 'var(--sapBaseColor)',
+      padding: '0 0.75rem',
+      margin: '0.5rem 0',
+      borderRadius: '8px',
+    },
+    comment: {
+      color: isDark ? 'var(--sapLinkColor)' : monacoEditorTextColorDark,
+    },
+    keyword: {
+      color: isDark ? monacoEditorKeyColorDark : monacoEditorKeyColorLight,
+    },
+    key: {
+      color: isDark ? monacoEditorKeyColorDark : monacoEditorKeyColorLight,
+    },
+    punctuation: {
+      color: 'var(--sapTextColor)',
+    },
+    operator: { color: 'var(--sapTextColor)' },
+    function: { color: 'var(--sapChart_OrderedColor_4)' },
+    number: {
+      color: 'var(--sapChart_OrderedColor_4)',
+    },
+  };
+}
+
 interface CodePanelProps {
   text: string;
 }
 
 export default function CodePanel({ text }: CodePanelProps): JSX.Element {
+  const theme = useRecoilValue(themeState);
+  const syntaxTheme = getCustomTheme(theme);
   const { language, code } = formatCodeSegment(text);
   return !language ? (
-    <div className="code-response">
-      <Text className="text">{code}</Text>
+    <div className="code-response sap-margin-y-small">
+      <Icon
+        id="copy-icon"
+        mode="Interactive"
+        name="copy"
+        design="Information"
+      />
+      <Text id="code-text">{code}</Text>
     </div>
   ) : (
-    <Panel headerText={language} className="code-panel" fixed>
-      <Text className="text">{code}</Text>
+    <Panel
+      className="code-panel sap-margin-y-small"
+      header={
+        <FlexBox alignItems="Center" fitContainer justifyContent="SpaceBetween">
+          <Title level="H6" size="H6">
+            {language}
+          </Title>
+          <Icon mode="Interactive" name="copy" design="Information" />
+        </FlexBox>
+      }
+      fixed
+    >
+      <SyntaxHighlighter language={language} style={syntaxTheme} wrapLongLines>
+        {code}
+      </SyntaxHighlighter>
     </Panel>
   );
 }

src/components/KymaCompanion/components/Chat/messages/ErrorMessage.tsx

@@ -1,4 +1,4 @@
-import { Button, IllustratedMessage } from '@ui5/webcomponents-react';
+import { Button, Card, IllustratedMessage } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 
 interface ErrorMessageProps {
@@ -13,18 +13,26 @@ export default function ErrorMessage({
   const { t } = useTranslation();
 
   return (
-    <IllustratedMessage
-      name="Connection"
-      key="error-message"
-      titleText={t('kyma-companion.error.title')}
-      subtitleText={t('kyma-companion.error.subtitle')}
-      className="sap-margin-top-small no-padding"
-    >
-      {errorOnInitialMessage && (
-        <Button onClick={resendInitialPrompt}>
-          {t('common.buttons.retry')}
-        </Button>
-      )}
-    </IllustratedMessage>
+    <div className="sap-margin-x-tiny sap-margin-y-small">
+      <Card>
+        <IllustratedMessage
+          name="Connection"
+          key="error-message"
+          titleText={t('kyma-companion.error.title')}
+          subtitleText={t('kyma-companion.error.subtitle')}
+          className="sap-margin-top-small no-padding"
+        >
+          {errorOnInitialMessage && (
+            <Button
+              onClick={resendInitialPrompt}
+              design="Emphasized"
+              className="sap-margin-bottom-tiny"
+            >
+              {t('common.buttons.retry')}
+            </Button>
+          )}
+        </IllustratedMessage>
+      </Card>
+    </div>
   );
 }

src/components/KymaCompanion/components/Chat/messages/Message.scss

@@ -38,5 +38,6 @@
 
   .text {
     line-height: 1.35;
+    white-space: pre-line;
   }
 }