@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/ai/conversation/ConversationScrollButton.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import type { ButtonProps } from "../../shadcn/button/index.js";
+
+	export interface ConversationScrollButtonProps extends Omit<ButtonProps, "onclick"> {
+		class?: string;
+		onclick?: (event: MouseEvent) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { Button } from "../../shadcn/button/index.js";
+	import ArrowDown from "phosphor-svelte/lib/ArrowDown";
+	import { fly } from "svelte/transition";
+	import { backOut } from "svelte/easing";
+	import { getStickToBottomContext } from "./stick-to-bottom-context.svelte.js";
+
+	let { class: className, onclick, ...rest }: ConversationScrollButtonProps = $props();
+
+	const context = getStickToBottomContext();
+
+	function handleClick(event: MouseEvent) {
+		context.scrollToBottom();
+		onclick?.(event);
+	}
+</script>
+
+{#if !context.isAtBottom}
+	<div
+		in:fly={{ duration: 300, y: 10, easing: backOut }}
+		out:fly={{ duration: 200, y: 10, easing: backOut }}
+		class="pointer-events-auto absolute bottom-3 left-1/2 -translate-x-1/2"
+	>
+		<Button
+			class={cn(
+				"rounded-full shadow-lg backdrop-blur-sm",
+				"bg-[color:var(--background,white)]/80 hover:bg-[color:var(--background,white)]/95",
+				"border-[color:var(--border,rgba(0,0,0,0.1))]",
+				className,
+			)}
+			onclick={handleClick}
+			icon
+			type="button"
+			variant="outline"
+			aria-label="Scroll to latest"
+			{...rest}
+		>
+			<ArrowDown class="size-4" />
+		</Button>
+	</div>
+{/if}

package/src/ai/conversation/index.ts

@@ -0,0 +1,33 @@
+import Conversation from "./Conversation.svelte";
+import ConversationContent from "./ConversationContent.svelte";
+import ConversationEmptyState from "./ConversationEmptyState.svelte";
+import ConversationScrollButton from "./ConversationScrollButton.svelte";
+import {
+  StickToBottomContext,
+  getStickToBottomContext,
+  setStickToBottomContext,
+} from "./stick-to-bottom-context.svelte.js";
+
+import type { ConversationProps } from "./Conversation.svelte";
+import type { ConversationContentProps } from "./ConversationContent.svelte";
+import type { ConversationEmptyStateProps } from "./ConversationEmptyState.svelte";
+import type { ConversationScrollButtonProps } from "./ConversationScrollButton.svelte";
+
+export {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  StickToBottomContext,
+  getStickToBottomContext,
+  setStickToBottomContext,
+  type ConversationProps,
+  type ConversationContentProps,
+  type ConversationEmptyStateProps,
+  type ConversationScrollButtonProps,
+  //
+  Conversation as Root,
+  ConversationContent as Content,
+  ConversationEmptyState as EmptyState,
+  ConversationScrollButton as ScrollButton,
+};

package/src/ai/conversation/stick-to-bottom-context.svelte.ts

@@ -0,0 +1,131 @@
+import { setContext, getContext } from "svelte";
+
+const STICK_TO_BOTTOM_CONTEXT_KEY = Symbol("stick-to-bottom-context");
+
+const SCROLL_THRESHOLD_PX = 200;
+
+export class StickToBottomContext {
+  #element: HTMLElement | null = $state(null);
+  #isAtBottom = $state(true);
+  #userHasScrolled = $state(false);
+  #resizeObserver: ResizeObserver | null = null;
+  #mutationObserver: MutationObserver | null = null;
+  #intersectionObserver: IntersectionObserver | null = null;
+  #sentinel: HTMLElement | null = null;
+
+  isAtBottom = $derived(this.#isAtBottom);
+
+  setElement(element: HTMLElement) {
+    this.#cleanup();
+    this.#element = element;
+    if (element) this.#setupObservers();
+  }
+
+  scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
+    if (!this.#element) return;
+    this.#userHasScrolled = false;
+    this.#element.scrollTo({ top: this.#element.scrollHeight, behavior });
+  };
+
+  destroy() {
+    this.#cleanup();
+    this.#element = null;
+  }
+
+  #handleScroll = () => {
+    if (!this.#element) return;
+    const { scrollTop, scrollHeight, clientHeight } = this.#element;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX;
+    this.#isAtBottom = isAtBottom;
+    if (!isAtBottom) {
+      this.#userHasScrolled = true;
+    } else if (this.#userHasScrolled) {
+      this.#userHasScrolled = false;
+    }
+  };
+
+  #setupObservers() {
+    if (!this.#element) return;
+
+    this.#sentinel = document.createElement("div");
+    this.#sentinel.style.height = "1px";
+    this.#sentinel.style.width = "100%";
+    this.#sentinel.style.pointerEvents = "none";
+    this.#sentinel.style.opacity = "0";
+    this.#sentinel.setAttribute("data-stick-to-bottom-sentinel", "");
+    this.#element.appendChild(this.#sentinel);
+
+    this.#intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          this.#isAtBottom = true;
+          this.#userHasScrolled = false;
+        }
+      },
+      { threshold: 0, root: this.#element },
+    );
+    this.#intersectionObserver.observe(this.#sentinel);
+
+    this.#element.addEventListener("scroll", this.#handleScroll, { passive: true });
+
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#checkPosition();
+      if (this.#isAtBottom && !this.#userHasScrolled) {
+        this.scrollToBottom("auto");
+      }
+    });
+    this.#resizeObserver.observe(this.#element);
+
+    this.#mutationObserver = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        const shouldAutoScroll = this.#isAtBottom && !this.#userHasScrolled;
+        this.#checkPosition();
+        if (shouldAutoScroll) this.scrollToBottom("smooth");
+      });
+    });
+    this.#mutationObserver.observe(this.#element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    this.#checkPosition();
+  }
+
+  #checkPosition() {
+    if (!this.#element) return;
+    const { scrollTop, scrollHeight, clientHeight } = this.#element;
+    this.#isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX;
+  }
+
+  #cleanup() {
+    this.#resizeObserver?.disconnect();
+    this.#mutationObserver?.disconnect();
+    this.#intersectionObserver?.disconnect();
+    if (this.#element) {
+      this.#element.removeEventListener("scroll", this.#handleScroll);
+    }
+    if (this.#sentinel && this.#element?.contains(this.#sentinel)) {
+      this.#element.removeChild(this.#sentinel);
+    }
+    this.#resizeObserver = null;
+    this.#mutationObserver = null;
+    this.#intersectionObserver = null;
+    this.#sentinel = null;
+  }
+}
+
+export function setStickToBottomContext(): StickToBottomContext {
+  const context = new StickToBottomContext();
+  setContext(STICK_TO_BOTTOM_CONTEXT_KEY, context);
+  return context;
+}
+
+export function getStickToBottomContext(): StickToBottomContext {
+  const context = getContext<StickToBottomContext>(STICK_TO_BOTTOM_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("Conversation parts must be used inside a <Conversation>.");
+  }
+  return context;
+}

