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 3716cae..dfa7d45 100644 --- a/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java +++ b/src/main/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistant.java @@ -135,8 +135,10 @@ public class ChatAssistant extends Div { private static final String RESIZE_INDICATOR_VISIBLE_CLASS = "fc-chat-assistant-resize-indicator-visible"; // Theme-agnostic token fallback chains (Lumo token, then Aura token, then a literal) so the badge // renders correctly under both the Lumo and Aura themes of Vaadin 25. - private static final String DEFAULT_UNREAD_BADGE_BACKGROUND ="var(--lumo-warning-color, var(--aura-accent-yellow, #e07a00))"; + private static final String DEFAULT_UNREAD_BADGE_BACKGROUND ="var(--lumo-warning-color, var(--aura-accent-color, #e07a00))"; private static final String DEFAULT_UNREAD_BADGE_COLOR = "var(--lumo-warning-contrast-color, var(--aura-accent-contrast-color, #ffffff))"; + // Aura accent class that makes the badge yellow, with matching contrast text. + private static final String UNREAD_BADGE_AURA_CLASS = "aura-accent-yellow"; // Shared spacing/typography tokens used for the badge, with the same cross-theme fallback pattern. private static final String BADGE_FONT_SIZE = "var(--lumo-font-size-xs, var(--aura-font-size-s, 0.75rem))"; private static final String BADGE_PADDING = "var(--lumo-space-xs, var(--vaadin-padding-xs, 0.25rem))"; @@ -394,7 +396,7 @@ private void setUI( setFabSize(DEFAULT_FAB_SIZE); unreadBadge.setText(String.valueOf(unreadMessages)); - unreadBadge.addClassName(DEFAULT_UNREAD_BADGE_CLASS); + unreadBadge.addClassNames(DEFAULT_UNREAD_BADGE_CLASS, UNREAD_BADGE_AURA_CLASS); unreadBadge .getStyle() .setTextAlign(Style.TextAlign.CENTER) diff --git a/src/main/resources/META-INF/resources/frontend/styles/fc-chat-assistant-style.css b/src/main/resources/META-INF/resources/frontend/styles/fc-chat-assistant-style.css index 881e434..453d7a0 100644 --- a/src/main/resources/META-INF/resources/frontend/styles/fc-chat-assistant-style.css +++ b/src/main/resources/META-INF/resources/frontend/styles/fc-chat-assistant-style.css @@ -22,15 +22,15 @@ .fc-chat-assistant-fab { cursor: pointer; transform: scale(1); - /* Cross-theme fallback: Lumo token, then a literal shadow (Aura has no equivalent scale token). */ - box-shadow: var(--lumo-box-shadow-m, 0 2px 6px rgba(0, 0, 0, 0.2)); + /* Cross-theme fallback: Lumo token, then Aura token, then a literal shadow. */ + box-shadow: var(--lumo-box-shadow-m, var(--aura-shadow-s, 0 2px 6px rgba(0, 0, 0, 0.2))); } /* Expansion state when being dragged */ .fc-chat-assistant-fab.dragging { cursor: grabbing; transform: scale(1.15); - box-shadow: var(--lumo-box-shadow-xl, 0 8px 24px rgba(0, 0, 0, 0.3)); + box-shadow: var(--lumo-box-shadow-xl, var(--aura-shadow-m, 0 8px 24px rgba(0, 0, 0, 0.3))); } .fc-chat-assistant-popover { @@ -53,8 +53,8 @@ share one rule. */ vaadin-popover-overlay.fc-chat-assistant-popover::part(overlay), vaadin-popover.fc-chat-assistant-popover::part(overlay) { - /* Cross-theme fallback: Lumo radius token, then Aura base radius, then a literal. */ - border-radius: var(--lumo-border-radius-l, var(--aura-base-radius, 12px)); + /* Cross-theme fallback: Lumo radius token, then the Vaadin 25 radius token, then a literal. */ + border-radius: var(--lumo-border-radius-l, var(--vaadin-radius-l, 12px)); } /* The chat overlay fills this part; the part already clamps itself to the viewport @@ -77,6 +77,8 @@ vaadin-popover.fc-chat-assistant-popover::part(content) { /* Likewise, the Vaadin 25 (vaadin-dialog) and Vaadin 24 (vaadin-dialog-overlay) dialog selectors. */ vaadin-dialog.fc-chat-assistant-dialog::part(content), vaadin-dialog-overlay.fc-chat-assistant-dialog::part(content) { + /* Aura and the base styles default to content-box, which pushed the padding past the dialog */ + box-sizing: border-box; height: 100%; width: 100%; display: flex; @@ -106,7 +108,7 @@ vaadin-dialog-overlay.fc-chat-assistant-dialog::part(content) { /* filled triangle pointing right by default; rotated per direction below */ border-top: 5px solid transparent; border-bottom: 5px solid transparent; - border-left: 7px solid var(--lumo-contrast-20pct, var(--aura-border-color, rgba(0, 0, 0, 0.2))); + border-left: 7px solid var(--lumo-contrast-20pct, var(--vaadin-border-color, rgba(0, 0, 0, 0.2))); } /* Feature enabled (overlay class) AND this resizer is draggable now (can-drag on the resizer). */ diff --git a/src/main/resources/META-INF/resources/frontend/styles/fc-chat-message-styles.css b/src/main/resources/META-INF/resources/frontend/styles/fc-chat-message-styles.css index 948419c..ce14da1 100644 --- a/src/main/resources/META-INF/resources/frontend/styles/fc-chat-message-styles.css +++ b/src/main/resources/META-INF/resources/frontend/styles/fc-chat-message-styles.css @@ -18,8 +18,7 @@ * #L% */ .lds-ellipsis { - /* change color here */ - color: #1c4c5b; + color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary, #1c4c5b)); } .lds-ellipsis, .lds-ellipsis div { @@ -83,6 +82,7 @@ .chat-assistant-who-is-typing { width: 100%; + box-sizing: border-box; padding: var(--lumo-space-xs, var(--vaadin-padding-xs, 0.25rem)); font-size: var(--lumo-font-size-xs, var(--aura-font-size-s, small)); color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary, #697177)); @@ -97,5 +97,5 @@ vaadin-markdown.fc-chat-message-markdown > :last-child { margin-bottom: 0; } vaadin-markdown.fc-chat-message-markdown > * + * { - margin-top: var(--lumo-space-s, 0.5rem); + margin-top: var(--lumo-space-s, var(--vaadin-gap-s, 0.5rem)); } diff --git a/src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantLazyLoadingDemo.java b/src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantLazyLoadingDemo.java index 133eee9..f295599 100644 --- a/src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantLazyLoadingDemo.java +++ b/src/test/java/com/flowingcode/vaadin/addons/chatassistant/ChatAssistantLazyLoadingDemo.java @@ -50,9 +50,9 @@ public ChatAssistantLazyLoadingDemo() { // Backing message list, served lazily by the data provider below. List messages = createMessages(); - // Create the assistant; the "small" class shrinks the message font (see demo CSS). + // Create the assistant; the "compact" class shrinks the message font (see demo CSS). ChatAssistant chatAssistant = new ChatAssistant<>(); - chatAssistant.setClassName("small"); + chatAssistant.setClassName("compact"); SvgIcon icon = new SvgIcon("chatbot.svg"); icon.setColor("currentColor"); chatAssistant.setFabIcon(icon); diff --git a/src/test/resources/META-INF/frontend/styles/chat-assistant-styles-demo.css b/src/test/resources/META-INF/frontend/styles/chat-assistant-styles-demo.css index 7ff15c7..2602de6 100644 --- a/src/test/resources/META-INF/frontend/styles/chat-assistant-styles-demo.css +++ b/src/test/resources/META-INF/frontend/styles/chat-assistant-styles-demo.css @@ -17,11 +17,12 @@ * limitations under the License. * #L% */ - animated-fab { - --chatbot-avatar-img: url(chatbot.png); - --chatbot-avatar-bg-color: white; + /* chatbot.png is a dark icon on a transparent background: keep the theme background in light + mode and switch to white in dark mode so it stays visible */ + vaadin-message[user-img="chatbot.png"] > vaadin-avatar { + --vaadin-avatar-background: light-dark(var(--vaadin-background-container-strong), white); } - animated-fab.small vaadin-message { - font-size: var(--lumo-font-size-xxs); + animated-fab.compact vaadin-message { + font-size: var(--lumo-font-size-xxs, var(--aura-font-size-xs, 0.75rem)); }