npm - @getjack/jack - Versions diffs - 0.1.34 → 0.1.36 - Mend

@getjack/jack 0.1.34 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/README.md +6 -6
package/package.json +1 -1
package/src/commands/down.ts +39 -7
package/src/commands/link.ts +2 -4
package/src/commands/logs.ts +2 -4
package/src/commands/mcp.ts +12 -10
package/src/commands/services.ts +4 -2
package/src/commands/sync.ts +5 -6
package/src/commands/update.ts +1 -0
package/src/index.ts +8 -0
package/src/lib/auth/client.ts +5 -2
package/src/lib/binding-validator.ts +39 -3
package/src/lib/build-helper.ts +18 -19
package/src/lib/control-plane.ts +45 -0
package/src/lib/do-config.ts +110 -0
package/src/lib/do-export-validator.ts +26 -0
package/src/lib/jsonc-edit.ts +292 -0
package/src/lib/managed-deploy.ts +36 -1
package/src/lib/project-link.ts +37 -0
package/src/lib/project-operations.ts +31 -66
package/src/lib/resources.ts +4 -5
package/src/lib/schema.ts +8 -12
package/src/lib/services/db-create.ts +2 -2
package/src/lib/services/db-execute.ts +9 -6
package/src/lib/services/db-list.ts +6 -4
package/src/lib/services/endpoint-test.ts +275 -0
package/src/lib/services/project-delete.ts +190 -0
package/src/lib/services/project-environment.ts +579 -0
package/src/lib/services/storage-config.ts +7 -309
package/src/lib/services/storage-create.ts +2 -1
package/src/lib/services/storage-delete.ts +3 -2
package/src/lib/services/storage-info.ts +2 -1
package/src/lib/services/storage-list.ts +6 -3
package/src/lib/services/vectorize-config.ts +7 -264
package/src/lib/services/vectorize-create.ts +2 -1
package/src/lib/services/vectorize-delete.ts +6 -4
package/src/lib/services/vectorize-list.ts +6 -3
package/src/lib/storage/index.ts +21 -23
package/src/lib/telemetry.ts +1 -0
package/src/lib/wrangler-config.ts +43 -312
package/src/lib/zip-packager.ts +28 -0
package/src/mcp/test-utils.ts +31 -0
package/src/mcp/tools/index.ts +280 -2
package/src/templates/index.ts +5 -0
package/src/templates/types.ts +4 -0
package/templates/AI-BINDINGS.md +34 -76
package/templates/CLAUDE.md +1 -1
package/templates/ai-chat/src/index.ts +7 -14
package/templates/ai-chat/src/jack-ai.ts +0 -6
package/templates/chat/.jack.json +45 -0
package/templates/chat/bun.lock +1584 -0
package/templates/chat/components.json +23 -0
package/templates/chat/index.html +12 -0
package/templates/chat/package.json +41 -0
package/templates/chat/src/chat-agent.ts +63 -0
package/templates/chat/src/client/app.tsx +189 -0
package/templates/chat/src/client/chat.tsx +222 -0
package/templates/chat/src/client/components/prompt-kit/chat-container.tsx +47 -0
package/templates/chat/src/client/components/prompt-kit/loader.tsx +33 -0
package/templates/chat/src/client/components/prompt-kit/markdown.tsx +84 -0
package/templates/chat/src/client/components/prompt-kit/message.tsx +54 -0
package/templates/chat/src/client/components/prompt-kit/prompt-suggestion.tsx +20 -0
package/templates/chat/src/client/components/prompt-kit/reasoning.tsx +134 -0
package/templates/chat/src/client/components/prompt-kit/scroll-button.tsx +28 -0
package/templates/chat/src/client/components/ui/button.tsx +38 -0
package/templates/chat/src/client/lib/utils.ts +6 -0
package/templates/chat/src/client/main.tsx +11 -0
package/templates/chat/src/client/styles.css +125 -0
package/templates/chat/src/index.ts +25 -0
package/templates/chat/src/jack-ai.ts +94 -0
package/templates/chat/tsconfig.json +18 -0
package/templates/chat/vite.config.ts +14 -0
package/templates/chat/wrangler.jsonc +18 -0
package/templates/cron/.jack.json +18 -28
package/templates/cron/schema.sql +10 -20
package/templates/cron/src/admin.ts +321 -0
package/templates/cron/src/index.ts +151 -81
package/templates/cron/src/monitor.ts +124 -0
package/templates/semantic-search/src/index.ts +5 -43
package/templates/semantic-search/src/jack-ai.ts +0 -6
package/templates/telegram-bot/.jack.json +56 -0
package/templates/telegram-bot/bun.lock +41 -0
package/templates/telegram-bot/package.json +16 -0
package/templates/telegram-bot/src/index.ts +236 -0
package/templates/telegram-bot/src/jack-ai.ts +100 -0
package/templates/telegram-bot/tsconfig.json +11 -0
package/templates/telegram-bot/wrangler.jsonc +8 -0
package/templates/cron/src/jobs.ts +0 -139
package/templates/cron/src/webhooks.ts +0 -95
package/templates/semantic-search/src/jack-vectorize.ts +0 -169

