@reltio/design 0.0.3 → 0.1.0

package/components/AssistantLoader/AssistantLoader.d.ts

@@ -0,0 +1,7 @@
+import type { AssistantLoaderProps } from "./AssistantLoader.types";
+/**
+ * Displays a standardized loading indicator for assistant responses using a GIF animation.
+ * Size is controlled via the `--reltio-assistant-loader-size` CSS variable (default: 32px).
+ * Includes accessibility attributes (aria-busy, aria-label, role="status").
+ */
+export declare const AssistantLoader: ({ className, ...rest }: AssistantLoaderProps) => import("react/jsx-runtime").JSX.Element;

package/components/AssistantLoader/AssistantLoader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utils/classNames";
+import styles from "./AssistantLoader.module.css";
+const LOADING_GIF_SRC = "/icons/loading.gif";
+const DEFAULT_LABEL = "thinking";
+/**
+ * Displays a standardized loading indicator for assistant responses using a GIF animation.
+ * Size is controlled via the `--reltio-assistant-loader-size` CSS variable (default: 32px).
+ * Includes accessibility attributes (aria-busy, aria-label, role="status").
+ */
+export const AssistantLoader = ({ className, ...rest }) => {
+    return (
+    // biome-ignore lint/a11y/useSemanticElements: status role is correct for loading placeholder; output is for calculation results
+    _jsxs("div", { className: classNames(styles.root, className), "aria-busy": "true", "aria-label": DEFAULT_LABEL, role: "status", ...rest, children: [_jsx("img", { src: LOADING_GIF_SRC, alt: "", className: styles.indicator, "aria-hidden": "true" }), _jsx("div", { className: classNames(styles.dotFlashing), "aria-hidden": "true" })] }));
+};

package/components/AssistantLoader/AssistantLoader.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './AssistantLoader.module.css.json';
+export default json;

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

