feat: add support for display unread messages badge

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

@@ -189,7 +189,7 @@ private void initializeAvatar() {
     avatar.setSizeFull();
     this.getElement().appendChild(avatar.getElement());
     this.addAttachListener(ev -> this.getElement().executeJs("return;")
-        .then(ev2 -> this.getElement().executeJs("this.childNodes[1].childNodes[0].appendChild($0)", avatar.getElement())
+        .then(ev2 -> this.getElement().executeJs("this.childNodes[1].childNodes[0].childNodes[0].appendChild($0)", avatar.getElement())
             .then(ev3 -> chatWindow.setTarget(avatar))));
   }
 
@@ -385,5 +385,13 @@ public void setAvatarProvider(SerializableSupplier<Avatar> avatarProvider) {
     this.avatarProvider = avatarProvider;
     this.initializeAvatar();
   }
+
+  public Integer getUnreadMessages() {
+    return getState("unreadMessages", Integer.class);
+  }
+
+  public void setUnreadMessages(Integer unreadMessages) {
+    setState("unreadMessages",unreadMessages);
+  }
 
 }

src/main/resources/META-INF/frontend/react/animated-fab.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {useState} from 'react';
 import Draggable from 'react-draggable';
 import Fab from '@mui/material/Fab';
+import Badge from '@mui/material/Badge';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { ReactAdapterElement, type RenderHooks } from 'Frontend/generated/flow/ReactAdapter';
 
@@ -14,6 +15,12 @@ const lumoTheme = createTheme({
       dark: 'var(--lumo-primary-color-20pct)',
       contrastText: 'rgb(var(--lumo-primary-contrast-color))',
     },
+    warning: {
+        main: 'var(--lumo-warning-color)',
+        light: 'var(--lumo-warning-color-50pct)',
+        dark: 'var(--lumo-warning-color-20pct)',
+        contrastText: 'rgb(var(--lumo-warning-contrast-color))',
+    }
     },
     components: {
         MuiFab: {
@@ -36,6 +43,7 @@ class AnimatedFABElement extends ReactAdapterElement {
 
   protected override render(hooks: RenderHooks): ReactElement | null {
     const [isDragging, setIsDragging] = useState<boolean>(false);
+    const [unreadMessages, setUnreadMessages] = hooks.useState<integer>('unreadMessages');
     const eventControl = (event: { type: any; }) => {
         if (event.type === 'mousemove' || event.type === 'touchmove') {
           setIsDragging(true)
@@ -63,11 +71,13 @@ class AnimatedFABElement extends ReactAdapterElement {
               right: 16
             }}
           >
+          <Badge badgeContent={unreadMessages} color="warning" overlap="circular">
             <Fab
               color="primary"
               aria-label="open chat assistant"
             >
             </Fab>
+          </Badge>
           </div>
         </Draggable>
       </ThemeProvider>

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

@@ -33,4 +33,8 @@ vaadin-vertical-layout.chat-assistant-container-vertical-layout {
                                   Together, these two rotations position the resize handle in the upper-left corner.
                                   This new position is more suitable for resizing the chat window because the chat bubble 
                                   is positioned by default in the bottom-right of the view. */
+}
+
+.MuiBadge-badge {
+    z-index: 2000 !important;
 }

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

@@ -97,6 +97,8 @@ public void run() {
     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());
+
+    chatAssistant.setUnreadMessages(4);
 
     add(message, chat, chatWithThinking, chatAssistant);
   }