package/templates/chat/components.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "",
+		"css": "src/client/styles.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"iconLibrary": "lucide",
+	"rtl": false,
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"registries": {}
+}

package/templates/chat/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jack-template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/client/main.tsx"></script>
+  </body>
+</html>

package/templates/chat/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+	"name": "jack-template",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@ai-sdk/react": "^3.0.88",
+		"@cloudflare/ai-chat": "^0.1.0",
+		"@tailwindcss/typography": "^0.5.19",
+		"agents": "^0.5",
+		"ai": "^6",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.564.0",
+		"radix-ui": "^1.4.3",
+		"react": "^19",
+		"react-dom": "^19",
+		"react-markdown": "^10.1.0",
+		"remark-breaks": "^4.0.0",
+		"remark-gfm": "^4.0.1",
+		"tailwind-merge": "^3.4.1",
+		"use-stick-to-bottom": "^1.1.3",
+		"workers-ai-provider": "^3"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "^1",
+		"@cloudflare/workers-types": "^4.20241205.0",
+		"@tailwindcss/vite": "^4",
+		"@types/react": "^19",
+		"@types/react-dom": "^19",
+		"@vitejs/plugin-react": "^4",
+		"shadcn": "^3.8.5",
+		"tailwindcss": "^4",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5",
+		"vite": "^6"
+	}
+}

package/templates/chat/src/chat-agent.ts ADDED Viewed

@@ -0,0 +1,63 @@
+import { AIChatAgent } from "@cloudflare/ai-chat";
+import {
+	type StreamTextOnFinishCallback,
+	type ToolSet,
+	convertToModelMessages,
+	extractReasoningMiddleware,
+	streamText,
+	wrapLanguageModel,
+} from "ai";
+import { createWorkersAI } from "workers-ai-provider";
+import { createJackAI } from "./jack-ai";
+interface Env {
+	AI?: Ai;
+	__AI_PROXY?: Fetcher;
+	ASSETS: Fetcher;
+	Chat: DurableObjectNamespace;
+}
+function getAIProvider(env: Env) {
+	if (env.__AI_PROXY) {
+		const jackAI = createJackAI(env as { __AI_PROXY: Fetcher });
+		return createWorkersAI({ binding: jackAI as unknown as Ai });
+	}
+	if (env.AI) {
+		return createWorkersAI({ binding: env.AI });
+	}
+	throw new Error("No AI binding available");
+}
+export class Chat extends AIChatAgent<Env> {
+	maxPersistedMessages = 500;
+	async onChatMessage(onFinish: StreamTextOnFinishCallback<ToolSet>) {
+		const provider = getAIProvider(this.env);
+		// Fast general-purpose model (recommended default)
+		const model = provider(
+			"@cf/meta/llama-3.3-70b-instruct-fp8-fast" as Parameters<typeof provider>[0],
+		);
+		// Reasoning model — uncomment for chain-of-thought (shows thinking process):
+		// const baseModel = provider(
+		//   "@cf/deepseek-ai/deepseek-r1-distill-qwen-32b" as Parameters<typeof provider>[0],
+		// );
+		// const model = wrapLanguageModel({
+		//   model: baseModel,
+		//   middleware: extractReasoningMiddleware({ tagName: "think" }),
+		// });
+		const result = streamText({
+			model,
+			system:
+				"You are a helpful assistant. Be concise and direct. " +
+				"Use short paragraphs. Only use markdown formatting when it genuinely helps clarity.",
+			messages: await convertToModelMessages(this.messages),
+			maxOutputTokens: 2048,
+			onFinish,
+		});
+		return result.toUIMessageStreamResponse();
+	}
+}

