@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/activity-feed/activity-feed.tsx

@@ -0,0 +1,182 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import type { ListContentProps, ListItemProps } from "../list/list";
+import { listStyles } from "../list/list.styles";
+import { activityFeedStyles } from "./activity-feed.styles";
+
+type ActivityFeedContentProps = ListContentProps;
+type ActivityFeedItemProps = ListItemProps;
+function ActivityFeedContent({ ref, ...rest }: ActivityFeedContentProps) {
+	stripReservedProps(rest);
+	return (
+		<div
+			{...rest}
+			data-slot="activity-feed-content"
+			ref={ref}
+			{...props(activityFeedStyles.content)}
+		/>
+	);
+}
+
+export type ActivityFeedHeaderProps = ListContentProps;
+
+export function ActivityFeedHeader({ ref, ...rest }: ActivityFeedHeaderProps) {
+	stripReservedProps(rest);
+	return (
+		<div
+			{...rest}
+			data-slot="activity-feed-header"
+			ref={ref}
+			{...props(activityFeedStyles.header)}
+		/>
+	);
+}
+
+export type ActivityFeedMediaProps = ListContentProps;
+export type ActivityFeedSummaryProps = Omit<
+	Closed<ComponentPropsWithRef<"p">>,
+	"data-slot" | "role"
+>;
+export type ActivityFeedDescriptionProps = ActivityFeedSummaryProps;
+export type ActivityFeedDetailsProps = ListContentProps;
+
+export function ActivityFeedMedia({ ref, ...rest }: ActivityFeedMediaProps) {
+	stripReservedProps(rest);
+	return (
+		<div
+			{...rest}
+			data-slot="activity-feed-media"
+			ref={ref}
+			{...props(activityFeedStyles.media)}
+		/>
+	);
+}
+export function ActivityFeedSummary({
+	ref,
+	...rest
+}: ActivityFeedSummaryProps) {
+	stripReservedProps(rest);
+	return (
+		<p
+			{...rest}
+			data-slot="activity-feed-summary"
+			ref={ref}
+			{...props(typeRoles.body, activityFeedStyles.summary)}
+		/>
+	);
+}
+export function ActivityFeedDescription({
+	ref,
+	...rest
+}: ActivityFeedDescriptionProps) {
+	stripReservedProps(rest);
+	return (
+		<p
+			{...rest}
+			data-slot="activity-feed-description"
+			ref={ref}
+			{...props(typeRoles.ui, activityFeedStyles.description)}
+		/>
+	);
+}
+export function ActivityFeedDetails({
+	ref,
+	...rest
+}: ActivityFeedDetailsProps) {
+	stripReservedProps(rest);
+	return (
+		<div
+			{...rest}
+			data-slot="activity-feed-details"
+			ref={ref}
+			{...props(typeRoles.body, activityFeedStyles.details)}
+		/>
+	);
+}
+
+function ActivityFeedItem({
+	children,
+	ref: forwardedRef,
+	...rest
+}: ActivityFeedItemProps) {
+	stripReservedProps(rest);
+
+	return (
+		<li
+			{...rest}
+			data-slot="activity-feed-item"
+			ref={forwardedRef}
+			{...props(activityFeedStyles.item)}
+		>
+			{children}
+		</li>
+	);
+}
+
+export type { ActivityFeedContentProps, ActivityFeedItemProps };
+export { ActivityFeedContent, ActivityFeedItem };
+
+export type ActivityFeedProps = Omit<
+	Closed<ComponentPropsWithRef<"ol">>,
+	"data-slot" | "role"
+> & { variant?: "default" | "timeline" };
+
+export type ActivityFeedTimeProps = Omit<
+	Closed<ComponentPropsWithRef<"time">>,
+	"children" | "data-slot" | "dateTime" | "role"
+> & {
+	children: ReactNode;
+	dateTime: string;
+};
+
+function stripReservedProps(rest: object) {
+	for (const key of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, key);
+	}
+}
+
+export function ActivityFeed({
+	children,
+	variant = "default",
+	ref: forwardedRef,
+	...rest
+}: ActivityFeedProps) {
+	stripReservedProps(rest);
+
+	return (
+		<ol
+			{...rest}
+			data-slot="activity-feed"
+			data-variant={variant}
+			ref={forwardedRef}
+			// biome-ignore lint/a11y/noRedundantRoles: list markers are removed, which can hide list semantics in Safari.
+			role="list"
+			{...props(listStyles.root, typeRoles.body, activityFeedStyles.root)}
+		>
+			{children}
+		</ol>
+	);
+}
+
+export function ActivityFeedTime({
+	children,
+	dateTime,
+	ref: forwardedRef,
+	...rest
+}: ActivityFeedTimeProps) {
+	stripReservedProps(rest);
+
+	return (
+		<time
+			{...rest}
+			data-slot="activity-feed-time"
+			dateTime={dateTime}
+			ref={forwardedRef}
+			{...props(typeRoles.ui, activityFeedStyles.time)}
+		>
+			{children}
+		</time>
+	);
+}