@@ -0,0 +1,101 @@
+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;
+
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	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);
+	display: block;
+	object-fit: contain;
+}
+
+/* Dot flashing indicator - uses CSS variables from .root */
+._dotFlashing_lj6wo_44 {
+	position: absolute;
+	left: calc(
+		var(--reltio-assistant-loader-size, 32px) +
+		var(--reltio-assistant-loader-dot-margin-left, 20px)
+	);
+	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);
+}
+
+._dotFlashing_lj6wo_44::before,
+._dotFlashing_lj6wo_44::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;
+}
+
+._dotFlashing_lj6wo_44::before {
+	left: calc(-1 * var(--reltio-assistant-loader-dot-gap, 12px));
+	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);
+}
+
+@keyframes _dotFlashing_lj6wo_44 {
+	0% {
+		background-color: var(--reltio-assistant-loader-dot-color, #8d8dc8);
+	}
+	50%,
+	100% {
+		background-color: var(
+			--reltio-assistant-loader-dot-color-dimmed,
+			rgba(152, 128, 255, 0.2)
+		);
+	}
+}
+`);
+export default json;

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

@@ -0,0 +1 @@
+{ "root": "_root_lj6wo_1", "indicator": "_indicator_lj6wo_36", "dotFlashing": "_dotFlashing_lj6wo_44" }

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

@@ -0,0 +1,16 @@
+import type React from "react";
+/**
+ * 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">;

package/components/AssistantLoader/AssistantLoader.types.js

@@ -0,0 +1 @@
+export {};

package/components/AssistantLoader/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AssistantLoader";
+export type * from "./AssistantLoader.types";

package/components/AssistantLoader/index.js

@@ -0,0 +1 @@
+export * from "./AssistantLoader";

package/components/Chat/Chat.d.ts

@@ -0,0 +1,14 @@
+import type { ChatProps } from "./Chat.types";
+/**
+ * Scrollable chat window that renders a conversation between a user and an AI assistant.
+ *
+ * **Loading behavior (`initialLoading → false`):**
+ * The last user message is pinned to the top edge of the visible chat area;
+ * all subsequent assistant messages are displayed below it.
+ *
+ * **Thinking behavior (`thinking → true`):**
+ * The chat automatically scrolls to the last user message and shows
+ * a loader (AssistantLoader) directly beneath it, indicating the assistant
+ * is generating a response.
+ */
+export declare const Chat: ({ messages, thinking, initialLoading, className, ...rest }: ChatProps) => import("react/jsx-runtime").JSX.Element;

package/components/Chat/Chat.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AssistantLoader } from "../../components/AssistantLoader";
+import { Skeleton } from "../../components/Skeleton";
+import { KeyboardArrowDown } from "../../icons/KeyboardArrowDown";
+import { classNames } from "../../utils/classNames";
+import styles from "./Chat.module.css";
+import { AssistantMessage } from "./components/AssistantMessage";
+import { UserMessage } from "./components/UserMessage";
+const SCROLL_THRESHOLD = 100;
+const isUserMessage = (m) => m.role === "user";
+const isAssistantMessage = (m) => m.role === "assistant";
+const ChatMessage = memo(({ message }) => {
+    if (isUserMessage(message)) {
+        return (_jsx(UserMessage, { className: styles.userMessage, children: message.content }));
+    }
+    if (isAssistantMessage(message)) {
+        return _jsx(AssistantMessage, { children: message.content });
+    }
+    return _jsx(_Fragment, { children: message.content ?? null });
+});
+const isScrolledToBottom = (el) => el.scrollHeight - el.scrollTop - el.clientHeight < SCROLL_THRESHOLD;
+/**
+ * Scrollable chat window that renders a conversation between a user and an AI assistant.
+ *
+ * **Loading behavior (`initialLoading → false`):**
+ * The last user message is pinned to the top edge of the visible chat area;
+ * all subsequent assistant messages are displayed below it.
+ *
+ * **Thinking behavior (`thinking → true`):**
+ * The chat automatically scrolls to the last user message and shows
+ * a loader (AssistantLoader) directly beneath it, indicating the assistant
+ * is generating a response.
+ */
+export const Chat = ({ messages, thinking = false, initialLoading = false, className, ...rest }) => {
+    const containerRef = useRef(null);
+    const [showScrollButton, setShowScrollButton] = useState(false);
+    const handleScroll = useCallback(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        setShowScrollButton(!isScrolledToBottom(el));
+    }, []);
+    const scrollToBottom = useCallback((behavior = "smooth") => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.scrollTo({ top: el.scrollHeight, behavior });
+    }, []);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.addEventListener("scroll", handleScroll, { passive: true });
+        return () => el.removeEventListener("scroll", handleScroll);
+    }, [handleScroll]);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        scrollToBottom("instant");
+        setShowScrollButton(!isScrolledToBottom(el));
+    }, [scrollToBottom]);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        if (thinking) {
+            scrollToBottom("smooth");
+        }
+    }, [thinking, scrollToBottom]);
+    const [topMessages, lastMessages] = useMemo(() => {
+        if (messages.length <= 2)
+            return [messages, []];
+        const lastUserMessageIndex = messages.findLastIndex(isUserMessage);
+        return [
+            messages.slice(0, lastUserMessageIndex),
+            messages.slice(lastUserMessageIndex),
+        ];
+    }, [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" }) }))] }));
+};

package/components/Chat/Chat.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Chat.module.css.json';
+export default json;

package/components/Chat/Chat.module.css.js

@@ -0,0 +1,78 @@
+import styleInject from 'style-inject';
+import json from './Chat.module.css.json';
+styleInject(`
+/* CSS Custom Properties - All defined on .root with --reltio-chat- prefix */
+._root_d5cr4_1 {
+	--reltio-chat-padding: 16px;
+	--reltio-chat-message-gap: 16px;
+	--reltio-chat-scroll-button-size: 36px;
+	--reltio-chat-scroll-button-bg: #ffffff;
+	--reltio-chat-scroll-button-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	--reltio-chat-scroll-button-color: #5f6368;
+	--reltio-chat-scroll-button-hover-bg: #f1f3f4;
+	--reltio-chat-scroll-button-bottom: 16px;
+
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	height: 100%;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: auto;
+	align-items: start;
+	padding: var(--reltio-chat-padding);
+	gap: var(--reltio-chat-message-gap);
+}
+
+._userMessage_d5cr4_24 {
+	margin-left: auto;
+	max-width: 80%;
+}
+
+._userMessageSkeletonWrapper_d5cr4_29 {
+	width: 40%;
+	margin-left: auto;
+}
+
+._scrollToBottom_d5cr4_34 {
+	position: sticky;
+	bottom: var(--reltio-chat-scroll-button-bottom, 16px);
+	align-self: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--reltio-chat-scroll-button-size, 36px);
+	height: var(--reltio-chat-scroll-button-size, 36px);
+	border-radius: 50%;
+	border: none;
+	background: var(--reltio-chat-scroll-button-bg, #ffffff);
+	box-shadow: var(
+		--reltio-chat-scroll-button-shadow,
+		0 2px 8px rgba(0, 0, 0, 0.15)
+	);
+	color: var(--reltio-chat-scroll-button-color, #5f6368);
+	cursor: pointer;
+	transition: background 0.15s ease;
+	flex-shrink: 0;
+}
+
+._scrollToBottom_d5cr4_34:hover {
+	background: var(--reltio-chat-scroll-button-hover-bg);
+}
+
+._scrollToBottom_d5cr4_34:focus-visible {
+	outline: 2px solid #1a73e8;
+	outline-offset: 2px;
+}
+
+._lastMessageWrapper_d5cr4_65 {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	align-items: start;
+	gap: var(--reltio-chat-message-gap);
+	min-height: 100%;
+	width: 100%;
+}
+`);
+export default json;

package/components/Chat/Chat.module.css.json

@@ -0,0 +1 @@
+{ "root": "_root_d5cr4_1", "userMessage": "_userMessage_d5cr4_24", "userMessageSkeletonWrapper": "_userMessageSkeletonWrapper_d5cr4_29", "scrollToBottom": "_scrollToBottom_d5cr4_34", "lastMessageWrapper": "_lastMessageWrapper_d5cr4_65" }

package/components/Chat/Chat.types.d.ts

@@ -0,0 +1,58 @@
+import type React from "react";
+/**
+ * User message payload for Chat. Renders via UserMessage component.
+ */
+export type UserChatMessage = {
+    type: "user";
+    content?: string | null;
+};
+/**
+ * Assistant message payload for Chat. Renders via AssistantMessage component.
+ */
+export type AssistantChatMessage = {
+    type: "assistant";
+    content?: string | null;
+};
+/**
+ * Union of known chat message types. Extensible: add new variants (e.g. system, tool)
+ * by extending this type and the message renderer in Chat.tsx.
+ */
+export type ChatMessage = UserChatMessage | AssistantChatMessage;
+/**
+ * Message received from the API.
+ */
+export type Message = {
+    messageId?: string;
+    role: "user" | "assistant" | "system";
+    content: string;
+    timestamp?: Date;
+    createdAt?: string;
+};
+/**
+ * Props for the Chat component
+ */
+export type ChatProps = {
+    /**
+     * List of messages to display in order. Each message is rendered by type (user → UserMessage, assistant → AssistantMessage).
+     */
+    messages: Message[];
+    /**
+     * When true, shows the AssistantLoader below the message list to indicate the assistant is generating a response.
+     * Fully controlled from outside — no internal logic derives this state.
+     * @default false
+     */
+    thinking?: boolean;
+    /**
+     * When true, chat data is initially loading. The Skeleton component is shown in place of the message list until data is available.
+     * @default false
+     */
+    initialLoading?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Inline styles (e.g. for CSS variable overrides)
+     */
+    style?: React.CSSProperties;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;

package/components/Chat/Chat.types.js

@@ -0,0 +1 @@
+export {};

package/components/Chat/components/AssistantMessage/AssistantMessage.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+import type { AssistantMessageProps } from "./AssistantMessage.types";
+/**
+ * Displays assistant-authored message content with Markdown and MDX support via the Markdown component.
+ * When error is true, shows ErrorMessage and hides content.
+ */
+export declare const AssistantMessage: ({ children, errorMessage, className, style, ...rest }: React.PropsWithChildren<AssistantMessageProps>) => import("react/jsx-runtime").JSX.Element;

package/components/Chat/components/AssistantMessage/AssistantMessage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorMessage } from "../../../../components/ErrorMessage";
+import { Markdown } from "../../../../components/Markdown";
+import { classNames } from "../../../../utils/classNames";
+import styles from "./AssistantMessage.module.css";
+const normalizeError = (errorMessage) => {
+    if (errorMessage == null) {
+        return null;
+    }
+    if (typeof errorMessage === "string") {
+        const trimmed = errorMessage.trim();
+        return trimmed ? _jsx(ErrorMessage, { children: trimmed }) : null;
+    }
+    return errorMessage;
+};
+/**
+ * Displays assistant-authored message content with Markdown and MDX support via the Markdown component.
+ * When error is true, shows ErrorMessage and hides content.
+ */
+export const AssistantMessage = ({ children, errorMessage, className, style, ...rest }) => {
+    const errorNode = normalizeError(errorMessage);
+    const content = children.trim();
+    return (_jsxs("div", { className: classNames(styles.assistantMessageRoot, className), style: style, ...rest, children: [errorNode && errorNode, !errorNode && content && _jsx(Markdown, { children: content })] }));
+};

package/components/Chat/components/AssistantMessage/AssistantMessage.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './AssistantMessage.module.css.json';
+export default json;

package/components/Chat/components/AssistantMessage/AssistantMessage.module.css.js

@@ -0,0 +1,26 @@
+import styleInject from 'style-inject';
+import json from './AssistantMessage.module.css.json';
+styleInject(`
+/* CSS Custom Properties - All defined on .root with --reltio-assistant-message- prefix */
+._assistantMessageRoot_qtch8_2 {
+	--reltio-assistant-message-background: transparent;
+	--reltio-assistant-message-padding: 0;
+	--reltio-assistant-message-border-radius: 8px;
+	--reltio-assistant-message-content-color: #0e0e25;
+
+	display: flex;
+	flex-direction: column;
+	background-color: var(--reltio-assistant-message-background);
+	padding: var(--reltio-assistant-message-padding);
+	border-radius: var(--reltio-assistant-message-border-radius);
+	box-sizing: border-box;
+	width: 100%;
+}
+
+._content_qtch8_17 {
+	flex: 1;
+	min-width: 0;
+	color: var(--reltio-assistant-message-content-color);
+}
+`);
+export default json;

package/components/Chat/components/AssistantMessage/AssistantMessage.module.css.json

@@ -0,0 +1 @@
+{ "assistantMessageRoot": "_assistantMessageRoot_qtch8_2", "content": "_content_qtch8_17" }

package/components/Chat/components/AssistantMessage/AssistantMessage.types.d.ts

@@ -0,0 +1,20 @@
+import type React from "react";
+/**
+ * Props for the AssistantMessage component
+ */
+export type AssistantMessageProps = {
+    /**
+     * Error content: string is passed to ErrorMessage; custom ReactNode is rendered as is.
+     */
+    errorMessage?: React.ReactNode | null;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Inline styles (e.g. for CSS variable overrides)
+     */
+    style?: React.CSSProperties;
+    /** We expect assistant message source as a string */
+    children: string;
+};

package/components/Chat/components/AssistantMessage/AssistantMessage.types.js

@@ -0,0 +1 @@
+export {};

package/components/Chat/components/AssistantMessage/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AssistantMessage";
+export type * from "./AssistantMessage.types";

package/components/Chat/components/AssistantMessage/index.js

@@ -0,0 +1 @@
+export * from "./AssistantMessage";

package/components/Chat/components/UserMessage/UserMessage.d.ts

@@ -0,0 +1,6 @@
+import type { UserMessageProps } from "./UserMessage.types";
+/**
+ * Displays user-authored message content with Markdown support via Markdown component.
+ * Empty or null content renders an empty container; invalid Markdown is handled by Markdown component.
+ */
+export declare const UserMessage: ({ children, className, style, ...rest }: UserMessageProps) => import("react/jsx-runtime").JSX.Element;

package/components/Chat/components/UserMessage/UserMessage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Markdown } from "../../../../components/Markdown";
+import { classNames } from "../../../../utils/classNames";
+import styles from "./UserMessage.module.css";
+/**
+ * Displays user-authored message content with Markdown support via Markdown component.
+ * Empty or null content renders an empty container; invalid Markdown is handled by Markdown component.
+ */
+export const UserMessage = ({ children, className, style, ...rest }) => {
+    const hasContent = children != null && String(children).trim() !== "";
+    return (_jsx("div", { className: classNames(styles.userMessageRoot, className), style: style, ...rest, children: hasContent && _jsx(Markdown, { children: children }) }));
+};

package/components/Chat/components/UserMessage/UserMessage.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './UserMessage.module.css.json';
+export default json;

package/components/Chat/components/UserMessage/UserMessage.module.css.js

@@ -0,0 +1,11 @@
+import styleInject from 'style-inject';
+import json from './UserMessage.module.css.json';
+styleInject(`
+._userMessageRoot_11l9d_1 {
+	display: inline-flex;
+	background-color: var(--reltio-user-message-background, #f5f5fa);
+	padding: var(--reltio-user-message-padding, 12px 16px);
+	border-radius: var(--reltio-user-message-border-radius, 12px);
+}
+`);
+export default json;

package/components/Chat/components/UserMessage/UserMessage.module.css.json

@@ -0,0 +1 @@
+{ "userMessageRoot": "_userMessageRoot_11l9d_1" }

package/components/Chat/components/UserMessage/UserMessage.types.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+/**
+ * Props for the UserMessage component
+ */
+export type UserMessageProps = {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Inline styles (e.g. for CSS variable overrides)
+     */
+    style?: React.CSSProperties;
+    /** We expect user message source as a string */
+    children: string;
+};

package/components/Chat/components/UserMessage/UserMessage.types.js

@@ -0,0 +1 @@
+export {};

package/components/Chat/components/UserMessage/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./UserMessage";
+export type * from "./UserMessage.types";

package/components/Chat/components/UserMessage/index.js

@@ -0,0 +1 @@
+export * from "./UserMessage";

package/components/Chat/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Chat";
+export type * from "./Chat.types";

package/components/Chat/index.js

@@ -0,0 +1 @@
+export * from "./Chat";

package/components/Details/Details.d.ts

@@ -0,0 +1,7 @@
+import type { DetailsProps } from "./Details.types";
+/**
+ * Enhanced details component for rendering collapsible content blocks
+ * with improved visual design, accessibility, and consistent styling
+ * aligned with the design system.
+ */
+export declare const Details: ({ open: initialOpen, children, className, style, ...rest }: DetailsProps) => import("react/jsx-runtime").JSX.Element;

package/components/Details/Details.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { CodeBrackets } from "../../icons/CodeBrackets";
+import { ExpandLess } from "../../icons/ExpandLess";
+import { ExpandMore } from "../../icons/ExpandMore";
+import { classNames } from "../../utils/classNames";
+import styles from "./Details.module.css";
+/**
+ * Enhanced details component for rendering collapsible content blocks
+ * with improved visual design, accessibility, and consistent styling
+ * aligned with the design system.
+ */
+export const Details = ({ open: initialOpen = false, children, className, style, ...rest }) => {
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    // Update internal state when open prop changes
+    useEffect(() => {
+        setIsOpen(initialOpen);
+    }, [initialOpen]);
+    // Extract summary from children
+    let summary = "Details";
+    const contentChildren = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) &&
+            typeof child.type === "string" &&
+            child.type === "summary") {
+            summary = child.props.children;
+        }
+        else if (child != null) {
+            contentChildren.push(child);
+        }
+    });
+    // Handle toggle
+    const handleToggle = (event) => {
+        const detailsElement = event.currentTarget;
+        setIsOpen(detailsElement.open);
+    };
+    // Compose className using classNames utility
+    const composedClassName = classNames(styles.root, className);
+    return (_jsxs("details", { className: composedClassName, style: style, onToggle: handleToggle, open: initialOpen, ...rest, children: [_jsxs("summary", { className: styles.summary, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(CodeBrackets, { size: "small" }) }), _jsx("span", { className: styles.summaryText, children: summary }), _jsx("span", { className: classNames(styles.chevron, isOpen && styles.chevronOpen), children: isOpen ? (_jsx(ExpandLess, { size: "small", "aria-hidden": "true" })) : (_jsx(ExpandMore, { size: "small", "aria-hidden": "true" })) })] }), _jsx("div", { className: styles.content, children: contentChildren })] }));
+};

package/components/Details/Details.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Details.module.css.json';
+export default json;