cherry-styled-components 0.2.11 → 0.2.13

package/dist/chat-panel.js

@@ -0,0 +1,163 @@
+"use client";
+"use client";
+import { mq } from "./utils/theme.js";
+import { useLockBodyScroll } from "./utils/use-lock-body-scroll.js";
+import { useBelowBreakpoint } from "./utils/use-media-query.js";
+import { Icon } from "./icon.js";
+import { ChatContext } from "./chat-provider.js";
+import { IconButton } from "./icon-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useEffect, useRef } from "react";
+import styled, { css } from "styled-components";
+//#region src/lib/chat-panel.tsx
+var DEFAULT_WIDTH = 420;
+var FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+var StyledChatPanel = styled.div.withConfig({
+	displayName: "chat-panel__StyledChatPanel",
+	componentId: "sc-701cc462-0"
+})([
+	`display:flex;flex-direction:column;background:`,
+	`;color:`,
+	`;& .chat-header{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;min-height:62px;padding:12px 20px;border-bottom:solid 1px `,
+	`;flex-shrink:0;}& .chat-header-title{display:flex;align-items:center;gap:12px;color:`,
+	`;& h3{margin:0;font-size:`,
+	`;line-height:1.2;}& svg{width:20px;height:20px;flex-shrink:0;}}& .chat-header-actions{display:flex;align-items:center;gap:12px;}`,
+	``
+], ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.h6.xs, ({ $variant, $side, $width, $isVisible, theme }) => {
+	if ($variant === "inline") return css([
+		`position:relative;width:100%;height:100%;border:solid 1px `,
+		`;border-radius:`,
+		`;overflow:hidden;`
+	], theme.colors.grayLight, theme.spacing.radius.lg);
+	if ($variant === "fullscreen") return css([`position:fixed;inset:0;z-index:1000;transition:opacity 0.3s ease,visibility 0s linear 0s;opacity:1;visibility:visible;`, ` @media (prefers-reduced-motion:reduce){transition:none;}`], !$isVisible && css([`opacity:0;visibility:hidden;transition-delay:0s,0.3s;`]));
+	return css([
+		`position:fixed;top:0;bottom:0;`,
+		`:0;width:100%;height:100dvh;z-index:1000;transition:transform 0.3s ease,opacity 0.3s ease,visibility 0s linear 0s;transform:translateX(0);opacity:1;visibility:visible;`,
+		` @media (prefers-reduced-motion:reduce){transition:none;}`,
+		`{width:`,
+		`px;border-`,
+		`:solid 1px `,
+		`;}`
+	], $side, !$isVisible && css([`transform:translateX(`, `);opacity:0;visibility:hidden;transition-delay:0s,0s,0.3s;`], $side === "left" ? "-100%" : "100%"), mq("lg"), $width, $side === "left" ? "right" : "left", theme.colors.grayLight);
+});
+function LocalChatPanel({ children, $variant = "drawer", $side = "right", $width = DEFAULT_WIDTH, $title = "AI Assistant", $titleIcon = "Sparkles", $actions, $hideCloseButton, "aria-label": ariaLabel, ...props }, ref) {
+	const { isOpen, close, inputRef } = useContext(ChatContext);
+	const panelRef = useRef(null);
+	const isBelowLg = useBelowBreakpoint("lg");
+	const isOverlay = $variant !== "inline";
+	const isVisible = !isOverlay || isOpen;
+	const isModal = $variant === "fullscreen" && isOpen || $variant === "drawer" && isOpen && isBelowLg;
+	useLockBodyScroll(isModal);
+	useEffect(() => {
+		if (!isOverlay || !isOpen) return;
+		let frame = null;
+		let attempts = 0;
+		const tryFocus = () => {
+			frame = null;
+			const input = inputRef.current;
+			const panel = panelRef.current;
+			if (!input || !panel) return;
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && panel.contains(active)) return;
+			input.focus();
+			if (document.activeElement !== input && attempts++ < 30) frame = requestAnimationFrame(tryFocus);
+		};
+		frame = requestAnimationFrame(tryFocus);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+		};
+	}, [
+		isOpen,
+		isOverlay,
+		inputRef
+	]);
+	useEffect(() => {
+		if (!isModal || !panelRef.current) return;
+		const panel = panelRef.current;
+		const inertSiblings = [];
+		let current = panel;
+		while (current.parentElement) {
+			const parent = current.parentElement;
+			for (const sibling of Array.from(parent.children)) {
+				if (sibling === current || !(sibling instanceof HTMLElement)) continue;
+				inertSiblings.push({
+					element: sibling,
+					wasInert: sibling.inert
+				});
+				sibling.inert = true;
+			}
+			if (parent === document.body) break;
+			current = parent;
+		}
+		const containFocus = (event) => {
+			if (event.target instanceof Node && !panel.contains(event.target)) inputRef.current?.focus();
+		};
+		document.addEventListener("focusin", containFocus);
+		return () => {
+			document.removeEventListener("focusin", containFocus);
+			for (const { element, wasInert } of inertSiblings) element.inert = wasInert;
+		};
+	}, [isModal, inputRef]);
+	const handleKeyDown = (event) => {
+		if (!isModal) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			close();
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const focusable = Array.from(panelRef.current?.querySelectorAll(FOCUSABLE_SELECTOR) ?? []).filter((element) => element.offsetParent !== null && element.getAttribute("aria-hidden") !== "true");
+		if (focusable.length === 0) {
+			event.preventDefault();
+			return;
+		}
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		if (event.shiftKey && document.activeElement === first) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && document.activeElement === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	};
+	const showHeader = $title !== null || $actions || isOverlay && !$hideCloseButton;
+	return /*#__PURE__*/ jsxs(StyledChatPanel, {
+		$variant,
+		$side,
+		$width,
+		$isVisible: isVisible,
+		inert: isOverlay ? !isOpen : void 0,
+		"aria-hidden": isOverlay ? !isOpen : void 0,
+		role: isModal ? "dialog" : isOverlay ? "complementary" : void 0,
+		"aria-modal": isModal ? "true" : void 0,
+		"aria-label": ariaLabel ?? (typeof $title === "string" ? $title : void 0),
+		"data-chat-panel": true,
+		onKeyDownCapture: handleKeyDown,
+		...props,
+		ref: (node) => {
+			panelRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		children: [showHeader && /*#__PURE__*/ jsxs("div", {
+			className: "chat-header",
+			children: [/*#__PURE__*/ jsxs("span", {
+				className: "chat-header-title",
+				children: [$titleIcon && /*#__PURE__*/ jsx(Icon, { name: $titleIcon }), $title !== null && /*#__PURE__*/ jsx("h3", { children: $title })]
+			}), /*#__PURE__*/ jsxs("span", {
+				className: "chat-header-actions",
+				children: [$actions, isOverlay && !$hideCloseButton && /*#__PURE__*/ jsx(IconButton, {
+					onClick: () => close(),
+					"aria-label": "Close chat",
+					title: "Close chat",
+					children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+				})]
+			})]
+		}), children]
+	});
+}
+var ChatPanel = /*#__PURE__*/ forwardRef(LocalChatPanel);
+//#endregion
+export { ChatPanel };