package/templates/chat/src/client/app.tsx ADDED Viewed

@@ -0,0 +1,189 @@
+import { Button } from "@/components/ui/button";
+import { MessageSquarePlus, Pencil, Share2 } from "lucide-react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import Chat from "./chat";
+const ADJECTIVES = [
+	"Happy",
+	"Fuzzy",
+	"Cosmic",
+	"Crispy",
+	"Spicy",
+	"Chill",
+	"Zesty",
+	"Snappy",
+	"Bouncy",
+	"Groovy",
+];
+const FRUITS = [
+	"Mango",
+	"Peach",
+	"Lemon",
+	"Kiwi",
+	"Melon",
+	"Berry",
+	"Guava",
+	"Plum",
+	"Fig",
+	"Grape",
+];
+function generateUsername(): string {
+	const adj = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
+	const fruit = FRUITS[Math.floor(Math.random() * FRUITS.length)];
+	const num = Math.floor(Math.random() * 100);
+	return `${adj}${fruit}${num}`;
+}
+function getOrCreateUsername(): string {
+	const stored = localStorage.getItem("jack-chat-username");
+	if (stored) return stored;
+	const name = generateUsername();
+	localStorage.setItem("jack-chat-username", name);
+	return name;
+}
+function generateRoomId(): string {
+	return crypto.randomUUID().replace(/-/g, "").slice(0, 12);
+}
+function getRoomFromPath(): string | null {
+	const match = window.location.pathname.match(/^\/room\/([^/]+)/);
+	return match ? match[1] : null;
+}
+export default function App() {
+	const [username, setUsername] = useState(getOrCreateUsername);
+	const [isEditingName, setIsEditingName] = useState(false);
+	const [nameInput, setNameInput] = useState(username);
+	const nameInputRef = useRef<HTMLInputElement>(null);
+	const pathRoom = getRoomFromPath();
+	const [roomId, setRoomId] = useState<string>(() => pathRoom || generateRoomId());
+	const [isSharedRoom, setIsSharedRoom] = useState(!!pathRoom);
+	useEffect(() => {
+		if (!getRoomFromPath()) {
+			window.history.replaceState(null, "", `/room/${roomId}`);
+		}
+	}, [roomId]);
+	useEffect(() => {
+		const handlePopState = () => {
+			const room = getRoomFromPath();
+			if (room) {
+				setRoomId(room);
+				setIsSharedRoom(true);
+			}
+		};
+		window.addEventListener("popstate", handlePopState);
+		return () => window.removeEventListener("popstate", handlePopState);
+	}, []);
+	const handleNewChat = useCallback(() => {
+		const newId = generateRoomId();
+		setRoomId(newId);
+		setIsSharedRoom(false);
+		window.history.pushState(null, "", `/room/${newId}`);
+	}, []);
+	const [copied, setCopied] = useState(false);
+	const copiedTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+	const handleShareRoom = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(window.location.href);
+			setCopied(true);
+			clearTimeout(copiedTimer.current);
+			copiedTimer.current = setTimeout(() => setCopied(false), 2000);
+		} catch {
+			// Fallback: silently fail if clipboard API is unavailable
+		}
+	}, []);
+	const saveName = () => {
+		const trimmed = nameInput.trim();
+		if (trimmed) {
+			setUsername(trimmed);
+			localStorage.setItem("jack-chat-username", trimmed);
+		} else {
+			setNameInput(username);
+		}
+		setIsEditingName(false);
+	};
+	useEffect(() => {
+		if (isEditingName && nameInputRef.current) {
+			nameInputRef.current.focus();
+			nameInputRef.current.select();
+		}
+	}, [isEditingName]);
+	const chatContent = isSharedRoom ? (
+		<Suspense
+			fallback={
+				<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+					Loading conversation...
+				</div>
+			}
+		>
+			<Chat key={roomId} roomId={roomId} username={username} loadHistory />
+		</Suspense>
+	) : (
+		<Chat key={roomId} roomId={roomId} username={username} />
+	);
+	return (
+		<div className="flex h-dvh flex-col bg-background text-foreground">
+			<header className="flex items-center justify-between border-b border-border px-4 py-2.5">
+				<div className="flex items-center gap-3">
+					<h1 className="text-base font-semibold tracking-tight">jack-template</h1>
+					<div className="flex items-center gap-1 text-xs text-muted-foreground">
+						<span className="hidden sm:inline">as</span>
+						{isEditingName ? (
+							<input
+								ref={nameInputRef}
+								value={nameInput}
+								onChange={(e) => setNameInput(e.target.value)}
+								onBlur={saveName}
+								onKeyDown={(e) => {
+									if (e.key === "Enter") saveName();
+									if (e.key === "Escape") {
+										setNameInput(username);
+										setIsEditingName(false);
+									}
+								}}
+								className="w-24 rounded border border-input bg-secondary px-1.5 py-0.5 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+								maxLength={20}
+							/>
+						) : (
+							<button
+								type="button"
+								onClick={() => {
+									setNameInput(username);
+									setIsEditingName(true);
+								}}
+								className="flex items-center gap-1 rounded px-1.5 py-0.5 text-foreground hover:bg-secondary transition-colors"
+							>
+								{username}
+								<Pencil className="h-3 w-3 text-muted-foreground" />
+							</button>
+						)}
+					</div>
+				</div>
+				<div className="flex items-center gap-2">
+					<Button variant="ghost" size="sm" onClick={handleShareRoom}>
+						<Share2 className="h-4 w-4" />
+						{copied ? "Copied!" : "Share"}
+					</Button>
+					<Button variant="secondary" size="sm" onClick={handleNewChat}>
+						<MessageSquarePlus className="h-4 w-4" />
+						New Chat
+					</Button>
+				</div>
+			</header>
+			<main className="min-h-0 flex-1">{chatContent}</main>
+		</div>
+	);
+}