package/src/components/agent-thinking/agent-thinking.styles.ts

@@ -0,0 +1,140 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { controlSize } 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";
+import { lineHeight } from "../../styles/typography.stylex";
+
+// A soft highlight sweeps across the step label while the model works.
+const sweep = keyframes({
+	from: { backgroundPosition: "100% 0" },
+	to: { backgroundPosition: "-100% 0" },
+});
+
+// Five lines of reasoning stay in view while it streams.
+const WINDOW_LINES = 5;
+
+export const agentThinkingStyles = create({
+	chevron: {
+		color: colors.mutedContent,
+		transform: {
+			":is([data-panel-open] *)": "rotate(180deg)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "transform",
+		transitionTimingFunction: easing.expoOut,
+	},
+	// Sources above the reasoning. The space above sits inside the panel, so
+	// it folds away with it instead of snapping at the end.
+	content: {
+		display: "flex",
+		flexDirection: "column",
+		paddingBlockStart: space["2"],
+	},
+	duration: { color: colors.mutedContent },
+	header: {
+		alignItems: "flex-start",
+		color: colors.content,
+		display: "flex",
+		gap: space["2"],
+		margin: 0,
+		minBlockSize: lineHeight["20"],
+	},
+	// Holds the thinking indicator on the first line of a wrapping step.
+	indicator: {
+		alignItems: "center",
+		blockSize: lineHeight["20"],
+		display: "inline-flex",
+		flexShrink: 0,
+	},
+	inner: { display: "flex", flexDirection: "column", gap: space["2"] },
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		minInlineSize: 0,
+	},
+	sources: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["1"],
+		marginInlineStart: `calc(-1 * ${space["1"]})`,
+	},
+	// Text clipped to a moving gradient, so a light sweeps across it.
+	stage: {
+		animationDuration: "2s",
+		animationIterationCount: "infinite",
+		animationName: {
+			[conditions.forcedColors]: "none",
+			[conditions.reducedMotion]: "none",
+			default: sweep,
+		},
+		animationTimingFunction: easing.linear,
+		backgroundClip: {
+			[conditions.forcedColors]: "border-box",
+			default: "text",
+		},
+		backgroundImage: {
+			[conditions.forcedColors]: "none",
+			default: `linear-gradient(90deg, ${colors.mutedContent} 30%, ${colors.content} 50%, ${colors.mutedContent} 70%)`,
+		},
+		backgroundSize: "200% 100%",
+		color: {
+			[conditions.forcedColors]: "CanvasText",
+			[conditions.reducedMotion]: colors.content,
+			default: "transparent",
+		},
+	},
+	// A plain line when there is nothing to open.
+	summary: {
+		alignItems: "center",
+		color: colors.content,
+		display: "flex",
+		gap: space["1"],
+		margin: 0,
+	},
+	toggle: {
+		alignItems: "center",
+		appearance: "none",
+		backgroundColor: "transparent",
+		borderRadius: shape.controlRadius,
+		borderWidth: 0,
+		color: colors.content,
+		cursor: "pointer",
+		display: "inline-flex",
+		gap: space["1"],
+		margin: 0,
+		marginInlineStart: `calc(-1 * ${space["1"]})`,
+		// The smallest control height: a 24px target around one line of text.
+		minBlockSize: controlSize["2xs"],
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: 0,
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: borderWidth.focus,
+		paddingBlock: 0,
+		paddingInline: space["1"],
+		textAlign: "start",
+	},
+	// While streaming, the newest lines sit at the bottom of a fixed window,
+	// and older lines fade out at the top once it overflows.
+	window: {
+		justifyContent: "flex-end",
+		maskImage: {
+			// Clear through the padding, so a clipped line never shows its edge.
+			"[data-overflowing]": `linear-gradient(to bottom, transparent ${space["2"]}, black calc(${space["2"]} + ${lineHeight["20"]}))`,
+			default: "none",
+		},
+		// The padding above stays clear of the five lines.
+		maxBlockSize: `calc(${WINDOW_LINES} * ${lineHeight["20"]} + ${space["2"]})`,
+		overflow: "hidden",
+	},
+});