package/dist/chat-provider.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+export type ChatRole = "user" | "assistant";
+export interface ChatSourceData {
+    id: string;
+    label: string;
+    href: string;
+}
+export interface ChatMessageData {
+    id: string;
+    role: ChatRole;
+    /** Rendered as-is: plain text while streaming, rich markup when done. */
+    content: React.ReactNode;
+    /** Plain-text mirror of `content`, used to build the history for onSend. */
+    text?: string;
+    sources?: ChatSourceData[];
+}
+export interface ChatHistoryEntry {
+    role: ChatRole;
+    content: string;
+}
+export interface ChatSendContext {
+    /** Aborted by reset() and on unmount; pass it to fetch. */
+    signal: AbortSignal;
+    /** The conversation before this question, oldest first. */
+    history: ChatHistoryEntry[];
+    /**
+     * Creates the assistant reply on the first call and patches the same
+     * message on every later call, so streaming updates one bubble and the
+     * typing indicator stays put until real content arrives.
+     */
+    setAssistant: (content: React.ReactNode, options?: {
+        text?: string;
+        sources?: ChatSourceData[];
+    }) => void;
+}
+/**
+ * The transport, supplied by the app: take the question, talk to a server
+ * however you like, and stream the reply through `setAssistant`. A thrown
+ * error lands in `error`; an abort is swallowed.
+ */
+export type ChatSendHandler = (question: string, context: ChatSendContext) => void | Promise<void>;
+interface ChatContextValue {
+    isOpen: boolean;
+    open: (returnFocusTo?: HTMLElement | null) => void;
+    close: (restoreFocus?: boolean) => HTMLElement | null;
+    toggle: () => void;
+    messages: ChatMessageData[];
+    input: string;
+    setInput: (value: string) => void;
+    loading: boolean;
+    error: string | null;
+    /** Sends `text`, or the current input when omitted. No-op while loading. */
+    send: (text?: string) => void;
+    /**
+     * Opens the panel and hands `question` to the assistant. While a reply is
+     * still streaming the question is pre-filled instead, ready to send.
+     */
+    ask: (question: string, returnFocusTo?: HTMLElement | null) => void;
+    /** Aborts any in-flight reply and restores the initial greeting. */
+    reset: () => void;
+    inputRef: React.RefObject<HTMLTextAreaElement | null>;
+}
+declare const ChatContext: React.Context<ChatContextValue>;
+declare function useChat(): ChatContextValue;
+export interface ChatProviderProps {
+    children: React.ReactNode;
+    /**
+     * The transport. Optional when $showcase is on, where the commands can
+     * carry a demo by themselves; required for real answers.
+     */
+    onSend?: ChatSendHandler;
+    /** Assistant message seeded on first open and after reset. Pass null for none. */
+    greeting?: React.ReactNode;
+    /** How many prior messages the history handed to onSend may contain. */
+    historyLimit?: number;
+    /** Cmd/Ctrl + this key toggles the panel. Pass null to disable. */
+    shortcut?: string | null;
+    /**
+     * Demo mode: chat input matching a showcase command ("help", "list",
+     * "callout", …) is answered locally with a live rendering of that element
+     * instead of going to onSend. Anything else still goes to the transport.
+     */
+    $showcase?: boolean;
+}
+declare function ChatProvider({ children, onSend, greeting, historyLimit, shortcut, $showcase, }: ChatProviderProps): React.JSX.Element;
+export { ChatContext, ChatProvider, useChat };

