feat: override default web component header implementation

Replace default web component header implementation by a Vaadin based default one that can be replaced
FlowingCode · Sep 14, 2024 · c4a9cb8 · c4a9cb8
1 parent 393848e
commit c4a9cb8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java b/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java
@@ -30,8 +30,11 @@
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 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.messages.MessageInput;
 import com.vaadin.flow.component.messages.MessageInput.SubmitEvent;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.virtuallist.VirtualList;
 import com.vaadin.flow.data.provider.DataProvider;
@@ -55,6 +58,7 @@
 @Tag("chat-bot")
 public class ChatAssistant extends Div {
 
+  private static final String CHAT_HEADER_CLASS_NAME = "chat-header";
   private Component headerComponent;
   private Component footerComponent;
   private VirtualList<Message> content = new VirtualList<>();
@@ -93,6 +97,14 @@ public ChatAssistant(List<Message> messages) {
     vl.setPadding(false);
     this.setFooterComponent(vl);
     this.getElement().addEventListener("bot-button-clicked", this::handleClick).addEventData("event.detail");
+
+    Icon minimize = VaadinIcon.CHEVRON_DOWN_SMALL.create();
+    minimize.addClickListener(ev -> this.setMinimized(!minimized));
+    Span title = new Span("Chat Assistant");
+    title.setWidthFull();
+    HorizontalLayout headerBar = new HorizontalLayout(title, minimize);
+    headerBar.setWidthFull();
+    this.setHeaderComponent(headerBar);
   }
 
   private void handleClick(DomEvent event) {
@@ -231,6 +243,10 @@ public boolean isMinimized() {
    * @param component
    */
   public void setHeaderComponent(Component component) {
+    if (headerComponent!=null) {
+      this.remove(headerComponent);
+    }
+    component.addClassName(CHAT_HEADER_CLASS_NAME);
     this.headerComponent = component;
     this.getElement().executeJs("setTimeout(() => this.shadowRoot.querySelector($0).innerHTML = $1)", ".chatbot-header", "<slot name='header'></slot>");
     component.getElement().setAttribute("slot", "header");

diff --git a/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css b/src/main/resources/META-INF/frontend/styles/chat-assistant-styles.css
@@ -24,6 +24,12 @@
     --chatbot-header-title-color: var(--lumo-header-text-color);
     --chatbot-body-bg-color: var(--lumo-primary-color-10pct);
     --chatbot-send-button-color: var(--lumo-primary-color);
+    font-size: var(--lumo-font-size-l);
+    font-family: var(--lumo-font-family);	
+  }
+
+  chat-bot .chat-header {
+    color: var(--lumo-base-color);
   }
 
   chat-bot::part(chat-bubble) {

diff --git a/src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantDemo.java b/src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantDemo.java
@@ -88,13 +88,6 @@ public void run() {
     chatAssistant.sendMessage(Message.builder().content("Hello, I am here to assist you")
         .messageTime(LocalDateTime.now())
         .name("Assistant").avatar("chatbot.png").build());
-    Icon minimize = VaadinIcon.MINUS.create();
-    minimize.addClickListener(ev -> chatAssistant.setMinimized(!chatAssistant.isMinimized()));
-    Span title = new Span("Customized Assistant Header");
-    title.setWidthFull();
-    HorizontalLayout headerBar = new HorizontalLayout(title, minimize);
-    headerBar.setWidthFull();
-    chatAssistant.setHeaderComponent(headerBar);
 
     add(message, chat, chatWithThinking, chatAssistant);
   }