@heyramzi/ui 3.5.0 → 3.7.0

package/COMPONENTS.md

@@ -125,6 +125,7 @@ Named exports from `@heyramzi/ui/effects/<name>`, e.g.
 Imported from `@heyramzi/ui/ai/<name>`, e.g. `import { AiButton } from "@heyramzi/ui/ai/ai-button"`.
 
 - `ai-button` — AiButton
+- `chat-window` — ChatGptWindow, ClaudeWindow: still or playing pictures of a ChatGPT or Claude conversation for a marketing page, with a connector call row. `messages` takes user text, assistant text or a snippet, and tool steps; every printed string is a prop
 - `confirmation` — Confirmation, ConfirmationTitle, ConfirmationState (`when` names the kind it shows), ConfirmationActions, ConfirmationAction, type ConfirmationKind
 - `generation-progress` — GenerationProgress
 - `loading-state` — PixelLoader

package/dist/ai/chat-window/icons.js

@@ -0,0 +1,43 @@
+// Each glyph is a file a CSS mask paints in the current colour. Sources and licences: icons/LICENSE.
+import gptChevron from "../../../src/ai/chat-window/icons/chatgpt-chevron.svg";
+import gptCopy from "../../../src/ai/chat-window/icons/chatgpt-copy.svg";
+import gptMic from "../../../src/ai/chat-window/icons/chatgpt-mic.svg";
+import gptMore from "../../../src/ai/chat-window/icons/chatgpt-more.svg";
+import gptPlus from "../../../src/ai/chat-window/icons/chatgpt-plus.svg";
+import gptRegenerate from "../../../src/ai/chat-window/icons/chatgpt-regenerate.svg";
+import gptShare from "../../../src/ai/chat-window/icons/chatgpt-share.svg";
+import gptSidebar from "../../../src/ai/chat-window/icons/chatgpt-sidebar.svg";
+import gptThumb from "../../../src/ai/chat-window/icons/chatgpt-thumb.svg";
+import gptVoice from "../../../src/ai/chat-window/icons/chatgpt-voice.svg";
+import claudeChevron from "../../../src/ai/chat-window/icons/claude-chevron.svg";
+import claudeCopy from "../../../src/ai/chat-window/icons/claude-copy.svg";
+import claudePlus from "../../../src/ai/chat-window/icons/claude-plus.svg";
+import claudeRetry from "../../../src/ai/chat-window/icons/claude-retry.svg";
+import claudeSend from "../../../src/ai/chat-window/icons/claude-send.svg";
+import claudeSidebar from "../../../src/ai/chat-window/icons/claude-sidebar.svg";
+import claudeSliders from "../../../src/ai/chat-window/icons/claude-sliders.svg";
+import claudeSpark from "../../../src/ai/chat-window/icons/claude-spark.svg";
+import claudeThumb from "../../../src/ai/chat-window/icons/claude-thumb.svg";
+export const CHATGPT_ICONS = {
+	chevron: gptChevron,
+	copy: gptCopy,
+	mic: gptMic,
+	more: gptMore,
+	plus: gptPlus,
+	regenerate: gptRegenerate,
+	share: gptShare,
+	sidebar: gptSidebar,
+	thumb: gptThumb,
+	voice: gptVoice
+};
+export const CLAUDE_ICONS = {
+	chevron: claudeChevron,
+	copy: claudeCopy,
+	plus: claudePlus,
+	retry: claudeRetry,
+	send: claudeSend,
+	sidebar: claudeSidebar,
+	sliders: claudeSliders,
+	spark: claudeSpark,
+	thumb: claudeThumb
+};

package/dist/ai/chat-window/index.js

@@ -0,0 +1,5 @@
+import ChatGptWindow from "../../../src/ai/chat-window/ChatGptWindow.svelte";
+import ClaudeWindow from "../../../src/ai/chat-window/ClaudeWindow.svelte";
+export { CHATGPT_LABELS, CLAUDE_LABELS } from "./labels.js";
+export { REVEAL_BEATS, revealSchedule } from "./reveal.svelte.js";
+export { ChatGptWindow, ClaudeWindow };

package/dist/ai/chat-window/labels.js

