first implementaion of marked

Author: dbadura

package.json

@@ -92,6 +92,8 @@
     "jsonschema": "^1.4.1",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.19",
+    "marked": "^15.0.7",
+    "marked-react": "^3.0.0",
     "monaco-editor": "^0.33.0",
     "monaco-yaml": "^4.0.4",
     "oidc-client-ts": "^3.2.0",

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

@@ -246,6 +246,7 @@ export const Chat = ({
               className="right-aligned sap-margin-end-tiny"
               messageChunks={message.messageChunks}
               isLoading={message.isLoading}
+              disableFormatting={true}
             />
           );
         })}

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

@@ -1,13 +1,13 @@
-import { Link, Text } from '@ui5/webcomponents-react';
-import CodePanel from './CodePanel';
-import { segmentMarkdownText } from 'components/KymaCompanion/utils/formatMarkdown';
+import { Text } from '@ui5/webcomponents-react';
+import { formatMessage } from 'components/KymaCompanion/utils/formatMarkdown';
 import TasksList from './TasksList';
 import './Message.scss';
 
 interface MessageProps {
   className: string;
   messageChunks: MessageChunk[];
   isLoading: boolean;
+  disableFormatting?: boolean;
 }
 
 export interface MessageChunk {
@@ -31,40 +31,24 @@ export default function Message({
   className,
   messageChunks,
   isLoading,
+  disableFormatting = false,
 }: MessageProps): JSX.Element {
   if (isLoading) {
     return <TasksList messageChunks={messageChunks} />;
   }
+  const text = messageChunks.slice(-1)[0]?.data?.answer?.content;
 
-  const segmentedText = segmentMarkdownText(
-    messageChunks.slice(-1)[0]?.data?.answer?.content,
-  );
+  let segmentedText = null;
+  if (disableFormatting) {
+    segmentedText = text;
+  } else {
+    segmentedText = formatMessage(text);
+  }
 
+  console.log(messageChunks.slice(-1)[0]?.data?.answer?.content);
   return (
     <div className={'message ' + className}>
-      {segmentedText && (
-        <Text className="text">
-          {segmentedText.map((segment, index) =>
-            segment.type === 'bold' ? (
-              <Text key={index} className="text bold">
-                {segment.content}
-              </Text>
-            ) : segment.type === 'code' ? (
-              <CodePanel key={index} text={segment.content} />
-            ) : segment.type === 'highlighted' ? (
-              <Text key={index} className="text highlighted">
-                {segment.content}
-              </Text>
-            ) : segment.type === 'link' ? (
-              <Link key={index} href={segment.content.address} target="_blank">
-                {segment.content.name}
-              </Link>
-            ) : (
-              segment.content
-            ),
-          )}
-        </Text>
-      )}
+      <Text className="text">{segmentedText}</Text>
     </div>
   );
 }

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

@@ -0,0 +1,33 @@
+import CodePanel from 'components/KymaCompanion/components/Chat/messages/CodePanel';
+import { Link, Text, Title } from '@ui5/webcomponents-react';
+import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel';
+
+export const UI5Renderer = {
+  code(tokens: string, lang: string) {
+    return <CodePanel text={tokens} />;
+  },
+
+  codespan(tokens: string) {
+    return <Text className="text highlighted">{tokens}</Text>;
+  },
+
+  strong(tokens: string) {
+    return <Text className="text bold">{tokens}</Text>;
+  },
+
+  heading(tokens: string, depth: number) {
+    const level = `H${depth}` as TitleLevel;
+    return (
+      <Title level={level} size={level}>
+        {tokens}
+      </Title>
+    );
+  },
+  link(href: string, title: string) {
+    return (
+      <Link href={href} target="_blank">
+        {title}
+      </Link>
+    );
+  },
+};

src/components/KymaCompanion/utils/formatMarkdown.ts

@@ -0,0 +1,57 @@
+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 };
+}
+
+export function formatMessage(text: string): JSX.Element[] {
+  const elements: JSX.Element[] = [];
+  let currentText: string = '';
+  let divs = 0;
+  let idx = 0;
+  let codeSection: boolean = false;
+  text.split('\n').forEach(line => {
+    if (line.trim().startsWith('<div')) {
+      divs += 1;
+      if (codeSection) {
+        return;
+      }
+      elements.push(MarkdownText(currentText + '\n', idx));
+      currentText = line + '\n';
+      codeSection = true;
+      return;
+    }
+
+    if (codeSection && line.trim().startsWith('</div>')) {
+      divs -= 1;
+      currentText += line;
+      if (divs === 0) {
+        // TODO: Will be implemented in https://github.com/kyma-project/busola/issues/3604
+        elements.push(<>{`---\n${currentText}\n---`}</>);
+        codeSection = false;
+        currentText = '';
+      }
+      return;
+    }
+    currentText += line + '\n';
+  });
+
+  elements.push(MarkdownText(currentText + '\n', idx));
+
+  return elements;
+}
+
+function MarkdownText(text: string, idx: number): JSX.Element {
+  return (
+    <div id={`msg-${idx}`}>
+      <Markdown renderer={UI5Renderer}>{text}</Markdown>
+    </div>
+  );
+}