feat: add initial implementation

README.md

@@ -1,22 +1,24 @@
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/template-addon)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/app-layout-addon.svg)](https://vaadin.com/directory/component/template-addon)
-[![Build Status](https://jenkins.flowingcode.com/job/template-addon/badge/icon)](https://jenkins.flowingcode.com/job/template-addon)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/chat-assistant)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/app-layout-addon.svg)](https://vaadin.com/directory/component/chat-assistant)
+[![Build Status](https://jenkins.flowingcode.com/job/ChatAssistant-addon/badge/icon)](https://jenkins.flowingcode.com/job/ChatAssistant-addon)
 
-# Template Add-on
+# Chat Assistant Add-on
 
-This is a template project for building new Vaadin 24 add-ons
+Vaadin Add-on that displays a chat assistant floating window using [wc-chatbot](https://github.com/yishiashia/wc-chatbot).
 
 ## Features
 
-* List the features of your add-on in here
+* Messages can be sent by the user or programmatically.
+* Listen for new messages written by the user.
+* Toggle the chat window on/off.
 
 ## Online demo
 
-[Online demo here](http://addonsv24.flowingcode.com/template)
+[Online demo here](http://addonsv24.flowingcode.com/chat-assistant)
 
 ## Download release
 
-[Available in Vaadin Directory](https://vaadin.com/directory/component/template-addon)
+[Available in Vaadin Directory](https://vaadin.com/directory/component/chat-assistant)
 
 ### Maven install
 
@@ -25,7 +27,7 @@ Add the following dependencies in your pom.xml file:
 ```xml
 <dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
-   <artifactId>template-addon</artifactId>
+   <artifactId>chat-assistant-addon</artifactId>
    <version>X.Y.Z</version>
 </dependency>
 ```
@@ -49,7 +51,7 @@ To see the demo, navigate to http://localhost:8080/
 
 ## Release notes
 
-See [here](https://github.com/FlowingCode/TemplateAddon/releases)
+See [here](https://github.com/FlowingCode/ChatAssistant/releases)
 
 ## Issue tracking
 
@@ -74,13 +76,30 @@ Then, follow these steps for creating a contibution:
 
 This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.
 
-TEMPLATE_ADDON is written by Flowing Code S.A.
+Chat Assistant Add-on is written by Flowing Code S.A.
 
 # Developer Guide
 
 ## Getting started
 
-Add your code samples in this section
+Simple example showing the basic options:
+
+	ChatAssistant chatAssistant = new ChatAssistant();
+	TextArea message = new TextArea();
+	message.setLabel("Enter a message from the assistant");
+	message.setSizeFull();
+
+	Button chat = new Button("Chat");
+	chat.addClickListener(ev->{
+	  Message m = new Message(message.getValue(),false,false,0,false,new Sender("Assistant","1","https://ui-avatars.com/api/?name=Bot"));
+	  chatAssistant.sendMessage(m);
+	  message.clear();
+	});
+	chatAssistant.sendMessage(new Message("Hello, I am here to assist you",false,false,0,false,new Sender("Assistant","1","https://ui-avatars.com/api/?name=Bot")));
+	chatAssistant.toggle();
+	chatAssistant.addChatSentListener(ev->{
+		Notification.show(ev.getMessage());
+	});
 
 ## Special configuration when using Spring
 

pom.xml

@@ -5,10 +5,10 @@
 	<modelVersion>4.0.0</modelVersion>
 
 	<groupId>org.vaadin.addons.flowingcode</groupId>
-	<artifactId>template-addon</artifactId>
+	<artifactId>chat-assistant-addon</artifactId>
 	<version>1.0.0-SNAPSHOT</version>
-	<name>Template Add-on</name>
-	<description>Template Add-on for Vaadin Flow</description>
+	<name>Chat Assistant Add-on</name>
+	<description>Chat Assistant Add-on for Vaadin Flow</description>
 
 	<properties>
         <vaadin.version>24.1.2</vaadin.version>
@@ -19,7 +19,7 @@
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<drivers.dir>${project.basedir}/drivers</drivers.dir>
 		<jetty.version>11.0.12</jetty.version>
-		<flowingcode.commons.demo.version>3.6.0</flowingcode.commons.demo.version>
+		<flowingcode.commons.demo.version>3.7.1</flowingcode.commons.demo.version>
 		<frontend.hotdeploy>true</frontend.hotdeploy>
 	</properties>
 
@@ -123,6 +123,12 @@
 			<groupId>com.vaadin</groupId>
 			<artifactId>vaadin-core</artifactId>
 		</dependency>
+		<dependency>
+			<groupId>org.projectlombok</groupId>
+			<artifactId>lombok</artifactId>
+			<scope>provided</scope>
+			<version>1.18.28</version>
+		</dependency>
 		<dependency>
 			<groupId>org.slf4j</groupId>
 			<artifactId>slf4j-simple</artifactId>
@@ -154,7 +160,7 @@
 		<dependency>
 			<groupId>io.github.bonigarcia</groupId>
 			<artifactId>webdrivermanager</artifactId>
-            <version>5.1.1</version>
+            <version>5.4.1</version>
 			<scope>test</scope>
 		</dependency>
 	</dependencies>
@@ -173,14 +179,6 @@
 					<artifactId>maven-deploy-plugin</artifactId>
 					<version>2.8.2</version>
 				</plugin>
-				<plugin>
-					<groupId>org.apache.maven.plugins</groupId>
-					<artifactId>maven-surefire-plugin</artifactId>
-					<version>2.22.1</version>
-					<configuration>
-						<useSystemClassLoader>false</useSystemClassLoader>
-					</configuration>
-				</plugin>
 			</plugins>
 		</pluginManagement>
 
@@ -242,7 +240,6 @@
 					<webApp>
 						<resourceBases>
 							<resourceBase>src/test/resources/META-INF/resources</resourceBase>
-							<resourceBase>src/main/resources/META-INF/resources</resourceBase>
 						</resourceBases>
 					</webApp>
 					<supportedPackagings>

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

@@ -0,0 +1,112 @@
+/*-
+ * #%L
+ * Chat Assistant Add-on
+ * %%
+ * Copyright (C) 2023 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.vaadin.flow.component.ComponentEvent;
+import com.vaadin.flow.component.ComponentEventListener;
+import com.vaadin.flow.component.DomEvent;
+import com.vaadin.flow.component.EventData;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.shared.Registration;
+
+/**
+ * Component that allows to create a floating chat button that will open a chat window that can be
+ * used to provide a chat assistant feature.
+ *
+ * @author mmlopez
+ */
+@SuppressWarnings("serial")
+@NpmPackage(value = "wc-chatbot", version = "0.1.1")
+@JsModule("wc-chatbot/dist/wc-chatbot.js")
+@CssImport("./styles/chat-assistant-styles.css")
+@Tag("chat-bot")
+public class ChatAssistant extends Div {
+
+  /**
+   * Sends a message represented by the string message programmatically to the component, with
+   * default settings.
+   *
+   * @param message
+   */
+  public void sendMessage(String message) {
+    sendMessage(Message.builder().content(message).build());
+  }
+
+  /** Shows or hides the chat window */
+  public void toggle() {
+    getElement().executeJs("setTimeout(() => {this.toggle();})");
+  }
+
+  /**
+   * Sends a message to the component, by using the supplied Message object.
+   *
+   * @param message
+   */
+  public void sendMessage(Message message) {
+    getElement()
+        .executeJs(
+            "setTimeout(() => {debugger;this.sendMessage(null, JSON.parse($0));})", message.getJsonObject().toJson());
+  }
+
+  /**
+   * Adds a listener that will be notified when the ChatSentEvent is fired, allowing to react when a
+   * message is sent by the user or programmatically.
+   *
+   * @param listener
+   * @return Registration object to allow removing the listener
+   */
+  public Registration addChatSentListener(ComponentEventListener<ChatSentEvent> listener) {
+    return addListener(ChatSentEvent.class, listener);
+  }
+
+  /**
+   * Event that represents a chat being sent to the component.
+   *
+   * @author mmlopez
+   */
+  @DomEvent("sent")
+  public static class ChatSentEvent extends ComponentEvent<ChatAssistant> {
+    private final String message;
+    private boolean right;
+
+    public ChatSentEvent(
+        ChatAssistant source,
+        boolean fromClient,
+        @EventData("event.detail.message.message") String message,
+        @EventData("event.detail.message.right") boolean right) {
+      super(source, fromClient);
+      this.message = message.replaceAll("^<[^>]+>|<[^>]+>$", "");
+      this.right = right;
+    }
+
+    public String getMessage() {
+      return message;
+    }
+
+    public boolean isRight() {
+      return right;
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+/*-
+ * #%L
+ * Chat Assistant Add-on
+ * %%
+ * Copyright (C) 2023 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 java.util.Optional;
+import elemental.json.Json;
+import elemental.json.JsonObject;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.Setter;
+
+/**
+ * Class that represents a chat message. It contains several configurations to control the
+ * appearance of the message, such as:
+ *
+ * <ul>
+ *   <li>continued: when true, the message is continued with the previous one.
+ *   <li>right: when true, the message is aligned to the right.
+ *   <li>delay: it can show some delay before being sent.
+ *   <li>loading: it can show a loading image before showing the message.
+ *   <li>sender: it allows to specify the sender.
+ * </ul>
+ *
+ * @author mmlopez
+ */
+@Getter
+@Setter
+@Builder
+public class Message {
+
+  private String content;
+  private boolean continued;
+  private boolean right;
+  @Builder.Default
+  private Integer delay = 0;
+  private boolean loading;
+  private Sender sender;
+
+  public JsonObject getJsonObject() {
+    JsonObject result = Json.createObject();
+    result.put("message", content);
+    result.put("continued", continued);
+    result.put("right", right);
+    Optional.ofNullable(delay).ifPresent(value->result.put("delay", delay));
+    result.put("loading", loading);
+    Optional.ofNullable(sender).ifPresent(value->result.put("sender", sender.getJsonObject()));
+    return result;
+  }
+
+}

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

@@ -0,0 +1,58 @@
+/*-
+ * #%L
+ * Chat Assistant Add-on
+ * %%
+ * Copyright (C) 2023 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 java.util.Optional;
+import elemental.json.Json;
+import elemental.json.JsonObject;
+import elemental.json.JsonValue;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.Setter;
+
+/**
+ * Class that represents a chat message sender:
+ *
+ * <ul>
+ *   <li>name: The name of the sender.
+ *   <li>id: a special id to identify the sender.
+ *   <li>avatar: an image that represents the sender.
+ * </ul>
+ *
+ * @author mmlopez
+ */
+@Getter
+@Setter
+@Builder
+public class Sender {
+
+  private String name;
+  private String id;
+  private String avatar;
+
+  public JsonValue getJsonObject() {
+    JsonObject result = Json.createObject();
+    Optional.ofNullable(name).ifPresent(value->result.put("name", name));
+    Optional.ofNullable(id).ifPresent(value->result.put("id", id));
+    Optional.ofNullable(avatar).ifPresent(value->result.put("avatar", avatar));
+    return result;
+  }
+
+}