@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/streaming-text/streaming-text.styles.ts

@@ -0,0 +1,166 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize, glyphSize } from "../../styles/dimensions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+// A word resolves out of a soft blur as it arrives.
+const resolve = keyframes({
+	from: { filter: "blur(4px)", opacity: 0 },
+	to: { filter: "blur(0)", opacity: 1 },
+});
+// A new word arrives faint and violet, warms to pink, then settles into the
+// text color. Words keep landing behind it, so the newest few form a
+// gradient at the growing edge of the reply.
+const trail = keyframes({
+	"0%": {
+		color: colors.chartSeries1,
+		filter: "blur(4px)",
+		opacity: 0,
+	},
+	"25%": {
+		color: colors.chartSeries3,
+		filter: "blur(0)",
+		opacity: 1,
+	},
+	"100%": { color: "inherit", filter: "blur(0)", opacity: 1 },
+});
+
+const arrive = {
+	animationDuration: {
+		[conditions.reducedMotion]: duration.instant,
+		default: "360ms",
+	},
+	animationFillMode: "both",
+	animationTimingFunction: easing.expoOut,
+} as const;
+
+export const streamingTextStyles = create({
+	actions: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["1"],
+		// The first glyph lines up with the text, not its button's padding.
+		marginInlineStart: `calc((${controlSize.xs} - ${glyphSize.xs}) / -2)`,
+		// Held in place while streaming so the reply never jumps on completion.
+		opacity: { ":is([data-status='streaming'] *)": 0, default: 1 },
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "opacity",
+		transitionTimingFunction: easing.expoOut,
+	},
+	actionsGroup: { alignItems: "center", display: "flex", gap: 0 },
+	error: {
+		alignItems: "center",
+		color: colors.destructiveText,
+		display: "flex",
+		gap: space["2"],
+		margin: 0,
+	},
+	followUp: {
+		alignItems: "center",
+		appearance: "none",
+		backgroundColor: {
+			[conditions.canHover]: {
+				":hover": colors.controlSurfaceHover,
+				default: "transparent",
+			},
+			default: "transparent",
+		},
+		borderRadius: shape.controlRadius,
+		borderWidth: 0,
+		color: colors.content,
+		cursor: "pointer",
+		display: "flex",
+		gap: space["2"],
+		inlineSize: "100%",
+		margin: 0,
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: -2,
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: borderWidth.focus,
+		paddingBlock: space["2"],
+		paddingInline: space["2"],
+		textAlign: "start",
+	},
+	followUpIcon: {
+		color: colors.mutedContent,
+		flexShrink: 0,
+		transform: { ":dir(rtl)": "scaleX(-1)", default: "none" },
+	},
+
+	followUps: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		marginBlockStart: space["3"],
+	},
+	followUpsList: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		listStyle: "none",
+		margin: 0,
+		marginInline: `calc(-1 * ${space["2"]})`,
+		padding: 0,
+	},
+	followUpsTitle: { color: colors.mutedContent, margin: 0 },
+	// Reasoning reads quieter than the reply it leads to.
+	reasoningText: { color: colors.mutedContent },
+	// Resolves out of blur without the color trail: citations keep their muted
+	// color, and reasoning words stay muted.
+	resolveArrive: {
+		animationName: { [conditions.reducedMotion]: "none", default: resolve },
+		...arrive,
+	},
+	root: {
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		minInlineSize: 0,
+	},
+	text: {
+		margin: 0,
+		overflowWrap: "anywhere",
+		// Balanced wrapping would re-wrap visible lines as each word lands.
+		textWrap: "wrap",
+		// Line breaks in the reply stay; runs of spaces collapse.
+		whiteSpace: "pre-line",
+	},
+	// Clips the line still easing open; the margin keeps the blur visible.
+	textFrame: {
+		overflow: "clip",
+		overflowClipMargin: space["1"],
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "240ms",
+		},
+		transitionProperty: "height",
+		transitionTimingFunction: easing.expoOut,
+	},
+	word: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "1200ms",
+		},
+		// Backwards only: once settled, the word takes the inherited color.
+		animationFillMode: "backwards",
+		animationName: { [conditions.reducedMotion]: "none", default: trail },
+		animationTimingFunction: easing.easeOut,
+	},
+});
+
+// A burst of words staggers in, so it never lands all at once.
+export const streamingTextDynamic = create({
+	delay: (delay: string) => ({ animationDelay: delay }),
+});