package/src/components/agent-thinking/agent-thinking.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, type RefCallback, useState } from "react";
+import type { Closed } from "../../closed";
+import { IconChevronDown } from "../../icons";
+import { typeRoles } from "../../styles/typography.styles";
+import { formatSeconds, useElapsed } from "../../use-elapsed";
+import {
+	Collapsible,
+	CollapsiblePanel,
+	CollapsibleTrigger,
+} from "../collapsible/collapsible";
+import { CitationChip } from "../inline-citation/inline-citation";
+import { Spinner } from "../spinner/spinner";
+import { streamingTextStyles } from "../streaming-text/streaming-text.styles";
+import {
+	StreamedWords,
+	type StreamingTextSource,
+} from "../streaming-text/streaming-text-words";
+import { visuallyHiddenStyles } from "../visually-hidden/visually-hidden.styles";
+import { agentThinkingStyles as styles } from "./agent-thinking.styles";
+
+/** `streaming` while the model reasons; `complete` once it starts to answer. */
+export type AgentThinkingState = "complete" | "streaming";
+
+export type AgentThinkingProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "content" | "data-slot" | "role"
+> & {
+	/** The reasoning so far. Paragraphs are separated by blank lines. */
+	content?: string;
+	/**
+	 * Seconds spent thinking, for a reply loaded from history. While the
+	 * component watches the reasoning stream, it measures this itself.
+	 */
+	duration?: number;
+	/** Sources the model is reading, shown as they arrive. */
+	sources?: readonly StreamingTextSource[];
+	/** What the model is doing now, such as "Reviewing the incident call". */
+	stage?: string;
+	status: AgentThinkingState;
+};
+
+// The fade at the top appears only once older lines are out of view, so a
+// short reasoning never loses its first line. The inner wrapper is always
+// present, so its growth is seen even after the window stops growing.
+function watchOverflow(frame: HTMLDivElement | null) {
+	const inner = frame?.firstElementChild;
+	if (!(frame && inner) || typeof ResizeObserver === "undefined") {
+		return;
+	}
+	// Content anchored to the bottom spills upward, which scrollHeight does not
+	// count, so compare the wrapper with the window's content box directly.
+	const observer = new ResizeObserver(() => {
+		const room =
+			frame.clientHeight -
+			Number.parseFloat(getComputedStyle(frame).paddingTop);
+		frame.toggleAttribute(
+			"data-overflowing",
+			inner.getBoundingClientRect().height > room + 1
+		);
+	});
+	observer.observe(inner);
+	observer.observe(frame);
+	return () => observer.disconnect();
+}
+
+function Sources({
+	sources,
+	streaming,
+}: {
+	sources: readonly StreamingTextSource[];
+	streaming: boolean;
+}) {
+	if (sources.length === 0) {
+		return null;
+	}
+	return (
+		<div data-slot="agent-thinking-sources" {...props(styles.sources)}>
+			{sources.map((source, index) => (
+				<CitationChip
+					arrival={streaming ? streamingTextStyles.resolveArrive : undefined}
+					// biome-ignore lint/suspicious/noArrayIndexKey: sources only append, so a position is stable.
+					key={index}
+					sources={[source]}
+				/>
+			))}
+		</div>
+	);
+}
+
+function Header({
+	expandable,
+	markEnd,
+	markStart,
+	seconds,
+	stage,
+	streaming,
+}: {
+	expandable: boolean;
+	markEnd: RefCallback<HTMLElement>;
+	markStart: RefCallback<HTMLElement>;
+	seconds: number | undefined;
+	stage: string;
+	streaming: boolean;
+}) {
+	if (streaming) {
+		return (
+			<p
+				data-slot="agent-thinking-stage"
+				ref={markStart}
+				{...props(typeRoles.ui, styles.header)}
+			>
+				<span {...props(styles.indicator)}>
+					<Spinner aria-hidden="true" variant="thinking" />
+				</span>
+				<span {...props(styles.stage)}>{stage}</span>
+			</p>
+		);
+	}
+	const label = (
+		<>
+			Thought
+			{seconds === undefined ? null : (
+				<span {...props(styles.duration)}>for {formatSeconds(seconds)}</span>
+			)}
+		</>
+	);
+	if (!expandable) {
+		return (
+			<p ref={markEnd} {...props(typeRoles.ui, styles.summary)}>
+				{label}
+			</p>
+		);
+	}
+	return (
+		<CollapsibleTrigger
+			ref={markEnd}
+			render={<button type="button" {...props(typeRoles.ui, styles.toggle)} />}
+		>
+			{label}
+			<IconChevronDown
+				aria-hidden="true"
+				size={14}
+				{...props(styles.chevron)}
+			/>
+		</CollapsibleTrigger>
+	);
+}
+
+// One region, always present, announces each step and then the time spent;
+// a region that appears with text already in it is often not read.
+function Announcement({
+	seconds,
+	stage,
+	streaming,
+}: {
+	seconds: number | undefined;
+	stage: string;
+	streaming: boolean;
+}) {
+	let message = stage;
+	if (!streaming) {
+		message =
+			seconds === undefined
+				? "Thought"
+				: `Thought for ${formatSeconds(seconds)}`;
+	}
+	return (
+		<span
+			aria-live="polite"
+			data-slot="agent-thinking-status"
+			role="status"
+			{...props(visuallyHiddenStyles.root)}
+		>
+			{message}
+		</span>
+	);
+}
+
+// The sources and reasoning, capped to a rolling window until opened.
+function Body({
+	capped,
+	content,
+	sources,
+	streaming,
+}: {
+	capped: boolean;
+	content: string;
+	sources: readonly StreamingTextSource[];
+	streaming: boolean;
+}) {
+	return (
+		<CollapsiblePanel>
+			<div
+				data-slot="agent-thinking-content"
+				ref={capped ? watchOverflow : undefined}
+				{...props(styles.content, capped && styles.window)}
+			>
+				<div {...props(styles.inner)}>
+					<Sources sources={sources} streaming={streaming} />
+					{content ? (
+						<StreamedWords
+							content={content}
+							slot="agent-thinking-reasoning"
+							sources={[]}
+							streaming={streaming}
+							tone="reasoning"
+						/>
+					) : null}
+				</div>
+			</div>
+		</CollapsiblePanel>
+	);
+}
+
+/**
+ * The model working before it answers. While it reasons, the current step
+ * shimmers beside a thinking indicator, with the sources it reads and the
+ * newest lines of its reasoning; once done, it folds into "Thought for 7s".
+ */
+export function AgentThinking({
+	content = "",
+	duration,
+	ref: forwardedRef,
+	sources = [],
+	stage = "Thinking",
+	status,
+	...rest
+}: AgentThinkingProps) {
+	const streaming = status === "streaming";
+	const time = useElapsed();
+	const [open, setOpen] = useState(false);
+	const seconds = duration ?? time.seconds;
+	const expandable = content !== "" || sources.length > 0;
+	// The window stays capped until the reader opens it, so the fold closes
+	// from what was on screen.
+	const capped = streaming || !open;
+	for (const name of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	return (
+		<div
+			{...rest}
+			data-slot="agent-thinking"
+			data-status={status}
+			ref={forwardedRef}
+		>
+			<Collapsible
+				onOpenChange={setOpen}
+				open={streaming || open}
+				render={<div {...props(styles.root)} />}
+			>
+				<Announcement seconds={seconds} stage={stage} streaming={streaming} />
+				<Header
+					expandable={expandable}
+					markEnd={time.markEnd}
+					markStart={time.markStart}
+					seconds={seconds}
+					stage={stage}
+					streaming={streaming}
+				/>
+				{expandable ? (
+					<Body
+						capped={capped}
+						content={content}
+						sources={sources}
+						streaming={streaming}
+					/>
+				) : null}
+			</Collapsible>
+		</div>
+	);
+}