diff --git a/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java b/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java index dac7487..4524e16 100644 --- 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 content = new VirtualList<>(); @@ -93,6 +97,14 @@ public ChatAssistant(List 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", ""); 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 index 4b49022..b9bc597 100644 --- 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 index 2172cba..7bf57e8 100644 --- 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); }