package/dist/chat-provider.js

@@ -0,0 +1,295 @@
+"use client";
+"use client";
+import { resolveShowcaseCommand } from "./chat-showcase.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+//#region src/lib/chat-provider.tsx
+var ChatContext = /*#__PURE__*/ createContext({
+	isOpen: false,
+	open: () => {},
+	close: () => null,
+	toggle: () => {},
+	messages: [],
+	input: "",
+	setInput: () => {},
+	loading: false,
+	error: null,
+	send: () => {},
+	ask: () => {},
+	reset: () => {},
+	inputRef: { current: null }
+});
+function useChat() {
+	return useContext(ChatContext);
+}
+var DEFAULT_GREETING = "Hey there, how can I assist you?";
+var SHOWCASE_GREETING = "Hey there! Type \"help\" to see everything I can render.";
+var GREETING_ID = "chat-greeting";
+var HISTORY_ENTRY_MAX_CHARS = 4e3;
+function ChatProvider({ children, onSend, greeting, historyLimit = 20, shortcut = "i", $showcase = false }) {
+	const resolvedGreeting = greeting !== void 0 ? greeting : $showcase ? SHOWCASE_GREETING : DEFAULT_GREETING;
+	const [isOpen, setIsOpen] = useState(false);
+	const [input, setInput] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [messages, setMessages] = useState(() => resolvedGreeting === null ? [] : [{
+		id: GREETING_ID,
+		role: "assistant",
+		content: resolvedGreeting,
+		text: typeof resolvedGreeting === "string" ? resolvedGreeting : void 0
+	}]);
+	const inputRef = useRef(null);
+	const abortRef = useRef(null);
+	const idCounter = useRef(0);
+	const isOpenRef = useRef(isOpen);
+	const loadingRef = useRef(loading);
+	const messagesRef = useRef(messages);
+	const onSendRef = useRef(onSend);
+	const greetingRef = useRef(resolvedGreeting);
+	const inputValueRef = useRef(input);
+	useEffect(() => {
+		isOpenRef.current = isOpen;
+		loadingRef.current = loading;
+		messagesRef.current = messages;
+		inputValueRef.current = input;
+		onSendRef.current = onSend;
+		greetingRef.current = resolvedGreeting;
+	});
+	const openerRef = useRef(null);
+	const pendingRestoreFocusRef = useRef(null);
+	const focusTimeoutRef = useRef(null);
+	const restoreFocusTimeoutRef = useRef(null);
+	const nextId = useCallback(() => `chat-msg-${idCounter.current++}`, []);
+	const greetingMessages = useCallback(() => {
+		const currentGreeting = greetingRef.current;
+		if (currentGreeting === null || currentGreeting === void 0) return [];
+		return [{
+			id: GREETING_ID,
+			role: "assistant",
+			content: currentGreeting,
+			text: typeof currentGreeting === "string" ? currentGreeting : void 0
+		}];
+	}, []);
+	const showPanel = useCallback((returnFocusTo) => {
+		const pendingOpener = pendingRestoreFocusRef.current;
+		if (restoreFocusTimeoutRef.current) {
+			clearTimeout(restoreFocusTimeoutRef.current);
+			restoreFocusTimeoutRef.current = null;
+		}
+		pendingRestoreFocusRef.current = null;
+		if (!isOpenRef.current) {
+			const activeElement = document.activeElement;
+			openerRef.current = returnFocusTo?.isConnected === true ? returnFocusTo : pendingOpener?.isConnected === true ? pendingOpener : activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null;
+		}
+		isOpenRef.current = true;
+		setIsOpen(true);
+		if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
+		focusTimeoutRef.current = setTimeout(() => {
+			focusTimeoutRef.current = null;
+			inputRef.current?.focus();
+		}, 0);
+	}, []);
+	const open = useCallback((returnFocusTo) => {
+		showPanel(returnFocusTo);
+		setMessages((prev) => prev.length === 0 ? greetingMessages() : prev);
+	}, [showPanel, greetingMessages]);
+	const close = useCallback((restoreFocus = true) => {
+		const pendingOpener = pendingRestoreFocusRef.current;
+		if (!restoreFocus && restoreFocusTimeoutRef.current) {
+			clearTimeout(restoreFocusTimeoutRef.current);
+			restoreFocusTimeoutRef.current = null;
+			pendingRestoreFocusRef.current = null;
+		}
+		if (!isOpenRef.current) return pendingOpener;
+		if (focusTimeoutRef.current) {
+			clearTimeout(focusTimeoutRef.current);
+			focusTimeoutRef.current = null;
+		}
+		const activeElement = document.activeElement;
+		if (activeElement instanceof HTMLElement && activeElement.closest("[data-chat-panel]")) activeElement.blur();
+		const opener = openerRef.current;
+		openerRef.current = null;
+		isOpenRef.current = false;
+		setIsOpen(false);
+		if (restoreFocusTimeoutRef.current) clearTimeout(restoreFocusTimeoutRef.current);
+		if (restoreFocus) {
+			pendingRestoreFocusRef.current = opener;
+			restoreFocusTimeoutRef.current = setTimeout(() => {
+				const focusTarget = pendingRestoreFocusRef.current;
+				restoreFocusTimeoutRef.current = null;
+				pendingRestoreFocusRef.current = null;
+				if (focusTarget?.isConnected) focusTarget.focus();
+			}, 0);
+		} else pendingRestoreFocusRef.current = null;
+		return opener;
+	}, []);
+	const toggle = useCallback(() => {
+		if (isOpenRef.current) close();
+		else open();
+	}, [close, open]);
+	const runSend = useCallback(async (question, returnFocusTo) => {
+		setInput("");
+		showPanel(returnFocusTo);
+		const base = messagesRef.current.length > 0 ? messagesRef.current : greetingMessages();
+		if ($showcase) {
+			const demo = resolveShowcaseCommand(question);
+			if (demo) {
+				const withDemo = [
+					...base,
+					{
+						id: nextId(),
+						role: "user",
+						content: question,
+						text: question
+					},
+					{
+						id: nextId(),
+						role: "assistant",
+						content: demo
+					}
+				];
+				messagesRef.current = withDemo;
+				setMessages(withDemo);
+				setError(null);
+				return;
+			}
+		}
+		const handler = onSendRef.current;
+		if (!handler) {
+			const hint = $showcase ? "I can only render showcase demos here. Type \"help\" to see the available commands." : "No transport is wired up. Pass onSend to ChatProvider to get answers.";
+			const withHint = [
+				...base,
+				{
+					id: nextId(),
+					role: "user",
+					content: question,
+					text: question
+				},
+				{
+					id: nextId(),
+					role: "assistant",
+					content: hint,
+					text: hint
+				}
+			];
+			messagesRef.current = withHint;
+			setMessages(withHint);
+			setError(null);
+			return;
+		}
+		setLoading(true);
+		loadingRef.current = true;
+		setError(null);
+		const history = base.filter((message) => (message.text ?? "").trim() !== "").slice(-historyLimit).map((message) => ({
+			role: message.role,
+			content: message.text.slice(0, HISTORY_ENTRY_MAX_CHARS)
+		}));
+		const withQuestion = [...base, {
+			id: nextId(),
+			role: "user",
+			content: question,
+			text: question
+		}];
+		messagesRef.current = withQuestion;
+		setMessages(withQuestion);
+		const controller = new AbortController();
+		abortRef.current = controller;
+		let assistantId = null;
+		const setAssistant = (content, options) => {
+			if (assistantId === null) assistantId = nextId();
+			const patch = {
+				id: assistantId,
+				role: "assistant",
+				content,
+				text: options?.text ?? (typeof content === "string" ? content : void 0),
+				sources: options?.sources
+			};
+			setMessages((prev) => {
+				const index = prev.findIndex((message) => message.id === assistantId);
+				if (index === -1) return [...prev, patch];
+				const next = [...prev];
+				next[index] = patch;
+				return next;
+			});
+		};
+		try {
+			await handler(question, {
+				signal: controller.signal,
+				history,
+				setAssistant
+			});
+		} catch (err) {
+			if (err instanceof DOMException && err.name === "AbortError") return;
+			setError(err instanceof Error ? err.message : "Unknown error");
+		} finally {
+			if (abortRef.current === controller) abortRef.current = null;
+			setLoading(false);
+			loadingRef.current = false;
+		}
+	}, [
+		showPanel,
+		greetingMessages,
+		historyLimit,
+		nextId,
+		$showcase
+	]);
+	const send = useCallback((text) => {
+		const question = (text ?? inputValueRef.current).trim();
+		if (question === "" || loadingRef.current) return;
+		runSend(question);
+	}, [runSend]);
+	const ask = useCallback((question, returnFocusTo) => {
+		const trimmed = question.trim();
+		if (trimmed === "") return;
+		if (loadingRef.current) {
+			showPanel(returnFocusTo);
+			setInput(trimmed);
+		} else runSend(trimmed, returnFocusTo);
+	}, [showPanel, runSend]);
+	const reset = useCallback(() => {
+		abortRef.current?.abort();
+		abortRef.current = null;
+		setLoading(false);
+		loadingRef.current = false;
+		setError(null);
+		setMessages(greetingMessages());
+	}, [greetingMessages]);
+	useEffect(() => {
+		if (!shortcut) return;
+		function handleKeyDown(event) {
+			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === shortcut) {
+				event.preventDefault();
+				toggle();
+			}
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [shortcut, toggle]);
+	useEffect(() => {
+		return () => {
+			if (focusTimeoutRef.current) clearTimeout(focusTimeoutRef.current);
+			if (restoreFocusTimeoutRef.current) clearTimeout(restoreFocusTimeoutRef.current);
+			abortRef.current?.abort();
+		};
+	}, []);
+	return /*#__PURE__*/ jsx(ChatContext.Provider, {
+		value: {
+			isOpen,
+			open,
+			close,
+			toggle,
+			messages,
+			input,
+			setInput,
+			loading,
+			error,
+			send,
+			ask,
+			reset,
+			inputRef
+		},
+		children
+	});
+}
+//#endregion
+export { ChatContext, ChatProvider, useChat };

package/dist/chat-showcase.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+/**
+ * The showcase command set behind ChatProvider's $showcase prop: type a
+ * command into the chat and the reply is a live demo of that element,
+ * rendered locally without touching the transport. `help` lists them all.
+ */
+export interface ShowcaseCommand {
+    name: string;
+    description: string;
+    render: () => React.ReactNode;
+}
+export declare const showcaseCommands: ShowcaseCommand[];
+/**
+ * Matches a chat question against the showcase commands ("help", "/help" and
+ * any casing all work) and returns the rendered demo, or null when the input
+ * is not a command and should go to the transport.
+ */
+export declare function resolveShowcaseCommand(input: string): React.ReactNode | null;