@heyramzi/ui 0.0.0-stage → 1.53.0

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

@@ -0,0 +1,79 @@
+<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;
+		/** Accessible name while idle. Translate at the call site. */
+		submitLabel?: string;
+		/** Accessible name while generating, when a click stops the run. */
+		stopLabel?: string;
+		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 { Spinner } from "../../shadcn/spinner/index.js";
+	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,
+		submitLabel = "Submit",
+		stopLabel = "Stop",
+		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 ? stopLabel : submitLabel}
+	class={cn("gap-1.5", className)}
+>
+	{#if children}
+		{@render children()}
+	{:else if status === "submitted"}
+		<Spinner />
+	{: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>

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

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

package/src/ai/prompt-input/index.ts

@@ -0,0 +1,34 @@
+import PromptInput from "./PromptInput.svelte";
+import PromptInputBody from "./PromptInputBody.svelte";
+import PromptInputToolbar from "./PromptInputToolbar.svelte";
+import PromptInputTextarea from "./PromptInputTextarea.svelte";
+import PromptInputSubmit from "./PromptInputSubmit.svelte";
+
+import type { PromptInputProps } from "./PromptInput.svelte";
+import type { PromptInputBodyProps } from "./PromptInputBody.svelte";
+import type { PromptInputToolbarProps } from "./PromptInputToolbar.svelte";
+import type { PromptInputTextareaProps } from "./PromptInputTextarea.svelte";
+import type {
+  PromptInputSubmitProps,
+  PromptInputStatus,
+} from "./PromptInputSubmit.svelte";
+
+export {
+  PromptInput,
+  PromptInputBody,
+  PromptInputToolbar,
+  PromptInputTextarea,
+  PromptInputSubmit,
+  type PromptInputProps,
+  type PromptInputBodyProps,
+  type PromptInputToolbarProps,
+  type PromptInputTextareaProps,
+  type PromptInputSubmitProps,
+  type PromptInputStatus,
+  //
+  PromptInput as Root,
+  PromptInputBody as Body,
+  PromptInputToolbar as Toolbar,
+  PromptInputTextarea as Textarea,
+  PromptInputSubmit as Submit,
+};

package/src/ai/reasoning/Reasoning.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	export interface ReasoningProps extends CollapsiblePrimitive.RootProps {
+		isStreaming?: boolean;
+		duration?: number;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { cn } from "@heyramzi/utils";
+	import { Collapsible } from "../../shadcn/collapsible/index.js";
+	import { setReasoningContext } from "./reasoning-context.svelte.js";
+
+	let {
+		isStreaming = false,
+		open = $bindable(false),
+		duration = 0,
+		class: className,
+		children,
+		...rest
+	}: ReasoningProps = $props();
+
+	// WHY: child parts read streaming/duration through these getters, so $derived in
+	// the trigger reruns whenever the props change.
+	setReasoningContext({
+		get isStreaming() {
+			return isStreaming;
+		},
+		get duration() {
+			return duration;
+		},
+	});
+
+	// WHY: auto-open on stream start and auto-close on stream end, but only on the
+	// transition itself so a user who toggles mid-stream is left alone.
+	let prev = untrack(() => isStreaming);
+	$effect(() => {
+		if (isStreaming && !prev) open = true;
+		else if (!isStreaming && prev) open = false;
+		prev = isStreaming;
+	});
+</script>
+
+<Collapsible bind:open class={cn("text-sm", className)} {...rest}>
+	{@render children?.()}
+</Collapsible>

package/src/ai/reasoning/ReasoningContent.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	export interface ReasoningContentProps extends CollapsiblePrimitive.ContentProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { CollapsibleContent } from "../../shadcn/collapsible/index.js";
+
+	let { class: className, children, ...rest }: ReasoningContentProps = $props();
+</script>
+
+<CollapsibleContent
+	class={cn(
+		"mt-3 border-l-2 pl-3 text-sm leading-relaxed",
+		"border-[color:var(--border,rgba(0,0,0,0.1))] text-[color:var(--muted-foreground,#71717a)]",
+		"overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up motion-reduce:animate-none",
+		className,
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</CollapsibleContent>

package/src/ai/reasoning/ReasoningTrigger.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	export interface ReasoningTriggerProps extends CollapsiblePrimitive.TriggerProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import BrainIcon from "phosphor-svelte/lib/Brain";
+	import ChevronDownIcon from "phosphor-svelte/lib/CaretDown";
+	import { CollapsibleTrigger } from "../../shadcn/collapsible/index.js";
+	import { getReasoningContext } from "./reasoning-context.svelte.js";
+
+	let { class: className, children, ...rest }: ReasoningTriggerProps = $props();
+
+	const ctx = getReasoningContext();
+
+	const label = $derived(
+		ctx.isStreaming
+			? "Thinking..."
+			: ctx.duration > 0
+				? `Thought for ${ctx.duration}s`
+				: "Reasoning",
+	);
+</script>
+
+<CollapsibleTrigger
+	class={cn(
+		"group flex w-full items-center gap-2 text-left",
+		"text-sm text-[color:var(--muted-foreground,#71717a)]",
+		"transition-colors hover:text-[color:var(--foreground,#09090b)]",
+		className,
+	)}
+	{...rest}
+>
+	<BrainIcon class={cn("size-4 shrink-0", ctx.isStreaming && "animate-pulse")} />
+	{#if children}
+		{@render children()}
+	{:else}
+		<span>{label}</span>
+	{/if}
+	<ChevronDownIcon
+		class="size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180"
+	/>
+</CollapsibleTrigger>

package/src/ai/reasoning/index.ts

@@ -0,0 +1,22 @@
+import Reasoning from "./Reasoning.svelte";
+import ReasoningTrigger from "./ReasoningTrigger.svelte";
+import ReasoningContent from "./ReasoningContent.svelte";
+
+import type { ReasoningProps } from "./Reasoning.svelte";
+import type { ReasoningTriggerProps } from "./ReasoningTrigger.svelte";
+import type { ReasoningContentProps } from "./ReasoningContent.svelte";
+import type { ReasoningContextValue } from "./reasoning-context.svelte.js";
+
+export {
+  Reasoning,
+  ReasoningTrigger,
+  ReasoningContent,
+  type ReasoningProps,
+  type ReasoningTriggerProps,
+  type ReasoningContentProps,
+  type ReasoningContextValue,
+  //
+  Reasoning as Root,
+  ReasoningTrigger as Trigger,
+  ReasoningContent as Content,
+};

package/src/ai/reasoning/reasoning-context.svelte.ts

@@ -0,0 +1,20 @@
+import { getContext, setContext } from "svelte";
+
+const REASONING_CONTEXT_KEY = Symbol("reasoning-context");
+
+export interface ReasoningContextValue {
+  isStreaming: boolean;
+  duration: number;
+}
+
+export function setReasoningContext(value: ReasoningContextValue) {
+  setContext(REASONING_CONTEXT_KEY, value);
+}
+
+export function getReasoningContext(): ReasoningContextValue {
+  const context = getContext<ReasoningContextValue>(REASONING_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("Reasoning parts must be used inside a <Reasoning>.");
+  }
+  return context;
+}

package/src/ai/response/Response.css

@@ -0,0 +1,32 @@
+/* WHY: the caret has to attach to the end of marked's {@html} output, which is
+   never touched by Svelte's scoping, so the last direct child is reached with
+   :global() while the parent class stays component-scoped. */
+.ai-response.is-streaming > :last-child::after {
+  content: "";
+  display: inline-block;
+  width: 0.5ch;
+  height: 1em;
+  margin-left: 0.1ch;
+  vertical-align: text-bottom;
+  border-radius: 1px;
+  background: currentColor;
+  animation: ai-response-caret 1s steps(1, end) infinite;
+}
+
+@keyframes ai-response-caret {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  50.01%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-response.is-streaming > :last-child::after {
+    animation: none;
+    opacity: 0.7;
+  }
+}

package/src/ai/response/Response.svelte

@@ -0,0 +1,130 @@
+<script lang="ts" module>
+	// =========================
+	// IMPORTS
+	// =========================
+
+	import { Marked } from "marked";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	// =========================
+	// TYPES
+	// =========================
+
+	export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
+		content: string;
+		/** Render a blinking caret after the content while tokens are still arriving. */
+		streaming?: boolean;
+		class?: string;
+	}
+
+	// =========================
+	// FUNCTIONS (module scope: one shared, hardened parser)
+	// =========================
+
+	// WHY: marked does not sanitize. Rendering model/tool output with {@html} is an
+
+	// XSS sink, so we ship a markdown-only renderer: raw HTML is escaped (never injected as elements) and link/image URLs are scheme-checked.
+
+	// Pure JS, so it runs identically on the server and the client with no extra dependency.
+	const SAFE_SCHEME = /^(?:https?:|mailto:|tel:)/i;
+
+	function escapeHtml(value: string): string {
+		return value
+			.replace(/&/g, "&amp;")
+			.replace(/</g, "&lt;")
+			.replace(/>/g, "&gt;")
+			.replace(/"/g, "&quot;");
+	}
+
+	function safeUrl(raw: string | null | undefined): string | null {
+		if (!raw) return null;
+		// WHY: browsers drop tabs, newlines and control bytes from a URL, so "java\tscript:" runs as javascript:.
+		const href = [...raw]
+			.filter((c) => c.charCodeAt(0) > 31 && c.charCodeAt(0) !== 127)
+			.join("")
+			.trim();
+		// Relative URLs and same-page anchors carry no scheme, so they are safe.
+		if (href.startsWith("#") || href.startsWith("/") || href.startsWith(".")) return href;
+		if (SAFE_SCHEME.test(href)) return href;
+		if (!/^[a-z][a-z0-9+.-]*:/i.test(href)) return href; // no scheme => relative path
+		return null; // javascript:, data:, vbscript:, ...
+	}
+
+	const parser = new Marked({
+		gfm: true,
+		breaks: true,
+		renderer: {
+			html({ text }) {
+				return escapeHtml(text);
+			},
+			link({ href, title, tokens }) {
+				const safe = safeUrl(href);
+				const inner = this.parser.parseInline(tokens);
+				if (!safe) return inner; // strip the link, keep the visible text
+				const t = title ? ` title="${escapeHtml(title)}"` : "";
+				return `<a href="${escapeHtml(safe)}"${t} rel="noopener noreferrer nofollow" target="_blank">${inner}</a>`;
+			},
+			// WHY: an image tag fetches on render, so injected model output could leak context through its URL. A link waits for a click.
+			image({ href, text }) {
+				const safe = safeUrl(href);
+				const label = escapeHtml(text || href || "");
+				if (!safe) return label;
+				return `<a href="${escapeHtml(safe)}" rel="noopener noreferrer nofollow" target="_blank">${label}</a>`;
+			},
+		},
+	});
+</script>
+
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+
+	import "./Response.css";
+	import { cn } from "@heyramzi/utils";
+
+	// =========================
+	// PROPS
+	// =========================
+
+	let { content, streaming = false, class: className, ...rest }: ResponseProps = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+
+	// WHY: parse() is sync when no async extensions are registered; {async:false}
+	// narrows the return type to string for the {@html} sink.
+	const html = $derived(parser.parse(content ?? "", { async: false }) as string);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP                      -->
+<!-- =========================== -->
+
+<div
+	class={cn(
+		"ai-response text-sm leading-5 [overflow-wrap:anywhere]",
+		"[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+		"[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+		"[&_ul]:my-2 [&_ul]:ml-4 [&_ul]:list-disc",
+		"[&_ol]:my-2 [&_ol]:ml-4 [&_ol]:list-decimal",
+		"[&_li]:my-0.5",
+		"[&_strong]:font-semibold",
+		"[&_em]:italic",
+		"[&_code]:rounded [&_code]:bg-[color:var(--muted,rgba(0,0,0,0.06))] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[0.875em]",
+		"[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-[color:var(--muted,rgba(0,0,0,0.06))] [&_pre]:p-3",
+		"[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+		"[&_a]:underline [&_a]:underline-offset-2",
+		"[&_h1]:mt-3 [&_h1]:mb-1 [&_h1]:text-base [&_h1]:font-semibold",
+		"[&_h2]:mt-3 [&_h2]:mb-1 [&_h2]:text-sm [&_h2]:font-semibold",
+		"[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-medium",
+		"[&_img]:my-2 [&_img]:max-w-full [&_img]:rounded-md",
+		"[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-[color:var(--border,rgba(0,0,0,0.1))] [&_blockquote]:pl-3 [&_blockquote]:text-[color:var(--muted-foreground,inherit)]",
+		className,
+	)}
+	class:is-streaming={streaming}
+	{...rest}
+>
+	{@html html}
+</div>

package/src/ai/response/index.ts

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

package/src/ai/suggestion/Suggestion.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { Button, type ButtonProps } from "../../shadcn/button/index.js";
+
+	export interface SuggestionProps extends Omit<ButtonProps, "onclick" | "children"> {
+		suggestion: string;
+		onclick?: (suggestion: string) => void;
+		class?: string;
+		children?: import("svelte").Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		suggestion,
+		onclick,
+		class: className,
+		variant = "outline",
+		size = "sm",
+		children,
+		...rest
+	}: SuggestionProps = $props();
+
+	const handleClick = () => {
+		onclick?.(suggestion);
+	};
+</script>
+
+<Button
+	class={cn("cursor-pointer rounded-full px-4 whitespace-nowrap", className)}
+	onclick={handleClick}
+	{size}
+	type="button"
+	{variant}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{suggestion}
+	{/if}
+</Button>

package/src/ai/suggestion/Suggestions.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface SuggestionsProps extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet;
+		class?: string;
+	}
+
+	let { children, class: className, ...rest }: SuggestionsProps = $props();
+</script>
+
+<div
+	class={cn(
+		"flex w-full items-center gap-2 overflow-x-auto pb-1",
+		"[&::-webkit-scrollbar]:hidden",
+		"[scrollbar-width:none]",
+		className,
+	)}
+	role="list"
+	{...rest}
+>
+	{@render children?.()}
+</div>

package/src/ai/suggestion/index.ts

@@ -0,0 +1,14 @@
+import Suggestion from "./Suggestion.svelte";
+import Suggestions from "./Suggestions.svelte";
+import type { SuggestionProps } from "./Suggestion.svelte";
+import type { SuggestionsProps } from "./Suggestions.svelte";
+
+export {
+  Suggestion,
+  Suggestions,
+  type SuggestionProps,
+  type SuggestionsProps,
+  //
+  Suggestion as Item,
+  Suggestions as Root,
+};

package/src/ai/thinking-dots/ThinkingDots.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+
+	import { cn } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import TypingDots from "../typing-dots/TypingDots.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+
+	export interface ThinkingDotsProps extends HTMLAttributes<HTMLDivElement> {
+		label?: string;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+
+	let { label = "Thinking", class: className, ...rest }: ThinkingDotsProps = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+
+<!-- WHY: the dots animation is the shared chat TypingDots primitive; this only
+     adds the AI "thinking" label so there is a single source for the dots. -->
+<div
+	class={cn(
+		"inline-flex items-center gap-2 text-sm text-[color:var(--ai-thinking-fg,inherit)]",
+		className,
+	)}
+	role="status"
+	{...rest}
+>
+	{#if label}<span>{label}</span>{/if}
+	<TypingDots />
+</div>

package/src/ai/thinking-dots/index.ts

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