@heyramzi/ui 0.0.0-stage → 6.1.0

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,47 @@
+<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 { 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 this proxy; the $effect keeps
+	// it synced to props so $derived in the trigger reruns on every change.
+	const ctx = $state({ isStreaming, duration });
+	$effect(() => {
+		ctx.isStreaming = isStreaming;
+		ctx.duration = duration;
+	});
+	setReasoningContext(ctx);
+
+	// 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 = 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;

package/src/ai/typing-dots/TypingDots.css

@@ -0,0 +1,39 @@
+.typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.typing-dots .typing-dot {
+  width: var(--typing-dot-size, 4px);
+  height: var(--typing-dot-size, 4px);
+  border-radius: 999px;
+  background: currentColor;
+  animation: typing-dot 900ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
+}
+
+.typing-dots .typing-dot:nth-child(2) {
+  animation-delay: 120ms;
+}
+
+.typing-dots .typing-dot:nth-child(3) {
+  animation-delay: 240ms;
+}
+
+@keyframes typing-dot {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  45% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .typing-dots .typing-dot {
+    animation: none;
+  }
+}

package/src/ai/typing-dots/TypingDots.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface TypingDotsProps extends HTMLAttributes<HTMLSpanElement> {
+		/** Dot diameter in px. */
+		size?: number;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import "./TypingDots.css";
+	import { cn } from "@heyramzi/utils";
+
+	let { size = 4, class: className, ...rest }: TypingDotsProps = $props();
+</script>
+
+<span
+	class={cn("typing-dots", className)}
+	style:--typing-dot-size="{size}px"
+	aria-hidden="true"
+	{...rest}
+>
+	<span class="typing-dot"></span>
+	<span class="typing-dot"></span>
+	<span class="typing-dot"></span>
+</span>

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

@@ -0,0 +1,10 @@
+import TypingDots from "./TypingDots.svelte";
+
+import type { TypingDotsProps } from "./TypingDots.svelte";
+
+export {
+  TypingDots,
+  type TypingDotsProps,
+  //
+  TypingDots as Root,
+};

package/src/ai/voice-waveform/VoiceWaveform.css

@@ -0,0 +1,40 @@
+.waveform {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+}
+
+.waveform span {
+  width: 3px;
+  height: 8px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.45;
+  transition:
+    height 180ms cubic-bezier(0.25, 1, 0.5, 1),
+    opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.waveform.active span {
+  height: var(--bar-height);
+  opacity: 0.9;
+  animation: voice-bar 760ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
+  animation-delay: var(--delay);
+}
+
+@keyframes voice-bar {
+  0%,
+  100% {
+    transform: scaleY(0.7);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .waveform.active span {
+    animation: none;
+  }
+}