package/src/ai/index.ts

@@ -0,0 +1,119 @@
+// =========================
+// CONVERSATION (scroll container)
+// =========================
+
+export {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  StickToBottomContext,
+  getStickToBottomContext,
+  setStickToBottomContext,
+  type ConversationProps,
+  type ConversationContentProps,
+  type ConversationEmptyStateProps,
+  type ConversationScrollButtonProps,
+} from "./conversation/index.js";
+
+// =========================
+// COMPOSER
+// =========================
+
+export { Composer, type ComposerProps } from "./composer/index.js";
+
+// =========================
+// TYPING DOTS
+// =========================
+
+export { TypingDots, type TypingDotsProps } from "./typing-dots/index.js";
+
+// =========================
+// RESPONSE (markdown)
+// =========================
+
+export { Response, type ResponseProps } from "./response/index.js";
+
+// =========================
+// SUGGESTION
+// =========================
+
+export {
+  Suggestion,
+  Suggestions,
+  type SuggestionProps,
+  type SuggestionsProps,
+} from "./suggestion/index.js";
+
+// =========================
+// PROMPT INPUT
+// =========================
+
+export {
+  PromptInput,
+  PromptInputBody,
+  PromptInputToolbar,
+  PromptInputTextarea,
+  PromptInputSubmit,
+  type PromptInputProps,
+  type PromptInputBodyProps,
+  type PromptInputToolbarProps,
+  type PromptInputTextareaProps,
+  type PromptInputSubmitProps,
+  type PromptInputStatus,
+} from "./prompt-input/index.js";
+
+// =========================
+// CONFIRMATION
+// =========================
+
+export {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationActions,
+  ConfirmationAction,
+  type ConfirmationProps,
+  type ConfirmationTitleProps,
+  type ConfirmationRequestProps,
+  type ConfirmationAcceptedProps,
+  type ConfirmationRejectedProps,
+  type ConfirmationActionsProps,
+  type ConfirmationActionProps,
+  type ConfirmationContextValue,
+  type ConfirmationState,
+} from "./confirmation/index.js";
+
+// =========================
+// THINKING DOTS
+// =========================
+
+export { ThinkingDots, type ThinkingDotsProps } from "./thinking-dots/index.js";
+
+// =========================
+// VOICE WAVEFORM
+// =========================
+
+export { VoiceWaveform, type VoiceWaveformProps } from "./voice-waveform/index.js";
+
+// =========================
+// REASONING
+// =========================
+
+export {
+  Reasoning,
+  ReasoningTrigger,
+  ReasoningContent,
+  type ReasoningProps,
+  type ReasoningTriggerProps,
+  type ReasoningContentProps,
+  type ReasoningContextValue,
+} from "./reasoning/index.js";
+
+// =========================
+// LOADING STATE
+// =========================
+
+export { PixelLoader, type PixelLoaderProps } from "./loading-state/index.js";