@@ -0,0 +1,16 @@
+export const CHATGPT_LABELS = {
+	running: "Calling {name}",
+	done: "Used {name}",
+	share: "Share",
+	disclaimer: "ChatGPT can make mistakes. Check important info.",
+	userSaid: "You said:",
+	assistantSaid: "ChatGPT said:"
+};
+export const CLAUDE_LABELS = {
+	running: "Using {name}",
+	done: "Used {name}",
+	share: "Share",
+	disclaimer: "Claude can make mistakes. Please double-check responses.",
+	userSaid: "You said:",
+	assistantSaid: "Claude said:"
+};

package/dist/ai/chat-window/reveal.svelte.js

@@ -0,0 +1,106 @@
+import { untrack } from "svelte";
+/** Milliseconds each beat holds, read as one conversation's pacing, not a transition. */
+export const REVEAL_BEATS = {
+	lead: 400,
+	user: 900,
+	thinking: 900,
+	stream: 1500,
+	running: 1300,
+	after: 350
+};
+/** The timeline for a conversation: when each message enters and settles, and when it ends. */
+export function revealSchedule(roles, beats = REVEAL_BEATS) {
+	const out = [];
+	let t = beats.lead;
+	roles.forEach((role, index) => {
+		if (role === "user") {
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.user;
+		} else if (role === "assistant") {
+			out.push({
+				at: t,
+				index,
+				phase: "thinking"
+			});
+			t += beats.thinking;
+			out.push({
+				at: t,
+				index,
+				phase: "streaming"
+			});
+			t += beats.stream;
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.after;
+		} else {
+			out.push({
+				at: t,
+				index,
+				phase: "running"
+			});
+			t += beats.running;
+			out.push({
+				at: t,
+				index,
+				phase: "done"
+			});
+			t += beats.after;
+		}
+	});
+	return {
+		beats: out,
+		end: t
+	};
+}
+/**
+* Plays a conversation once the window is on screen and `active`, again each time `active` turns on.
+* Renders finished for SSR, no JavaScript and reduced motion.
+*/
+export function createReveal(options) {
+	let phases = $state([]);
+	let node = $state(null);
+	let seen = $state(false);
+	$effect(() => {
+		const { enabled } = options();
+		if (!node || !enabled || seen) return;
+		const io = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) {
+				seen = true;
+				io.disconnect();
+			}
+		}, { threshold: .35 });
+		io.observe(node);
+		return () => io.disconnect();
+	});
+	$effect(() => {
+		const { enabled, active } = options();
+		if (!enabled || !active || !seen) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const { roles, hold, ondone } = untrack(options);
+		const { beats, end } = revealSchedule(roles);
+		phases = roles.map(() => "hidden");
+		const timers = beats.map((b) => setTimeout(() => phases[b.index] = b.phase, b.at));
+		timers.push(setTimeout(() => ondone?.(), end + hold));
+		return () => {
+			timers.forEach(clearTimeout);
+			phases = [];
+		};
+	});
+	return {
+		/** A message's phase; `done` when nothing is playing. */
+		phase: (index) => phases[index] ?? "done",
+		/** Attach to the window's root, so the reveal waits until it scrolls into view. */
+		attach: (el) => {
+			node = el;
+			return () => node = null;
+		},
+		streamMs: REVEAL_BEATS.stream
+	};
+}

package/dist/ai/chat-window/types.js

@@ -0,0 +1,4 @@
+/** Fills `{name}` in a label such as "Used {name}". */
+export function fillName(template, name) {
+	return template.replaceAll("{name}", name);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/ai/chat-window/ChatGlyph.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		/** The SVG file's URL, painted through a mask in the current colour. */
+		src: string;
+		size?: number;
+		class?: string;
+	}
+
+	let { src, size = 20, class: className = "" }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<span
+	class="chat-glyph {className}"
+	style:--glyph={`url("${src}")`}
+	style:--size="{size}px"
+	aria-hidden="true"
+></span>
+
+<style>
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.chat-glyph {
+			display: block;
+			flex: none;
+			width: var(--size);
+			height: var(--size);
+			background: currentColor;
+			mask: var(--glyph) center / contain no-repeat;
+		}
+	}
+</style>

package/src/ai/chat-window/ChatGlyph.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** The SVG file's URL, painted through a mask in the current colour. */
+    src: string;
+    size?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;