build!:update markdowneditor to 2.0.1 fix:fix update message implementation and feat(demo):add generative ai simulation demo

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
 	<artifactId>chat-assistant-addon</artifactId>
-	<version>3.0.1-SNAPSHOT</version>
+	<version>4.0.0-SNAPSHOT</version>
 	<name>Chat Assistant Add-on</name>
 	<description>Chat Assistant Add-on for Vaadin Flow</description>
 
@@ -18,7 +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.1.0</markdown-editor.version>	
+		<markdown-editor.version>2.0.1</markdown-editor.version>	
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 

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

@@ -45,7 +45,6 @@
 import com.vaadin.flow.data.renderer.Renderer;
 import com.vaadin.flow.function.SerializableSupplier;
 import com.vaadin.flow.shared.Registration;
-
 import java.time.LocalDateTime;
 import java.util.ArrayList;
 import java.util.List;
@@ -70,7 +69,6 @@
 public class ChatAssistant<T extends Message> extends ReactAdapterComponent implements ClickNotifier<ChatAssistant<T>> {
 
   private static final String CHAT_HEADER_CLASS_NAME = "chat-header";
-  private static final String PADDING_SMALL = "0.5em";
 
   private Component headerComponent;
   private VerticalLayout container;

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

@@ -20,7 +20,6 @@
 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;
@@ -46,6 +45,7 @@ public class ChatMessage<T extends Message> extends Component implements HasComp
   private T message;
   private boolean markdownEnabled;
   private Div loader;
+  private MarkdownViewer markdownViewer;
 
   /**
    * Creates a new ChatMessage based on the supplied message without markdown support.
@@ -64,6 +64,14 @@ public ChatMessage(T message) {
    */
   public ChatMessage(T message, boolean markdownEnabled) {
     this.markdownEnabled = markdownEnabled;
+    loader = new Div(new Div(),new Div(), new Div(), new Div());
+    loader.setClassName("lds-ellipsis");
+    loader.setVisible(false);
+    this.add(loader);
+    if (markdownEnabled) {
+      markdownViewer = new MarkdownViewer(message.getContent());
+      this.add(markdownViewer);
+    }
     setMessage(message);
   }
 
@@ -74,7 +82,7 @@ public ChatMessage(T message, boolean markdownEnabled) {
    */
   public void setMessage(T message) {
     this.message = message;
-    updateLoadingState(message);
+    updateMessage(message);
     if (message.getName()!=null) {
       this.setUserName(message.getName());
       if (message.getAvatar()!=null) {
@@ -87,21 +95,17 @@ public void setMessage(T message) {
     }
   }
 
-  private void updateLoadingState(T message) {
-    if (message.isLoading()) {
-      loader = new Div(new Div(),new Div(), new Div(), new Div());
-      loader.setClassName("lds-ellipsis");
-      this.add(loader);
-    } else {
-      if (loader!=null) {
-        this.remove(loader);
-        loader = null;
-      }
+  /**
+   * Updates the displayed message content and loading state.
+   * @param message
+   */
+  private void updateMessage(T message) {
+    loader.setVisible(message.isLoading());
+    if (!message.isLoading()) {
       if (markdownEnabled) {
-        MarkdownViewer mdv = new MarkdownViewer(message.getContent());
-        mdv.setDataColorMode(DataColorMode.LIGHT);
-        this.add(mdv);
+        markdownViewer.setContent(message.getContent());
       } else {
+        this.getElement().executeJs("[...this.childNodes].forEach(node => node.nodeType === 3 && this.removeChild(node));");
         this.getElement().executeJs("this.appendChild(document.createTextNode($0));", message.getContent());
       }
     }

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

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

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

@@ -0,0 +1,143 @@
+/*-
+ * #%L
+ * Chat Assistant Add-on
+ * %%
+ * Copyright (C) 2023 - 2025 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.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.avatar.Avatar;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.component.textfield.TextArea;
+import com.vaadin.flow.data.renderer.ComponentRenderer;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+import java.time.LocalDateTime;
+import java.util.Arrays;
+import java.util.concurrent.CompletableFuture;
+import java.util.concurrent.ThreadLocalRandom;
+import java.util.concurrent.TimeUnit;
+import java.util.stream.Stream;
+
+@DemoSource(sourcePosition = SourcePosition.PRIMARY)
+@PageTitle("Generative Answer Demo")
+@SuppressWarnings("serial")
+@Route(value = "chat-assistant/generative-demo", layout = ChatAssistantDemoView.class)
+@CssImport("./styles/chat-assistant-styles-demo.css")
+public class ChatAssistantGenerativeDemo extends VerticalLayout {
+
+  public ChatAssistantGenerativeDemo() {
+    String sampleText = "Hi, I'm an advanced language model. I'm here to help you demonstrate"
+        + " how a text-streaming chat component works in Vaadin. As you can see, each word appears"
+        + " with a slight pause, simulating the time it would take me to \"think\" and generate"
+        + " the next word. I hope this is useful for your demonstration!";
+
+    ChatAssistant<CustomMessage> chatAssistant = new ChatAssistant<>();
+    chatAssistant.setAvatarProvider(()->new Avatar("Chat Assistant","chatbot.png"));
+    TextArea message = new TextArea();
+    message.setLabel("Enter a message from the assistant");
+    message.setSizeFull();
+    message.setValue(sampleText);
+    message.addKeyPressListener(ev->{
+      if (Strings.isNullOrEmpty(chatAssistant.getWhoIsTyping())) {
+        chatAssistant.setWhoIsTyping("Assistant is generating an answer ...");
+      }
+    });
+    message.addBlurListener(ev->chatAssistant.clearWhoIsTyping());
+    chatAssistant.setMessagesRenderer(new ComponentRenderer<CustomChatMessage,CustomMessage>(m -> {
+      return new CustomChatMessage(m); 
+    },
+        (component, m) -> {
+          ((CustomChatMessage) component).setMessage(m);
+          return component;
+        }));
+    chatAssistant.setSubmitListener(se -> {
+      chatAssistant.sendMessage(CustomMessage.builder().messageTime(LocalDateTime.now())
+          .name("User").content(se.getValue()).tagline("Generated by user").build());
+    });
+
+    Button chat = new Button("Chat");
+    chat.addClickListener(ev -> {
+      CustomMessage m = CustomMessage.builder().content(message.getValue()).messageTime(LocalDateTime.now())
+          .name("Assistant").avatar("chatbot.png").tagline("Generated by assistant").build();
+
+      chatAssistant.sendMessage(m);
+      message.clear();
+    });
+    Button chatWithThinking = new Button("Chat With Generative Thinking");
+    chatWithThinking.addClickListener(ev -> {
+      String messageToSend = message.getValue();
+      CustomMessage delayedMessage = CustomMessage.builder().loading(true).content("")
+          .messageTime(LocalDateTime.now())
+          .name("Assistant").avatar("chatbot.png").tagline("Generated by assistant").build();
+
+      UI currentUI = UI.getCurrent();
+      chatAssistant.sendMessage(delayedMessage);
+
+      CompletableFuture.runAsync(() -> {
+        try {
+          TimeUnit.MILLISECONDS.sleep(500);
+          currentUI.access(() -> {
+            delayedMessage.setLoading(false);
+          });
+          streamWords(messageToSend)
+          .forEach(item -> {
+            currentUI.access(() -> {
+              delayedMessage.setContent(delayedMessage.getContent() + item);
+              chatAssistant.updateMessage(delayedMessage); 
+            });
+          });
+        } catch (InterruptedException e) {
+          Thread.currentThread().interrupt();
+        }
+      });
+
+      message.clear();
+    });
+    chatAssistant.sendMessage(CustomMessage.builder().content("Hello, I am here to assist you")
+        .messageTime(LocalDateTime.now())
+        .name("Assistant").avatar("chatbot.png").tagline("Generated by assistant").build());
+
+    add(message, chat, chatWithThinking, chatAssistant);
+  }
+
+  public Stream<String> streamWords(String fullText) {
+    if (fullText == null || fullText.isEmpty()) {
+        return Stream.empty();
+    }
+
+    String[] words = fullText.split("\\s+");
+
+    return Arrays.stream(words)
+        .map(word -> {
+            try {
+                long delay = ThreadLocalRandom.current().nextLong(50, 250);
+                Thread.sleep(delay);
+            } catch (InterruptedException e) {
+                Thread.currentThread().interrupt(); 
+            }
+
+            return word + " ";
+        });
+}
+
+}