feat: Adjust companion to new designs (#3650)

* adjust first components to new designs

* feat: adjust input alignment

* feat: adjusted code panels, implemented syntax highlighting

* temporarily uninstall packages

* reinstall packages

* directly use ui5 color for styling messages

* feat: add copy to clipboard functionality

* fix: adjust disclaimer

Author: chriskari

package-lock.json

@@ -64,6 +64,7 @@
     "@stoplight/json-ref-resolver": "^3.1.3",
     "@types/jsonpath": "^0.2.0",
     "@types/pluralize": "^0.0.29",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@ui-schema/ui-schema": "^0.4.5",
     "@ui5/webcomponents": "^2.7.0",
     "@ui5/webcomponents-base": "^2.7.0",
@@ -103,6 +104,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",

package.json

@@ -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 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.
   tabs:
     chat: Chat
     page-insights: Page Insights

public/i18n/en.yaml

@@ -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/App/App.tsx

@@ -1,5 +1,5 @@
 .chat-container {
-  height: 100%;
+  height: calc(100vh - 60px - 1rem);
   overflow: hidden;
 
   .chat-list {
@@ -13,19 +13,63 @@
     }
 
     .left-aligned {
+      position: relative;
       align-self: flex-start;
-      background-color: var(--sapBackgroundColor);
       border-radius: 8px 8px 8px 0;
+      z-index: 0;
+    }
+
+    .left-aligned::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--sapNeutralColor);
+      opacity: 0.2;
+      border-radius: 8px 8px 8px 0;
+      z-index: -1;
     }
 
     .right-aligned {
+      position: relative;
       align-self: flex-end;
+      border-radius: 8px 8px 0 8px;
+      z-index: 0;
+    }
+
+    .right-aligned::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
       background-color: var(--sapContent_Illustrative_Color1);
+      opacity: 0.25;
       border-radius: 8px 8px 0 8px;
+      z-index: -1;
+    }
+  }
+
+  .outer-input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 
-      .text {
-        color: white;
+    .input-container {
+      position: relative;
+
+      #text-area-icon {
+        position: absolute;
+        right: 0.5rem;
+        bottom: 0.6rem;
       }
     }
+
+    #disclaimer {
+      font-size: 0.65rem;
+    }
   }
 }

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

@@ -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/Chat.tsx

@@ -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.scss

@@ -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/Bubbles.tsx

@@ -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.scss

@@ -1,20 +1,95 @@
-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 copyToCliboard from 'copy-to-clipboard';
 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"
+        onClick={() => copyToCliboard(code)}
+      />
+      <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"
+            onClick={() => copyToCliboard(code)}
+          />
+        </FlexBox>
+      }
+      fixed
+    >
+      <SyntaxHighlighter language={language} style={syntaxTheme} wrapLongLines>
+        {code}
+      </SyntaxHighlighter>
     </Panel>
   );
 }