adjust marked

Author: dbadura

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

@@ -1,5 +1,4 @@
 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 {
@@ -50,6 +49,16 @@ function getCustomTheme(theme: Theme) {
   };
 }
 
+function formatCodeSegment(
+  text: string,
+): { language: string | undefined; code: string } {
+  const lines = text.split('\n');
+  const language = lines.shift();
+  const nonEmptyLines = lines.filter(line => line.trim() !== '');
+  const code = nonEmptyLines.join('\n');
+  return { language, code };
+}
+
 interface CodePanelProps {
   text: string;
 }

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

@@ -45,7 +45,6 @@ export default function Message({
     segmentedText = formatMessage(text);
   }
 
-  console.log(messageChunks.slice(-1)[0]?.data?.answer?.content);
   return (
     <div className={'message ' + className}>
       <Text className="text">{segmentedText}</Text>

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

@@ -7,6 +7,41 @@ export const UI5Renderer = {
     return <CodePanel text={tokens} />;
   },
 
+  blockquote(tokens: string) {
+    return (
+      <blockquote
+        style={{
+          fontStyle: 'italic',
+          borderLeft: '1px dashed black',
+          margin: '1em 0',
+          paddingLeft: '1em',
+        }}
+      >
+        {tokens}
+      </blockquote>
+    );
+  },
+
+  text(tokens: string) {
+    return <Text className="text">{tokens}</Text>;
+  },
+
+  list(items: any[]) {
+    return (
+      <>
+        <ul
+          className="sap-margin-begin-tiny sap-padding-x-tiny"
+          style={{
+            lineHeight: 1.5,
+            listStyleType: 'disc',
+          }}
+        >
+          {items}
+        </ul>
+      </>
+    );
+  },
+
   codespan(tokens: string) {
     return <Text className="text highlighted">{tokens}</Text>;
   },
@@ -23,6 +58,7 @@ export const UI5Renderer = {
       </Title>
     );
   },
+
   link(href: string, title: string) {
     return (
       <Link href={href} target="_blank">

src/components/KymaCompanion/utils/formatMarkdown.tsx

@@ -1,15 +1,6 @@
-import Markdown from 'marked-react';
 import { UI5Renderer } from 'components/KymaCompanion/components/Chat/messages/markedExtension';
 
-export function formatCodeSegment(
-  text: string,
-): { language: string | undefined; code: string } {
-  const lines = text.split('\n');
-  const language = lines.shift();
-  const nonEmptyLines = lines.filter(line => line.trim() !== '');
-  const code = nonEmptyLines.join('\n');
-  return { language, code };
-}
+import Markdown from 'marked-react';
 
 export function formatMessage(text: string): JSX.Element[] {
   const elements: JSX.Element[] = [];