@reltio/design 0.1.1 → 0.2.1

package/components/AssistantLoader/AssistantLoader.module.css.js

@@ -1,33 +1,7 @@
 import styleInject from 'style-inject';
 import json from './AssistantLoader.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root with --reltio-assistant-loader- prefix */
-._root_lj6wo_1 {
-	--reltio-assistant-loader-size: 32px;
-
-	/* Dot dimensions scale with size */
-	--reltio-assistant-loader-dot-size: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.25
-	);
-	--reltio-assistant-loader-dot-radius: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.15625
-	);
-	--reltio-assistant-loader-dot-color: #8d8dc8;
-	--reltio-assistant-loader-dot-color-dimmed: rgba(152, 128, 255, 0.2);
-	--reltio-assistant-loader-dot-gap: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.375
-	);
-	--reltio-assistant-loader-dot-margin-left: calc(
-		var(--reltio-assistant-loader-size, 32px) *
-		0.625
-	);
-	--reltio-assistant-loader-dot-duration: 1s;
-	--reltio-assistant-loader-dot-delay-middle: 0.5s;
-	--reltio-assistant-loader-dot-delay-last: 1s;
-
+.AssistantLoader_root__L29wd {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
@@ -35,65 +9,59 @@ styleInject(`
 	box-sizing: border-box;
 }
 
-/* GIF container - uses CSS variable for size with fallback */
-._indicator_lj6wo_36 {
-	width: var(--reltio-assistant-loader-size, 32px);
-	height: var(--reltio-assistant-loader-size, 32px);
+.AssistantLoader_indicator__L29wd {
+	width: var(--size);
+	height: var(--size);
 	display: block;
 	object-fit: contain;
 }
 
-/* Dot flashing indicator - uses CSS variables from .root */
-._dotFlashing_lj6wo_44 {
+.AssistantLoader_dotFlashing__L29wd {
 	position: absolute;
-	left: calc(
-		var(--reltio-assistant-loader-size, 32px) +
-		var(--reltio-assistant-loader-dot-margin-left, 20px)
-	);
+	left: calc(var(--size) * 1.625);
 	bottom: 20%;
 	transform: translateY(50%);
-	width: var(--reltio-assistant-loader-dot-size, 8px);
-	height: var(--reltio-assistant-loader-dot-size, 8px);
-	border-radius: var(--reltio-assistant-loader-dot-radius, 5px);
-	background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
-	animation: _dotFlashing_lj6wo_44 var(--reltio-assistant-loader-dot-duration, 1s)
-		infinite linear alternate;
-	animation-delay: var(--reltio-assistant-loader-dot-delay-middle, 0.5s);
+	width: calc(var(--size) * 0.25);
+	height: calc(var(--size) * 0.25);
+	border-radius: calc(var(--size) * 0.15625);
+	background-color: var(--reltio-color-primary-soft);
+	animation: AssistantLoader_dotFlashing__L29wd 1s infinite linear alternate;
+	animation-delay: 0.5s;
 }
 
-._dotFlashing_lj6wo_44::before,
-._dotFlashing_lj6wo_44::after {
+.AssistantLoader_dotFlashing__L29wd::before,
+.AssistantLoader_dotFlashing__L29wd::after {
 	content: "";
 	position: absolute;
 	top: 0;
 	display: block;
-	width: var(--reltio-assistant-loader-dot-size, 8px);
-	height: var(--reltio-assistant-loader-dot-size, 8px);
-	border-radius: var(--reltio-assistant-loader-dot-radius, 5px);
-	background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
-	animation: _dotFlashing_lj6wo_44 var(--reltio-assistant-loader-dot-duration, 1s)
-		infinite alternate;
+	width: calc(var(--size) * 0.25);
+	height: calc(var(--size) * 0.25);
+	border-radius: calc(var(--size) * 0.15625);
+	background-color: var(--reltio-color-primary-soft);
+	animation: AssistantLoader_dotFlashing__L29wd 1s infinite alternate;
 }
 
-._dotFlashing_lj6wo_44::before {
-	left: calc(-1 * var(--reltio-assistant-loader-dot-gap, 12px));
+.AssistantLoader_dotFlashing__L29wd::before {
+	left: calc(var(--size) * -0.375);
 	animation-delay: 0s;
 }
 
-._dotFlashing_lj6wo_44::after {
-	left: var(--reltio-assistant-loader-dot-gap, 12px);
-	animation-delay: var(--reltio-assistant-loader-dot-delay-last, 1s);
+.AssistantLoader_dotFlashing__L29wd::after {
+	left: calc(var(--size) * 0.375);
+	animation-delay: 1s;
 }
 
-@keyframes _dotFlashing_lj6wo_44 {
+@keyframes AssistantLoader_dotFlashing__L29wd {
 	0% {
-		background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
+		background-color: var(--reltio-color-primary-soft);
 	}
 	50%,
 	100% {
-		background-color: var(
-			--reltio-assistant-loader-dot-color-dimmed,
-			rgba(152, 128, 255, 0.2)
+		background-color: color-mix(
+			in srgb,
+			var(--reltio-color-primary-soft) 20%,
+			transparent
 		);
 	}
 }

package/components/AssistantLoader/AssistantLoader.module.css.json

@@ -1 +1 @@
-{ "root": "_root_lj6wo_1", "indicator": "_indicator_lj6wo_36", "dotFlashing": "_dotFlashing_lj6wo_44" }
+{ "root": "AssistantLoader_root__L29wd", "indicator": "AssistantLoader_indicator__L29wd", "dotFlashing": "AssistantLoader_dotFlashing__L29wd" }

package/components/AssistantLoader/AssistantLoader.types.d.ts

@@ -1,16 +1,8 @@
-import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Props for the AssistantLoader component
  */
-export type AssistantLoaderProps = {
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Inline styles (e.g. for CSS variable overrides)
-     */
-    style?: React.CSSProperties & {
-        "--reltio-assistant-loader-size"?: string;
-    };
-} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;
+export type AssistantLoaderProps = HtmlProps<"div", {
+    /** Overall size of the loader (e.g. "32px", "2rem", "100%"). Defaults to 32px. */
+    size?: string;
+}>;

package/components/Button/Button.d.ts

@@ -5,5 +5,8 @@ import type { ButtonProps } from "./Button.types";
  * A flexible, accessible button component that supports multiple variants
  * (filled, outlined, text), color options (primary, secondary, inherited),
  * sizes, states, and can render as either a button or anchor element.
+ *
+ * Automatically switches to circular icon-only layout when children
+ * is a single React component element.
  */
-export declare const Button: ({ variant, color, size, disabled, fullWidth, children, className, onClick, href, type, "aria-label": ariaLabel, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, color, size, disabled, fullWidth, children, className, href, type, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Button/Button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { classNames } from "../../utils/classNames";
 import styles from "./Button.module.css";
 /**
@@ -8,8 +8,11 @@ import styles from "./Button.module.css";
  * A flexible, accessible button component that supports multiple variants
  * (filled, outlined, text), color options (primary, secondary, inherited),
  * sizes, states, and can render as either a button or anchor element.
+ *
+ * Automatically switches to circular icon-only layout when children
+ * is a single React component element.
  */
-export const Button = ({ variant = "filled", color = "inherited", size = "medium", disabled = false, fullWidth = false, children, className, onClick, href, type = "button", "aria-label": ariaLabel, ...rest }) => {
+export const Button = ({ variant = "filled", color = "inherited", size = "medium", disabled = false, fullWidth = false, children, className, href, type = "button", ...rest }) => {
     const buttonRef = useRef(null);
     // Remove focus when button becomes disabled
     useEffect(() => {
@@ -19,53 +22,15 @@ export const Button = ({ variant = "filled", color = "inherited", size = "medium
             buttonRef.current.blur();
         }
     }, [disabled]);
-    // Determine if button is interactive
-    const isInteractive = !disabled;
-    // Handle click events
-    const handleClick = (event) => {
-        if (!isInteractive) {
-            event.preventDefault();
-            return;
-        }
-        // Prevent navigation for disabled anchors
-        if (href && disabled) {
-            event.preventDefault();
-            return;
-        }
-        onClick?.(event);
-    };
-    // Handle keyboard events (Enter and Space)
-    const handleKeyDown = (event) => {
-        if (!isInteractive) {
-            event.preventDefault();
-            return;
-        }
-        // Enter and Space activate button
-        if (event.key === "Enter" || event.key === " ") {
-            if (event.key === " ") {
-                event.preventDefault(); // Prevent page scroll
-            }
-            if (href) {
-                // For anchors, trigger click
-                buttonRef.current?.click();
-            }
-            else {
-                // For buttons, trigger onClick
-                onClick?.(event);
-            }
-        }
-    };
-    // Compose className using classNames utility
-    const composedClassName = classNames(styles.root, styles[variant], styles[color], styles[size], disabled && styles.disabled, fullWidth && styles.fullWidth, className);
-    // ARIA attributes
-    const ariaAttributes = {
-        "aria-label": ariaLabel,
-        "aria-disabled": disabled ? true : undefined,
-    };
+    const isIconOnly = React.Children.count(children) === 1 &&
+        React.isValidElement(children) &&
+        typeof children.type !== "string" &&
+        children.type !== React.Fragment;
+    const composedClassName = classNames(styles.root, styles[variant], styles[color], styles[size], disabled && styles.disabled, fullWidth && styles.fullWidth, isIconOnly && styles.iconOnly, className);
     // Render as anchor if href is provided
     if (href) {
-        return (_jsx("a", { ref: buttonRef, href: disabled ? undefined : href, className: composedClassName, onClick: handleClick, onKeyDown: handleKeyDown, ...ariaAttributes, ...rest, children: children }));
+        return (_jsx("a", { ref: buttonRef, href: disabled ? undefined : href, className: composedClassName, "aria-disabled": disabled ? true : undefined, ...rest, children: children }));
     }
     // Render as button
-    return (_jsx("button", { ref: buttonRef, type: type, disabled: disabled, className: composedClassName, onClick: handleClick, onKeyDown: handleKeyDown, ...ariaAttributes, ...rest, children: children }));
+    return (_jsx("button", { ref: buttonRef, type: type, disabled: disabled, className: composedClassName, ...rest, children: children }));
 };

package/components/Button/Button.module.css.js

@@ -1,193 +1,150 @@
 import styleInject from 'style-inject';
 import json from './Button.module.css.json';
 styleInject(`
-/* CSS Custom Properties - All defined on .root (Principle IX) */
-._root_1lt78_1 {
-	/* Font tokens */
-	--reltio-button-font-family: var(
-		--reltio-font-family-body,
-		"Roboto",
-		sans-serif
-	);
-	--reltio-button-font-size: var(--reltio-font-size-body, 16px);
-	--reltio-button-font-weight: var(--reltio-font-weight-body, 500);
-	--reltio-button-line-height: var(--reltio-line-height-body, 1.5);
-	--reltio-button-letter-spacing: var(--reltio-letter-spacing-body, 0.15px);
-
-	/* Color tokens */
-	--reltio-button-color-background: #f5f5fa;
-	--reltio-button-color-primary: var(--reltio-color-primary, #0000cc);
-	--reltio-button-color-primary-text: var(--reltio-color-on-primary, #ffffff);
-	--reltio-button-color-text: var(--reltio-color-text, #0e0e25);
-
-	/* Spacing tokens */
-	--reltio-button-padding-x-small: var(--reltio-spacing-sm, 16px);
-	--reltio-button-padding-y-small: var(--reltio-spacing-xs, 8px);
-	--reltio-button-padding-x-medium: var(--reltio-spacing-md, 20px);
-	--reltio-button-padding-y-medium: var(--reltio-spacing-sm, 12px);
-	--reltio-button-padding-x-large: var(--reltio-spacing-lg, 32px);
-	--reltio-button-padding-y-large: var(--reltio-spacing-md, 16px);
-	--reltio-button-gap-x: var(--reltio-spacing-xs, 8px);
-
-	/* Size tokens */
-	--reltio-button-height-small: var(--reltio-spacing-xl, 32px);
-	--reltio-button-height-medium: var(--reltio-spacing-2xl, 40px);
-	--reltio-button-height-large: var(--reltio-spacing-3xl, 48px);
-
-	/* Border and shape */
-	--reltio-button-border-radius: 9999px; /* Fully rounded corners (pill shape) - Material Design 3 */
-	--reltio-button-border-width: 0;
-
-	/* Transitions */
-	--reltio-button-transition-duration: 200ms;
-	--reltio-button-transition-timing: ease;
-
-	/* Disabled state */
-	--reltio-button-disabled-opacity: 0.38;
-	--reltio-button-disabled-cursor: not-allowed;
-
-	/* Base styles */
+.Button_root__L29wd {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	gap: var(--reltio-button-gap-x);
-	border: var(--reltio-button-border-width) solid transparent;
-	border-radius: var(--reltio-button-border-radius);
+	gap: 8px;
+	border: 0 solid transparent;
+	border-radius: 9999px;
 	cursor: pointer;
-	font-family: var(--reltio-button-font-family);
-	font-size: var(--reltio-button-font-size);
-	font-weight: var(--reltio-button-font-weight);
-	line-height: var(--reltio-button-line-height);
-	letter-spacing: var(--reltio-button-letter-spacing);
+	font-family: "Roboto", sans-serif;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 1.5;
+	letter-spacing: 0.15px;
 	text-align: center;
 	text-decoration: none;
 	white-space: nowrap;
 	user-select: none;
-	transition: all var(--reltio-button-transition-duration)
-		var(--reltio-button-transition-timing);
+	transition: all 200ms ease;
 	box-sizing: border-box;
-	/* Remove default button styles */
 	background: none;
 	margin: 0;
 	padding: 0;
 
-	/* Focus visible state */
 	&:focus-visible {
-		outline: 2px solid var(--reltio-button-color-primary);
+		outline: 2px solid var(--reltio-color-primary);
 		outline-offset: 2px;
 	}
 
-	/* Disabled state */
 	&:disabled,
 	&[aria-disabled="true"] {
-		opacity: var(--reltio-button-disabled-opacity);
-		cursor: var(--reltio-button-disabled-cursor);
+		opacity: 0.38;
+		cursor: not-allowed;
 		pointer-events: none;
 	}
 }
 
-/* Style: Filled - base structure */
-._filled_1lt78_87 {
+/* Style: Filled */
+.Button_filled__L29wd {
 	border: none;
 }
 
-/* Style: Outlined - base structure */
-._outlined_1lt78_92 {
+/* Style: Outlined */
+.Button_outlined__L29wd {
 	background-color: transparent;
 	border: 1px solid;
 }
 
-/* Style: Text - base structure */
-._text_1lt78_98 {
+/* Style: Text */
+.Button_text__L29wd {
 	background-color: transparent;
 	border: none;
 }
 
 /* Filled + Primary */
-._filled_1lt78_87._primary_1lt78_104 {
-	background-color: var(--reltio-button-color-primary);
-	color: #fff;
+.Button_filled__L29wd.Button_primary__L29wd {
+	background-color: var(--reltio-color-primary);
+	color: var(--reltio-color-text-forced-white);
 
 	&:hover {
-		background-color: #006;
+		background-color: var(--reltio-color-primary-hover);
 	}
 }
 
 /* Filled + Inherited */
-._filled_1lt78_87._inherited_1lt78_114 {
-	background-color: var(--reltio-button-color-background);
-	color: var(--reltio-button-color-text);
+.Button_filled__L29wd.Button_inherited__L29wd {
+	background-color: var(--reltio-color-surface-2);
+	color: var(--reltio-color-text);
+}
+
+[data-theme="dark"] .Button_filled__L29wd.Button_inherited__L29wd {
+	border: 1px solid var(--reltio-color-border-2);
 }
 
 /* Outlined + Primary */
-._outlined_1lt78_92._primary_1lt78_104 {
-	border-color: var(--reltio-button-color-primary);
-	color: var(--reltio-button-color-primary);
+.Button_outlined__L29wd.Button_primary__L29wd {
+	border-color: var(--reltio-color-primary);
+	color: var(--reltio-color-primary);
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Outlined + Inherited */
-._outlined_1lt78_92._inherited_1lt78_114 {
-	/* Border and text color inherit from parent */
+.Button_outlined__L29wd.Button_inherited__L29wd {
 	border-color: currentColor;
 	color: inherit;
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Text + Primary */
-._text_1lt78_98._primary_1lt78_104 {
-	color: var(--reltio-button-color-primary);
+.Button_text__L29wd.Button_primary__L29wd {
+	color: var(--reltio-color-primary);
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Text + Inherited */
-._text_1lt78_98._inherited_1lt78_114 {
+.Button_text__L29wd.Button_inherited__L29wd {
 	color: inherit;
 
 	&:hover {
-		background-color: var(--reltio-button-color-background);
+		background-color: var(--reltio-color-surface-2);
 	}
 }
 
 /* Size: Small */
-._small_1lt78_159 {
-	min-height: var(--reltio-button-height-small);
-	padding: var(--reltio-button-padding-y-small)
-		var(--reltio-button-padding-x-small);
+.Button_small__L29wd {
+	min-height: 32px;
+	padding: 8px 12px;
 	font-size: 0.875rem;
 }
 
 /* Size: Medium */
-._medium_1lt78_167 {
-	min-height: var(--reltio-button-height-medium);
-	padding: var(--reltio-button-padding-y-medium)
-		var(--reltio-button-padding-x-medium);
+.Button_medium__L29wd {
+	min-height: 40px;
+	padding: 12px 18px;
 }
 
 /* Size: Large */
-._large_1lt78_174 {
-	min-height: var(--reltio-button-height-large);
-	padding: var(--reltio-button-padding-y-large)
-		var(--reltio-button-padding-x-large);
+.Button_large__L29wd {
+	min-height: 48px;
+	padding: 16px 24px;
 }
 
 /* State: Disabled */
-._disabled_1lt78_181 {
-	opacity: var(--reltio-button-disabled-opacity);
-	cursor: var(--reltio-button-disabled-cursor);
+.Button_disabled__L29wd {
+	opacity: 0.38;
+	cursor: not-allowed;
+}
+
+/* Icon Only */
+.Button_iconOnly__L29wd {
+	aspect-ratio: 1;
+	padding: 0;
 }
 
 /* Full Width */
-._fullWidth_1lt78_187 {
+.Button_fullWidth__L29wd {
 	width: 100%;
 }
 `);

package/components/Button/Button.module.css.json

@@ -1 +1 @@
-{ "root": "_root_1lt78_1", "filled": "_filled_1lt78_87", "outlined": "_outlined_1lt78_92", "text": "_text_1lt78_98", "primary": "_primary_1lt78_104", "inherited": "_inherited_1lt78_114", "small": "_small_1lt78_159", "medium": "_medium_1lt78_167", "large": "_large_1lt78_174", "disabled": "_disabled_1lt78_181", "fullWidth": "_fullWidth_1lt78_187" }
+{ "root": "Button_root__L29wd", "filled": "Button_filled__L29wd", "outlined": "Button_outlined__L29wd", "text": "Button_text__L29wd", "primary": "Button_primary__L29wd", "inherited": "Button_inherited__L29wd", "small": "Button_small__L29wd", "medium": "Button_medium__L29wd", "large": "Button_large__L29wd", "disabled": "Button_disabled__L29wd", "iconOnly": "Button_iconOnly__L29wd", "fullWidth": "Button_fullWidth__L29wd" }

package/components/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import type { HtmlProps } from "../../utils/types";
 /**
  * Visual variant for the button
  */
@@ -12,7 +12,7 @@ export type ButtonColor = "primary" | "inherited";
  */
 export type ButtonSize = "small" | "medium" | "large";
 /**
- * Base button props (without element-specific attributes)
+ * Base button props shared between button and anchor renderings
  */
 type BaseButtonProps = {
     /**
@@ -40,35 +40,11 @@ type BaseButtonProps = {
      * @default false
      */
     fullWidth?: boolean;
-    /**
-     * Button content (text, icons, etc.)
-     */
-    children: React.ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Additional CSS variables
-     */
-    style?: React.CSSProperties & {
-        "--reltio-button-color-background"?: string;
-        "--reltio-button-color-text"?: string;
-    };
-    /**
-     * Click event handler
-     */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * Accessible label for screen readers
-     * Required if button has no visible text
-     */
-    "aria-label"?: string;
 };
 /**
  * Button props when rendered as button element (no href)
  */
-type ButtonElementProps = BaseButtonProps & {
+type ButtonElementProps = HtmlProps<"button", BaseButtonProps & {
     /**
      * If href is provided, component renders as anchor element
      * If href is not provided, component renders as button element
@@ -79,11 +55,11 @@ type ButtonElementProps = BaseButtonProps & {
      * @default "button"
      */
     type?: "button" | "submit" | "reset";
-};
+}>;
 /**
  * Anchor props when rendered as anchor element (with href)
  */
-type AnchorElementProps = BaseButtonProps & {
+type AnchorElementProps = HtmlProps<"a", BaseButtonProps & {
     /**
      * URL to navigate to (causes component to render as anchor)
      */
@@ -100,10 +76,10 @@ type AnchorElementProps = BaseButtonProps & {
      * Rel attribute for anchor (e.g., "noopener noreferrer")
      */
     rel?: string;
-};
+}>;
 /**
  * Union type for Button component props
  * Component can be either a button or an anchor based on href prop
  */
-export type ButtonProps = (ButtonElementProps | AnchorElementProps) & Omit<React.ComponentPropsWithoutRef<"button">, keyof ButtonElementProps> & Omit<React.ComponentPropsWithoutRef<"a">, keyof AnchorElementProps>;
+export type ButtonProps = ButtonElementProps | AnchorElementProps;
 export {};

package/components/Chat/Chat.js

@@ -70,8 +70,6 @@ export const Chat = ({ messages, thinking = false, initialLoading = false, class
         }
     }, [thinking, scrollToBottom]);
     const [topMessages, lastMessages] = useMemo(() => {
-        if (messages.length <= 2)
-            return [messages, []];
         const lastUserMessageIndex = messages.findLastIndex(isUserMessage);
         return [
             messages.slice(0, lastUserMessageIndex),
@@ -80,5 +78,5 @@ export const Chat = ({ messages, thinking = false, initialLoading = false, class
     }, [messages]);
     return (_jsxs("div", { ref: containerRef, className: classNames(styles.root, className), role: "log", "aria-live": "polite", "aria-label": "Chat messages", 
         // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region must be keyboard-focusable (WCAG 2.1.1)
-        tabIndex: 0, ...rest, children: [initialLoading ? (_jsx(Skeleton, { rows: 5 })) : (_jsxs(_Fragment, { children: [topMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), lastMessages.length > 0 && (_jsxs("div", { className: styles.lastMessageWrapper, children: [lastMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), thinking && _jsx(AssistantLoader, {})] }))] })), showScrollButton && (_jsx("button", { type: "button", className: classNames(styles.scrollToBottom), onClick: () => scrollToBottom("smooth"), "aria-label": "Scroll to bottom", children: _jsx(KeyboardArrowDown, { size: "small" }) }))] }));
+        tabIndex: 0, ...rest, children: [initialLoading ? (_jsx(Skeleton, { rows: 5 })) : (_jsxs(_Fragment, { children: [topMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), lastMessages.length > 0 && (_jsxs("div", { className: classNames(styles.lastMessageWrapper), children: [lastMessages.map((msg, i) => (_jsx(ChatMessage, { message: msg }, msg.messageId ?? `${i}-${msg.role}`))), thinking && _jsx(AssistantLoader, {})] }))] })), showScrollButton && (_jsx("button", { type: "button", className: classNames(styles.scrollToBottom), onClick: () => scrollToBottom("smooth"), "aria-label": "Scroll to bottom", children: _jsx(KeyboardArrowDown, { size: "small" }) }))] }));
 };