package/src/components/streaming-text/streaming-text.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { AnimatePresence, m } from "motion/react";
+import { type ComponentPropsWithRef, useCallback } from "react";
+import type { Closed } from "../../closed";
+import { CopyButton } from "../../copy-button";
+import {
+	IconAlertCircle,
+	IconArrowBackUp,
+	IconRefresh,
+	IconThumbDown,
+	IconThumbUp,
+} from "../../icons";
+import { disclosure, MotionScope } from "../../motion";
+import { typeRoles } from "../../styles/typography.styles";
+import { Button } from "../button/button";
+import { Sources } from "../sources/sources";
+import { visuallyHiddenStyles } from "../visually-hidden/visually-hidden.styles";
+import { streamingTextStyles as styles } from "./streaming-text.styles";
+import {
+	citedSources,
+	plainText,
+	StreamedWords,
+	type StreamingTextPart,
+	type StreamingTextSource,
+} from "./streaming-text-words";
+
+export type {
+	StreamingTextPart,
+	StreamingTextSource,
+} from "./streaming-text-words";
+/**
+ * `streaming` while words arrive, `complete` once the reply has ended, and
+ * `error` when it stopped early; the partial reply stays.
+ */
+export type StreamingTextState = "complete" | "error" | "streaming";
+export type StreamingTextFeedback = "down" | "up";
+
+export type StreamingTextProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "content" | "data-slot" | "role"
+> & {
+	/**
+	 * The reply so far: text, or text with citations placed where the model
+	 * cites them. Pass the growing value as it streams; only new words animate.
+	 */
+	content: string | readonly StreamingTextPart[];
+	/** The rating the person gave, if any. */
+	feedback?: StreamingTextFeedback | null;
+	/** Prompts offered once the reply is complete. */
+	followUps?: readonly string[];
+	/** Shows Good and Bad response buttons. */
+	onFeedback?: (feedback: StreamingTextFeedback | null) => void;
+	onFollowUp?: (prompt: string, index: number) => void;
+	/** Shows a Retry button. */
+	onRetry?: () => void;
+	/** Sources cited in `content`, listed under the reply. */
+	sources?: readonly StreamingTextSource[];
+	status: StreamingTextState;
+};
+
+function FeedbackButtons({
+	feedback,
+	onFeedback,
+}: {
+	feedback: StreamingTextFeedback | null | undefined;
+	onFeedback: (feedback: StreamingTextFeedback | null) => void;
+}) {
+	const up = useCallback(
+		() => onFeedback(feedback === "up" ? null : "up"),
+		[feedback, onFeedback]
+	);
+	const down = useCallback(
+		() => onFeedback(feedback === "down" ? null : "down"),
+		[feedback, onFeedback]
+	);
+	return (
+		<>
+			<Button
+				aria-label="Good response"
+				aria-pressed={feedback === "up"}
+				onClick={up}
+				size="icon-xs"
+				variant="ghost"
+			>
+				<IconThumbUp aria-hidden="true" size="1em" />
+			</Button>
+			<Button
+				aria-label="Bad response"
+				aria-pressed={feedback === "down"}
+				onClick={down}
+				size="icon-xs"
+				variant="ghost"
+			>
+				<IconThumbDown aria-hidden="true" size="1em" />
+			</Button>
+		</>
+	);
+}
+
+// Follow-ups rise in one after another when a reply finishes on screen; a
+// reply that loads complete shows them at once.
+const staggered = {
+	hidden: {},
+	shown: { transition: { staggerChildren: 0.09 } },
+};
+const rising = {
+	hidden: { opacity: 0, y: 4 },
+	shown: { opacity: 1, transition: disclosure, y: 0 },
+};
+
+function FollowUp({
+	index,
+	onFollowUp,
+	prompt,
+}: {
+	index: number;
+	onFollowUp: StreamingTextProps["onFollowUp"];
+	prompt: string;
+}) {
+	const choose = useCallback(
+		() => onFollowUp?.(prompt, index),
+		[index, onFollowUp, prompt]
+	);
+	return (
+		<m.li variants={rising}>
+			<button
+				onClick={choose}
+				type="button"
+				{...props(typeRoles.ui, styles.followUp)}
+			>
+				<IconArrowBackUp
+					aria-hidden="true"
+					size={14}
+					{...props(styles.followUpIcon)}
+				/>
+				{prompt}
+			</button>
+		</m.li>
+	);
+}
+
+function FollowUps({
+	followUps,
+	onFollowUp,
+}: {
+	followUps: readonly string[];
+	onFollowUp: StreamingTextProps["onFollowUp"];
+}) {
+	return (
+		<div data-slot="streaming-text-follow-ups" {...props(styles.followUps)}>
+			<p {...props(typeRoles.label, styles.followUpsTitle)}>Follow-ups</p>
+			<m.ul
+				animate="shown"
+				initial="hidden"
+				variants={staggered}
+				{...props(styles.followUpsList)}
+			>
+				{followUps.map((prompt, index) => (
+					<FollowUp
+						index={index}
+						key={prompt}
+						onFollowUp={onFollowUp}
+						prompt={prompt}
+					/>
+				))}
+			</m.ul>
+		</div>
+	);
+}
+
+const STOPPED = "The reply stopped before it finished.";
+
+// The visible note shows only on error; the live region is always present so
+// the announcement is not lost.
+function ErrorNote({ error }: { error: boolean }) {
+	return (
+		<>
+			{error ? (
+				<p
+					data-slot="streaming-text-error"
+					{...props(typeRoles.ui, styles.error)}
+				>
+					<IconAlertCircle aria-hidden="true" size={16} />
+					{STOPPED}
+				</p>
+			) : null}
+			<span
+				aria-live="polite"
+				role="status"
+				{...props(visuallyHiddenStyles.root)}
+			>
+				{error ? STOPPED : null}
+			</span>
+		</>
+	);
+}
+
+function Actions({
+	content,
+	feedback,
+	onFeedback,
+	onRetry,
+	sources,
+	streaming,
+}: Pick<
+	StreamingTextProps,
+	"content" | "feedback" | "onFeedback" | "onRetry"
+> & { sources: readonly StreamingTextSource[]; streaming: boolean }) {
+	// Present while streaming so the reply never jumps, but inert.
+	return (
+		<div
+			data-slot="streaming-text-actions"
+			inert={streaming}
+			{...props(styles.actions)}
+		>
+			<div {...props(styles.actionsGroup)}>
+				<CopyButton
+					label="Copy response"
+					text={plainText(content, sources.length)}
+				/>
+				{onRetry ? (
+					<Button
+						aria-label="Retry"
+						onClick={onRetry}
+						size="icon-xs"
+						variant="ghost"
+					>
+						<IconRefresh aria-hidden="true" size="1em" />
+					</Button>
+				) : null}
+				{onFeedback ? (
+					<FeedbackButtons feedback={feedback} onFeedback={onFeedback} />
+				) : null}
+			</div>
+		</div>
+	);
+}
+
+/**
+ * A reply that arrives a word at a time. Words resolve out of a soft blur,
+ * citations sit where the model cites them, and once the reply is complete
+ * its actions, sources, and follow-ups become available.
+ */
+export function StreamingText({
+	content,
+	feedback,
+	followUps = [],
+	onFeedback,
+	onFollowUp,
+	onRetry,
+	ref: forwardedRef,
+	sources = [],
+	status,
+	...rest
+}: StreamingTextProps) {
+	const streaming = status === "streaming";
+	for (const name of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	return (
+		<div
+			{...rest}
+			data-slot="streaming-text"
+			data-status={status}
+			ref={forwardedRef}
+			{...props(styles.root)}
+		>
+			<StreamedWords
+				content={content}
+				sources={sources}
+				streaming={streaming}
+			/>
+			<ErrorNote error={status === "error"} />
+			{/* While words arrive, a source shows once the reply cites it. */}
+			<Sources sources={streaming ? citedSources(content, sources) : sources} />
+			<Actions
+				content={content}
+				feedback={feedback}
+				onFeedback={onFeedback}
+				onRetry={onRetry}
+				sources={sources}
+				streaming={streaming}
+			/>
+			<MotionScope>
+				<AnimatePresence initial={false}>
+					{status === "complete" && followUps.length > 0 ? (
+						<FollowUps
+							followUps={followUps}
+							key="follow-ups"
+							onFollowUp={onFollowUp}
+						/>
+					) : null}
+				</AnimatePresence>
+			</MotionScope>
+		</div>
+	);
+}

package/src/components/suggestion/suggestion.styles.ts

@@ -0,0 +1,55 @@
+import { create } from "@stylexjs/stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+const ring = `${borderWidth.focus}px`;
+// The strip under the pills: a 4px thumb, 2px clear of the pills, in a bar
+// with 1px around it. The focus ring's 3px fits inside it too.
+const bar = `calc(${space["1"]} + 2px)`;
+const strip = `calc(${bar} + 1px)`;
+
+export const suggestionStyles = create({
+	// One row tall: a scroll area fills its parent by default, but a row of
+	// pills sizes to its content.
+	fit: { height: "auto" },
+	glyph: { display: "inline-flex", flexShrink: 0 },
+	// The press surface on ::before inherits this radius, so it is a pill too.
+	pill: {
+		borderEndEndRadius: 9999,
+		borderEndStartRadius: 9999,
+		borderStartEndRadius: 9999,
+		borderStartStartRadius: 9999,
+		flexShrink: 0,
+		whiteSpace: "nowrap",
+	},
+	// The focus-ring room above and below, and the scrollbar's strip, taken
+	// back outside the scroll area, so the row lines up with what sits above
+	// and below it. Inside, a negative block margin would overflow and scroll.
+	// The row takes the width it is given and never asks for more, so a
+	// long row scrolls instead of widening the layout around it.
+	root: {
+		contain: "inline-size",
+		marginBlockEnd: `calc(-1 * ${strip})`,
+		marginBlockStart: `-${ring}`,
+	},
+	// One line of pills. The inset leaves room for the focus ring inside the
+	// scroll area; the inline margin takes it back, so the row lines up with
+	// what sits beside it.
+	row: {
+		display: "flex",
+		gap: space["2"],
+		// Centered under an empty state's words while it fits; otherwise it
+		// starts at the edge and scrolls.
+		marginInline: {
+			":is([data-slot='conversation-empty-state'] *)": "auto",
+			default: `-${ring}`,
+		},
+		padding: ring,
+		paddingBlockEnd: strip,
+		width: "max-content",
+	},
+	// Thinner than a list's scrollbar, in its own strip under the pills.
+	scrollbar: { height: bar, margin: 0, padding: "1px" },
+	// Focus scrolls a pill clear of the 1.5rem fade, not just to the edge.
+	viewport: { scrollPaddingInline: "1.5rem" },
+});

package/src/components/suggestion/suggestion.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { Button as BaseButton } from "@base-ui/react/button";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, type ReactNode, useCallback } from "react";
+import type { Closed } from "../../closed";
+import { buttonStyles } from "../button/button.styles";
+import { scrollAreaStyles } from "../scroll-area/scroll-area.styles";
+import { suggestionStyles as styles } from "./suggestion.styles";
+
+export type SuggestionsProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"data-slot" | "role"
+> & {
+	/** Names the row for screen readers. */
+	"aria-label"?: string;
+	children: ReactNode;
+};
+
+/**
+ * A row of prompts the person can send in one click, above the composer.
+ * It stays one line: when the pills outrun the space it scrolls sideways,
+ * and its edges fade where more wait.
+ */
+export function Suggestions({
+	"aria-label": ariaLabel = "Suggestions",
+	children,
+	ref,
+	...rest
+}: SuggestionsProps) {
+	for (const prop of ["className", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+	return (
+		// The faded edges say there is more. Touch, trackpads, and focus scroll
+		// the row; a thin thumb appears on hover for a mouse.
+		<BaseScrollArea.Root
+			aria-label={ariaLabel}
+			ref={ref}
+			role="group"
+			{...props(scrollAreaStyles.root, styles.fit, styles.root)}
+		>
+			<BaseScrollArea.Viewport
+				{...props(
+					scrollAreaStyles.viewport,
+					scrollAreaStyles.viewportFade,
+					scrollAreaStyles.viewportOverscrollContain,
+					styles.fit,
+					styles.viewport
+				)}
+			>
+				<BaseScrollArea.Content
+					{...rest}
+					data-slot="suggestions"
+					{...props(styles.row)}
+				>
+					{children}
+				</BaseScrollArea.Content>
+			</BaseScrollArea.Viewport>
+			<BaseScrollArea.Scrollbar
+				orientation="horizontal"
+				{...props(
+					scrollAreaStyles.scrollbar,
+					scrollAreaStyles.scrollbarHorizontal,
+					styles.scrollbar
+				)}
+			>
+				<BaseScrollArea.Thumb {...props(scrollAreaStyles.thumb)} />
+			</BaseScrollArea.Scrollbar>
+		</BaseScrollArea.Root>
+	);
+}
+
+export type SuggestionProps = Omit<
+	Closed<ComponentPropsWithRef<"button">>,
+	"children" | "data-slot" | "onClick" | "type"
+> & {
+	/** A glyph before the words, such as a test tube for "Write tests". */
+	icon?: ReactNode;
+	/** Called with the suggestion, which is the message to send. */
+	onClick?: (suggestion: string) => void;
+	/** The prompt, shown as the label and passed to `onClick`. */
+	suggestion: string;
+};
+
+/** One prompt: an outline pill whose label is the message it sends. */
+export function Suggestion({
+	disabled = false,
+	icon,
+	onClick,
+	ref,
+	suggestion,
+	...rest
+}: SuggestionProps) {
+	for (const prop of ["className", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+	const send = useCallback(() => onClick?.(suggestion), [onClick, suggestion]);
+	return (
+		<BaseButton
+			{...rest}
+			data-slot="suggestion"
+			disabled={disabled}
+			onClick={send}
+			ref={ref}
+			type="button"
+			{...props(
+				buttonStyles.base,
+				buttonStyles.outline,
+				buttonStyles.sm,
+				disabled ? buttonStyles.disabled : buttonStyles.press,
+				disabled ? null : buttonStyles.interactionOutline,
+				styles.pill
+			)}
+		>
+			{icon ? (
+				<span aria-hidden="true" {...props(styles.glyph)}>
+					{icon}
+				</span>
+			) : null}
+			{suggestion}
+		</BaseButton>
+	);
+}