package/src/ai/loading-state/PixelLoader.svelte

@@ -0,0 +1,138 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface PixelLoaderProps extends HTMLAttributes<HTMLDivElement> {
+		/** What the agent is doing. Read out by screen readers. */
+		label?: string;
+		/** Show the running clock beside the label. */
+		elapsed?: boolean;
+		/** Seconds already spent when the loader mounts, e.g. resuming a run. */
+		startSeconds?: number;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		label = "Working",
+		elapsed = true,
+		startSeconds = 0,
+		class: className,
+		...rest
+	}: PixelLoaderProps = $props();
+
+	// WHY nine cells and not a spinner: the grid reads as work happening in
+
+	// parallel, which is what an agent is doing, and it stays legible at 12px where a rotating ring turns into a smudge.
+	const CELLS = 9;
+
+	// The prop seeds the clock once; after that the clock is its own.
+	let seconds = $state(untrack(() => startSeconds));
+
+	// WHY the clock lives here and not in the caller: every surface that shows
+
+	// this loader wants the same "how long has it been" line, and a caller that forgets to tear its interval down leaks one per render.
+	$effect(() => {
+		if (!elapsed) return;
+		const id = setInterval(() => {
+			seconds += 1;
+		}, 1000);
+		return () => clearInterval(id);
+	});
+
+	const clock = $derived(
+		seconds < 60
+			? `${seconds}s`
+			: `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`,
+	);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn("pixel-loader inline-flex items-center gap-2.5", className)}
+	role="status"
+	aria-label={label}
+	{...rest}
+>
+	<span class="grid shrink-0 grid-cols-3 gap-[1.5px]" aria-hidden="true">
+		{#each { length: CELLS } as _, i (i)}
+			<span class="cell size-[4px] rounded-[1px] bg-current" style="animation-delay: {i * 90}ms"
+			></span>
+		{/each}
+	</span>
+
+	<span class="shimmer text-sm font-medium">{label}</span>
+
+	{#if elapsed}
+		<span class="font-mono text-[11px] tabular-nums text-[color:var(--muted-foreground,#71717a)]">
+			{clock}
+		</span>
+	{/if}
+</div>
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	.pixel-loader {
+		color: var(--foreground, #09090b);
+	}
+
+	.cell {
+		opacity: 0.15;
+		animation: pixel-on 650ms ease-in-out infinite;
+	}
+
+	@keyframes pixel-on {
+		0%,
+		100% {
+			opacity: 0.15;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
+
+	/* The label carries the same wait the grid does, so the two read as one
+	   object rather than as a spinner that happens to sit beside a word. */
+	.shimmer {
+		background: linear-gradient(
+			90deg,
+			var(--muted-foreground, #71717a) 0%,
+			var(--foreground, #09090b) 50%,
+			var(--muted-foreground, #71717a) 100%
+		);
+		background-size: 200% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: transparent;
+		animation: shimmer-sweep 1800ms linear infinite;
+	}
+
+	@keyframes shimmer-sweep {
+		from {
+			background-position: 200% 0;
+		}
+		to {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.cell {
+			animation: none;
+			opacity: 0.55;
+		}
+
+		.shimmer {
+			animation: none;
+			background: none;
+			color: var(--foreground, #09090b);
+		}
+	}
+</style>

package/src/ai/loading-state/index.ts

@@ -0,0 +1,5 @@
+import PixelLoader from "./PixelLoader.svelte";
+import type { PixelLoaderProps } from "./PixelLoader.svelte";
+
+export { PixelLoader, type PixelLoaderProps };
+export default PixelLoader;

package/src/ai/prompt-input/PromptInput.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLFormAttributes } from "svelte/elements";
+
+	export interface PromptInputProps extends Omit<HTMLFormAttributes, "onsubmit"> {
+		onSubmit?: (value: string, event: SubmitEvent) => void | Promise<void>;
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let { class: className, onSubmit, children, ...rest }: PromptInputProps = $props();
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if (!onSubmit) return;
+		const form = event.currentTarget as HTMLFormElement;
+		const data = new FormData(form);
+		const value = (data.get("message") as string | null) ?? "";
+		await onSubmit(value, event);
+	}
+</script>
+
+<form
+	class={cn(
+		"w-full overflow-hidden rounded-lg border bg-[color:var(--card,white)]",
+		"border-[color:var(--border,rgba(0,0,0,0.1))]",
+		"focus-within:ring-1 focus-within:ring-[color:var(--ring,currentColor)]",
+		className,
+	)}
+	onsubmit={handleSubmit}
+	{...rest}
+>
+	{@render children?.()}
+</form>

package/src/ai/prompt-input/PromptInputBody.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface PromptInputBodyProps extends HTMLAttributes<HTMLDivElement> {
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let { class: className, children, ...rest }: PromptInputBodyProps = $props();
+</script>
+
+<div class={cn("flex flex-col", className)} {...rest}>
+	{@render children?.()}
+</div>

package/src/ai/prompt-input/PromptInputSubmit.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { ButtonProps, ButtonSize, ButtonVariant } from "../../shadcn/button/index.js";
+
+	export type PromptInputStatus = "ready" | "submitted" | "streaming" | "error";
+
+	export interface PromptInputSubmitProps extends Omit<ButtonProps, "type" | "onclick"> {
+		status?: PromptInputStatus;
+		onStop?: () => void;
+		onclick?: (event: MouseEvent) => void;
+		class?: string;
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { Button } from "../../shadcn/button/index.js";
+	import LoaderIcon from "phosphor-svelte/lib/CircleNotch";
+	import SendIcon from "phosphor-svelte/lib/PaperPlaneRight";
+	import SquareIcon from "phosphor-svelte/lib/Square";
+	import XIcon from "phosphor-svelte/lib/X";
+
+	let {
+		status = "ready",
+		onStop,
+		onclick,
+		variant = "default",
+		size = "default",
+		icon = true,
+		class: className,
+		children,
+		...rest
+	}: PromptInputSubmitProps = $props();
+
+	const isGenerating = $derived(status === "submitted" || status === "streaming");
+	const buttonType = $derived<"button" | "submit">(isGenerating ? "button" : "submit");
+
+	function handleClick(event: MouseEvent) {
+		if (isGenerating) {
+			event.preventDefault();
+			onStop?.();
+			return;
+		}
+		onclick?.(event);
+	}
+</script>
+
+<Button
+	{...rest}
+	{variant}
+	{size}
+	{icon}
+	type={buttonType}
+	data-prompt-input-submit
+	onclick={handleClick}
+	aria-label={isGenerating ? "Stop" : "Submit"}
+	class={cn("gap-1.5", className)}
+>
+	{#if children}
+		{@render children()}
+	{:else if status === "submitted"}
+		<LoaderIcon class="size-4 animate-spin" />
+	{:else if status === "streaming"}
+		<SquareIcon class="size-4" />
+	{:else if status === "error"}
+		<XIcon class="size-4" />
+	{:else}
+		<SendIcon class="size-4" />
+	{/if}
+</Button>

package/src/ai/prompt-input/PromptInputTextarea.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	export interface PromptInputTextareaProps extends Omit<
+		HTMLTextareaAttributes,
+		"value" | "name" | "onkeydown"
+	> {
+		value?: string;
+		name?: string;
+		class?: string;
+		/** WHY: opt-out of "Enter submits, Shift+Enter newline" if the consumer
+		 *  prefers explicit Cmd/Ctrl+Enter only. */
+		enterSubmits?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		value = $bindable(""),
+		name = "message",
+		placeholder = "Ask anything",
+		enterSubmits = true,
+		...rest
+	}: PromptInputTextareaProps = $props();
+
+	function handleKeyDown(event: KeyboardEvent) {
+		// WHY: Cmd/Ctrl+Enter always submits regardless of `enterSubmits`. Power
+		// users expect this even when plain Enter inserts a newline.
+		if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+			event.preventDefault();
+			requestSubmit(event);
+			return;
+		}
+
+		if (!enterSubmits) return;
+		if (event.key !== "Enter") return;
+		if (event.isComposing) return;
+		if (event.shiftKey) return;
+
+		event.preventDefault();
+		requestSubmit(event);
+	}
+
+	function requestSubmit(event: KeyboardEvent) {
+		const form = (event.currentTarget as HTMLTextAreaElement).form;
+		if (!form) return;
+		const submit =
+			form.querySelector<HTMLButtonElement>("[data-prompt-input-submit]") ??
+			form.querySelector<HTMLButtonElement>('button[type="submit"]');
+		if (submit?.disabled) return;
+		if (submit) {
+			form.requestSubmit(submit);
+		} else {
+			form.requestSubmit();
+		}
+	}
+</script>
+
+<textarea
+	class={cn(
+		"field-sizing-content max-h-48 min-h-10 w-full resize-none border-0 bg-transparent p-3 text-sm outline-none",
+		"placeholder:text-[color:var(--muted-foreground,inherit)]",
+		"focus-visible:ring-0",
+		className,
+	)}
+	{name}
+	bind:value
+	onkeydown={handleKeyDown}
+	{placeholder}
+	{...rest}
+></textarea>