feat: add markdown support via markdown-editor-add-on

Closes #23

Author: mlopezFC

pom.xml

@@ -18,6 +18,7 @@
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.12</jetty.version>
 		<flowingcode.commons.demo.version>3.10.0</flowingcode.commons.demo.version>
+		<markdown-editor.version>1.0.0</markdown-editor.version>	
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 
@@ -127,6 +128,11 @@
 			<artifactId>vaadin-core</artifactId>
 			<optional>true</optional>
 		</dependency>
+		<dependency>
+			<groupId>com.flowingcode.vaadin.addons</groupId>
+			<artifactId>markdown-editor-addon</artifactId>
+			<version>${markdown-editor.version}</version>
+		</dependency>
 		<dependency>
 			<groupId>org.projectlombok</groupId>
 			<artifactId>lombok</artifactId>

src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java

@@ -74,21 +74,28 @@ public class ChatAssistant extends Div {
    * Default constructor. Creates a ChatAssistant with no messages.
    */
   public ChatAssistant() {
-    this(new ArrayList<>());
+    this(new ArrayList<>(), false);
   }
 
+  /**
+   * Default constructor. Creates a ChatAssistant with no messages.
+   */
+  public ChatAssistant(boolean markdownEnabled) {
+    this(new ArrayList<>(), markdownEnabled);
+  }
+  
   /**
    * Creates a ChatAssistant with the given list of messages.
    * 
    * @param messages the list of messages
    */
-  public ChatAssistant(List<Message> messages) {
+  public ChatAssistant(List<Message> messages, Boolean markdownEnabled) {
     this.messages = messages;
     content.getElement().setAttribute("slot", "content");
     content.setItems(messages);
 
     content.setRenderer(new ComponentRenderer<ChatMessage, Message>(
-        message -> new ChatMessage(message), (component, message) -> {
+        message -> new ChatMessage(message, markdownEnabled), (component, message) -> {
           ((ChatMessage) component).setMessage(message);
           return component;
         }));

src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatMessage.java

@@ -20,6 +20,8 @@
 package com.flowingcode.vaadin.addons.chatassistant;
 
 import com.flowingcode.vaadin.addons.chatassistant.model.Message;
+import com.flowingcode.vaadin.addons.markdown.BaseMarkdownComponent.DataColorMode;
+import com.flowingcode.vaadin.addons.markdown.MarkdownViewer;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.Tag;
@@ -42,14 +44,16 @@
 public class ChatMessage extends Component implements HasComponents {
 
   private Message message;
+  private boolean markdownEnabled;
   private Div loader;
 
   /**
    * Creates a new ChatMessage based on the supplied message.
    * 
    * @param message message used to populate the ChatMessage instance
    */
-  public ChatMessage(Message message) {
+  public ChatMessage(Message message, Boolean markdownEnabled) {
+    this.markdownEnabled = markdownEnabled;
     setMessage(message);
   }
 
@@ -83,7 +87,13 @@ private void updateLoadingState(Message message) {
         this.remove(loader);
         loader = null;
       }
-      this.getElement().executeJs("this.appendChild(document.createTextNode($0));", message.getContent());
+      if (markdownEnabled) {
+        MarkdownViewer mdv = new MarkdownViewer(message.getContent());
+        mdv.setDataColorMode(DataColorMode.LIGTH);
+        this.add(mdv);
+      } else {
+        this.getElement().executeJs("this.appendChild(document.createTextNode($0));", message.getContent());
+      }
     }
   }
 

src/main/resources/META-INF/frontend/styles/chat-message-styles.css

@@ -88,3 +88,18 @@
     font-family: var(--lumo-font-family);
     color: var(--lumo-secondary-text-color);
 }
+
+.wmde-markdown {
+    height: 100%;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    display: flex;
+    flex-direction: column;
+    background: none !important;
+}
+
+.language-mermaid {
+	padding: 0px !important;
+}

src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantDemoView.java

@@ -34,6 +34,7 @@ public class ChatAssistantDemoView extends TabbedDemo {
   public ChatAssistantDemoView() {
     addDemo(ChatAssistantDemo.class);
     addDemo(ChatAssistantLazyLoadingDemo.class);
+    addDemo(ChatAssistantMarkdownDemo.class);
     setSizeFull();
   }
 }

src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantMarkdownDemo.java

@@ -0,0 +1,73 @@
+/*-
+ * #%L
+ * Chat Assistant Add-on
+ * %%
+ * Copyright (C) 2023 - 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.chatassistant;
+
+import com.flowingcode.vaadin.addons.chatassistant.model.Message;
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.flowingcode.vaadin.addons.demo.SourcePosition;
+import com.google.common.base.Strings;
+import com.vaadin.flow.component.UI;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+import java.time.LocalDateTime;
+import java.util.Timer;
+
+@DemoSource(sourcePosition = SourcePosition.PRIMARY)
+@PageTitle("Markdown Demo")
+@SuppressWarnings("serial")
+@Route(value = "chat-assistant/markdown-demo", layout = ChatAssistantDemoView.class)
+@CssImport("./styles/chat-assistant-styles-demo.css")
+public class ChatAssistantMarkdownDemo extends VerticalLayout {
+  
+  public ChatAssistantMarkdownDemo() {
+    ChatAssistant chatAssistant = new ChatAssistant(true);
+    TextArea message = new TextArea();
+    message.setLabel("Enter a message from the assistant (try using Markdown)");
+    message.setSizeFull();
+    message.addKeyPressListener(ev->{
+      if (Strings.isNullOrEmpty(chatAssistant.getWhoIsTyping())) {
+        chatAssistant.setWhoIsTyping("Assistant is generating an answer ...");
+      }
+    });
+    message.addBlurListener(ev->chatAssistant.clearWhoIsTyping());
+
+    Button chat = new Button("Chat");
+    chat.addClickListener(ev -> {
+      Message m = Message.builder().content(message.getValue()).messageTime(LocalDateTime.now())
+          .name("Assistant").avatar("chatbot.png").build();
+
+      chatAssistant.sendMessage(m);
+      message.clear();
+    });
+    chatAssistant.sendMessage(Message.builder().content("**Hello, I am here to assist you**")
+        .messageTime(LocalDateTime.now())
+        .name("Assistant").avatar("chatbot.png").build());
+
+    add(message, chat, chatAssistant);
+  }
+}