package/templates/chat/src/client/chat.tsx ADDED Viewed

@@ -0,0 +1,222 @@
+import {
+	ChatContainerContent,
+	ChatContainerRoot,
+	ChatContainerScrollAnchor,
+} from "@/components/prompt-kit/chat-container";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { Message, MessageAvatar, MessageContent } from "@/components/prompt-kit/message";
+import { PromptSuggestion } from "@/components/prompt-kit/prompt-suggestion";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/prompt-kit/reasoning";
+import { ScrollButton } from "@/components/prompt-kit/scroll-button";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useAgentChat } from "@cloudflare/ai-chat/react";
+import { useAgent } from "agents/react";
+import type { UIMessage } from "ai";
+import { ArrowUp, Square } from "lucide-react";
+import { type KeyboardEvent, useEffect, useRef, useState } from "react";
+const SUGGESTIONS = [
+	"What can you help me with?",
+	"Write a haiku about coding",
+	"Explain quantum computing simply",
+	"Tell me a fun fact",
+];
+interface ChatProps {
+	roomId: string;
+	username: string;
+	loadHistory?: boolean;
+}
+export default function Chat({ roomId, username, loadHistory }: ChatProps) {
+	const agent = useAgent({ agent: "chat", name: roomId });
+	const { messages, sendMessage, status, stop } = useAgentChat({
+		agent,
+		getInitialMessages: loadHistory ? undefined : null,
+	});
+	const [input, setInput] = useState("");
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const isStreaming = status === "streaming";
+	const isLoading = status === "submitted";
+	// Auto-resize textarea
+	const inputLength = input.length;
+	// biome-ignore lint/correctness/useExhaustiveDependencies: trigger on input change
+	useEffect(() => {
+		const textarea = textareaRef.current;
+		if (textarea) {
+			textarea.style.height = "auto";
+			textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+		}
+	}, [inputLength]);
+	const send = (text?: string) => {
+		const msg = text ?? input.trim();
+		if (!msg || isStreaming || isLoading) return;
+		sendMessage({ text: msg });
+		setInput("");
+		if (textareaRef.current) {
+			textareaRef.current.style.height = "auto";
+		}
+	};
+	const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			send();
+		}
+	};
+	function getMessageText(message: UIMessage): string {
+		return message.parts
+			.filter((part) => part.type === "text")
+			.map((part) => part.text)
+			.join("");
+	}
+	function getReasoningText(message: UIMessage): string | null {
+		const texts: string[] = [];
+		for (const part of message.parts) {
+			if (part.type === "reasoning") {
+				texts.push(part.text);
+			}
+		}
+		return texts.length > 0 ? texts.join("") : null;
+	}
+	const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
+	const isWaitingForResponse = isLoading || (isStreaming && lastMessage?.role === "user");
+	const userInitials = username.slice(0, 2).toUpperCase();
+	return (
+		<div className="flex h-full flex-col">
+			<ChatContainerRoot className="flex-1">
+				<ChatContainerContent className="mx-auto max-w-3xl px-4 py-6">
+					{messages.length === 0 && (
+						<div className="flex flex-1 flex-col items-center justify-center gap-8">
+							<div className="max-w-lg space-y-3 text-center">
+								<h2 className="text-2xl font-semibold text-foreground">jack-template</h2>
+								<p className="text-sm leading-relaxed text-muted-foreground">
+									Real-time AI chat with persistent rooms. Share the link — anyone
+									who opens it joins this conversation live. No database, no
+									WebSocket server, just code.
+								</p>
+							</div>
+							<div className="flex flex-wrap justify-center gap-2">
+								{SUGGESTIONS.map((s) => (
+									<PromptSuggestion key={s} onClick={() => send(s)}>
+										{s}
+									</PromptSuggestion>
+								))}
+							</div>
+						</div>
+					)}
+					{messages.map((message: UIMessage, index: number) => {
+						const isUser = message.role === "user";
+						const text = getMessageText(message);
+						const reasoning = isUser ? null : getReasoningText(message);
+						const isLast = index === messages.length - 1;
+						const isStreamingThis = isLast && !isUser && isStreaming;
+						if (isUser) {
+							return (
+								<Message key={message.id} className={cn("mb-4 flex-row-reverse")}>
+									<MessageAvatar
+										initials={userInitials}
+										className="bg-primary text-primary-foreground"
+									/>
+									<div className="min-w-0 max-w-[75%]">
+										<div className="mb-1 text-right text-xs text-muted-foreground">{username}</div>
+										<div className="rounded-2xl rounded-tr-md bg-secondary px-4 py-2.5 text-sm">
+											{text}
+										</div>
+									</div>
+								</Message>
+							);
+						}
+						return (
+							<Message key={message.id} className="mb-4">
+								<MessageAvatar initials="AI" className="bg-accent text-accent-foreground" />
+								<div className="min-w-0 max-w-[75%] space-y-1">
+									<div className="text-xs text-muted-foreground">AI</div>
+									{reasoning && (
+										<Reasoning isStreaming={isStreamingThis}>
+											<ReasoningTrigger>Reasoning</ReasoningTrigger>
+											<ReasoningContent markdown className="mt-1">
+												{reasoning}
+											</ReasoningContent>
+										</Reasoning>
+									)}
+									<MessageContent markdown>{isStreamingThis ? `${text}▍` : text}</MessageContent>
+								</div>
+							</Message>
+						);
+					})}
+					{isWaitingForResponse && (
+						<Message className="mb-4">
+							<MessageAvatar initials="AI" className="bg-accent text-accent-foreground" />
+							<div className="pt-1">
+								<TextShimmerLoader />
+							</div>
+						</Message>
+					)}
+					<ChatContainerScrollAnchor />
+				</ChatContainerContent>
+				<div className="pointer-events-none sticky bottom-4 flex justify-center">
+					<ScrollButton className="pointer-events-auto" />
+				</div>
+			</ChatContainerRoot>
+			{/* Input area */}
+			<div className="border-t border-border bg-background p-4">
+				<div className="mx-auto max-w-3xl">
+					<div className="flex items-end gap-2 rounded-2xl border border-input bg-secondary p-2">
+						<textarea
+							ref={textareaRef}
+							value={input}
+							onChange={(e) => setInput(e.target.value)}
+							onKeyDown={onKeyDown}
+							placeholder="Type a message..."
+							rows={1}
+							className="min-h-[36px] flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground placeholder-muted-foreground focus:outline-none"
+						/>
+						{isStreaming ? (
+							<Button
+								size="icon"
+								variant="ghost"
+								onClick={() => stop()}
+								className="h-9 w-9 shrink-0 rounded-xl"
+								aria-label="Stop generating"
+							>
+								<Square className="h-4 w-4" />
+							</Button>
+						) : (
+							<Button
+								size="icon"
+								onClick={() => send()}
+								disabled={!input.trim() || isLoading}
+								className="h-9 w-9 shrink-0 rounded-xl"
+								aria-label="Send message"
+							>
+								<ArrowUp className="h-5 w-5" />
+							</Button>
+						)}
+					</div>
+					<p className="mt-1.5 text-center text-xs text-muted-foreground/60">
+						Shift+Enter for new line
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/chat/src/client/components/prompt-kit/chat-container.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+import { StickToBottom } from "use-stick-to-bottom";
+function ChatContainerRoot({
+	children,
+	className,
+	...props
+}: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<StickToBottom
+			className={cn("flex overflow-y-auto", className)}
+			resize="smooth"
+			initial="instant"
+			role="log"
+			{...props}
+		>
+			{children}
+		</StickToBottom>
+	);
+}
+function ChatContainerContent({
+	children,
+	className,
+	...props
+}: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<StickToBottom.Content className={cn("flex w-full flex-col", className)} {...props}>
+			{children}
+		</StickToBottom.Content>
+	);
+}
+function ChatContainerScrollAnchor({
+	className,
+	...props
+}: { className?: string } & React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn("h-px w-full shrink-0 scroll-mt-4", className)}
+			aria-hidden="true"
+			{...props}
+		/>
+	);
+}
+export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor };

package/templates/chat/src/client/components/prompt-kit/loader.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+function TypingLoader({
+	className,
+	size = "md",
+}: { className?: string; size?: "sm" | "md" | "lg" }) {
+	const dotSizes = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" };
+	return (
+		<div className={cn("flex items-center space-x-1", className)}>
+			{[0, 1, 2].map((i) => (
+				<div
+					key={i}
+					className={cn("bg-muted-foreground/60 animate-bounce rounded-full", dotSizes[size])}
+					style={{ animationDelay: `${i * 150}ms`, animationDuration: "1s" }}
+				/>
+			))}
+			<span className="sr-only">Loading</span>
+		</div>
+	);
+}
+function TextShimmerLoader({
+	text = "Thinking",
+	className,
+}: { text?: string; className?: string }) {
+	return (
+		<span className={cn("animate-pulse text-sm font-medium text-muted-foreground", className)}>
+			{text}...
+		</span>
+	);
+}
+export { TypingLoader, TextShimmerLoader };