@getjack/jack 0.1.34 → 0.1.35

package/templates/chat/src/client/components/prompt-kit/markdown.tsx

@@ -0,0 +1,84 @@
+import { cn } from "@/lib/utils";
+import { memo, useId, useMemo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+function extractLanguage(className?: string): string {
+	if (!className) return "plaintext";
+	const match = className.match(/language-(\w+)/);
+	return match ? match[1] : "plaintext";
+}
+
+const components: Partial<Components> = {
+	code: function CodeComponent({ className, children, ...props }) {
+		const isInline =
+			!props.node?.position?.start.line ||
+			props.node?.position?.start.line === props.node?.position?.end.line;
+
+		if (isInline) {
+			return (
+				<code
+					className={cn("rounded bg-secondary px-1.5 py-0.5 font-mono text-[0.85em]", className)}
+					{...props}
+				>
+					{children}
+				</code>
+			);
+		}
+
+		const language = extractLanguage(className);
+
+		return (
+			<div className="not-prose my-3 overflow-clip rounded-lg border border-border bg-card">
+				{language !== "plaintext" && (
+					<div className="flex items-center justify-between border-b border-border bg-secondary/50 px-3 py-1.5">
+						<span className="text-xs text-muted-foreground">{language}</span>
+					</div>
+				)}
+				<pre className="overflow-x-auto p-3">
+					<code className="text-[13px] leading-relaxed">{children}</code>
+				</pre>
+			</div>
+		);
+	},
+	pre: function PreComponent({ children }) {
+		return <>{children}</>;
+	},
+};
+
+const MemoizedMarkdownBlock = memo(
+	function MarkdownBlock({ content }: { content: string }) {
+		return (
+			<ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} components={components}>
+				{content}
+			</ReactMarkdown>
+		);
+	},
+	(prev, next) => prev.content === next.content,
+);
+MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+
+function MarkdownComponent({
+	children,
+	id,
+	className,
+}: { children: string; id?: string; className?: string }) {
+	const generatedId = useId();
+	const blockId = id ?? generatedId;
+	const blocks = useMemo(() => children.split(/\n\n+/), [children]);
+
+	return (
+		<div className={className}>
+			{blocks.map((block, index) => (
+				// biome-ignore lint/suspicious/noArrayIndexKey: stable blockId prefix makes this safe
+				<MemoizedMarkdownBlock key={`${blockId}-${index}`} content={block} />
+			))}
+		</div>
+	);
+}
+
+const Markdown = memo(MarkdownComponent);
+Markdown.displayName = "Markdown";
+
+export { Markdown };

package/templates/chat/src/client/components/prompt-kit/message.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+import { Markdown } from "./markdown";
+
+function Message({
+	children,
+	className,
+	...props
+}: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div className={cn("flex gap-3", className)} {...props}>
+			{children}
+		</div>
+	);
+}
+
+function MessageAvatar({ initials, className }: { initials: string; className?: string }) {
+	return (
+		<div
+			className={cn(
+				"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground",
+				className,
+			)}
+		>
+			{initials}
+		</div>
+	);
+}
+
+function MessageContent({
+	children,
+	markdown = false,
+	className,
+	...props
+}: {
+	children: React.ReactNode;
+	markdown?: boolean;
+	className?: string;
+} & React.HTMLAttributes<HTMLDivElement>) {
+	if (markdown) {
+		return (
+			<div className={cn("prose prose-sm dark:prose-invert min-w-0", className)} {...props}>
+				<Markdown>{children as string}</Markdown>
+			</div>
+		);
+	}
+
+	return (
+		<div className={cn("text-sm", className)} {...props}>
+			{children}
+		</div>
+	);
+}
+
+export { Message, MessageAvatar, MessageContent };

package/templates/chat/src/client/components/prompt-kit/prompt-suggestion.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function PromptSuggestion({
+	children,
+	className,
+	...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+	return (
+		<Button
+			variant="outline"
+			className={cn("h-auto rounded-full px-4 py-2 text-sm font-normal", className)}
+			{...props}
+		>
+			{children}
+		</Button>
+	);
+}
+
+export { PromptSuggestion };

package/templates/chat/src/client/components/prompt-kit/reasoning.tsx

@@ -0,0 +1,134 @@
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Markdown } from "./markdown";
+
+type ReasoningContextType = {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+};
+
+const ReasoningContext = createContext<ReasoningContextType | undefined>(undefined);
+
+function useReasoningContext() {
+	const context = useContext(ReasoningContext);
+	if (!context) {
+		throw new Error("useReasoningContext must be used within a Reasoning provider");
+	}
+	return context;
+}
+
+function Reasoning({
+	children,
+	className,
+	open,
+	onOpenChange,
+	isStreaming,
+}: {
+	children: React.ReactNode;
+	className?: string;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	isStreaming?: boolean;
+}) {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const [wasAutoOpened, setWasAutoOpened] = useState(false);
+
+	const isControlled = open !== undefined;
+	const isOpen = isControlled ? open : internalOpen;
+
+	const handleOpenChange = (newOpen: boolean) => {
+		if (!isControlled) {
+			setInternalOpen(newOpen);
+		}
+		onOpenChange?.(newOpen);
+	};
+
+	useEffect(() => {
+		if (isStreaming && !wasAutoOpened) {
+			if (!isControlled) setInternalOpen(true);
+			setWasAutoOpened(true);
+		}
+
+		if (!isStreaming && wasAutoOpened) {
+			if (!isControlled) setInternalOpen(false);
+			setWasAutoOpened(false);
+		}
+	}, [isStreaming, wasAutoOpened, isControlled]);
+
+	return (
+		<ReasoningContext.Provider value={{ isOpen, onOpenChange: handleOpenChange }}>
+			<div className={className}>{children}</div>
+		</ReasoningContext.Provider>
+	);
+}
+
+function ReasoningTrigger({
+	children,
+	className,
+	...props
+}: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLButtonElement>) {
+	const { isOpen, onOpenChange } = useReasoningContext();
+
+	return (
+		<button
+			type="button"
+			className={cn("flex cursor-pointer items-center gap-1.5 text-xs", className)}
+			onClick={() => onOpenChange(!isOpen)}
+			{...props}
+		>
+			<span className="text-muted-foreground">{children}</span>
+			<ChevronDown
+				className={cn("h-3 w-3 text-muted-foreground transition-transform", isOpen && "rotate-180")}
+			/>
+		</button>
+	);
+}
+
+function ReasoningContent({
+	children,
+	className,
+	markdown = false,
+	...props
+}: {
+	children: React.ReactNode;
+	className?: string;
+	markdown?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>) {
+	const contentRef = useRef<HTMLDivElement>(null);
+	const innerRef = useRef<HTMLDivElement>(null);
+	const { isOpen } = useReasoningContext();
+
+	useEffect(() => {
+		if (!contentRef.current || !innerRef.current) return;
+
+		const observer = new ResizeObserver(() => {
+			if (contentRef.current && innerRef.current && isOpen) {
+				contentRef.current.style.maxHeight = `${innerRef.current.scrollHeight}px`;
+			}
+		});
+
+		observer.observe(innerRef.current);
+
+		if (isOpen) {
+			contentRef.current.style.maxHeight = `${innerRef.current.scrollHeight}px`;
+		}
+
+		return () => observer.disconnect();
+	}, [isOpen]);
+
+	return (
+		<div
+			ref={contentRef}
+			className={cn("overflow-hidden transition-[max-height] duration-150 ease-out", className)}
+			style={{ maxHeight: isOpen ? contentRef.current?.scrollHeight : "0px" }}
+			{...props}
+		>
+			<div ref={innerRef} className="prose prose-sm dark:prose-invert text-muted-foreground">
+				{markdown ? <Markdown>{children as string}</Markdown> : children}
+			</div>
+		</div>
+	);
+}
+
+export { Reasoning, ReasoningTrigger, ReasoningContent };

package/templates/chat/src/client/components/prompt-kit/scroll-button.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+
+function ScrollButton({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+	const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+	return (
+		<Button
+			variant="outline"
+			size="icon"
+			className={cn(
+				"h-8 w-8 rounded-full transition-all duration-150 ease-out",
+				!isAtBottom
+					? "translate-y-0 scale-100 opacity-100"
+					: "pointer-events-none translate-y-4 scale-95 opacity-0",
+				className,
+			)}
+			onClick={() => scrollToBottom()}
+			{...props}
+		>
+			<ChevronDown className="h-4 w-4" />
+		</Button>
+	);
+}
+
+export { ScrollButton };

package/templates/chat/src/client/components/ui/button.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/lib/utils";
+import { type VariantProps, cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+				outline:
+					"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3",
+				lg: "h-10 rounded-md px-6",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: { variant: "default", size: "default" },
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot.Root : "button";
+	return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };

package/templates/chat/src/client/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/templates/chat/src/client/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./app";
+import "./styles.css";
+
+// biome-ignore lint/style/noNonNullAssertion: root element always exists in index.html
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+);

package/templates/chat/src/client/styles.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-2xl: calc(var(--radius) + 8px);
+	--radius-3xl: calc(var(--radius) + 12px);
+	--radius-4xl: calc(var(--radius) + 16px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/templates/chat/src/index.ts

@@ -0,0 +1,25 @@
+import { routeAgentRequest } from "agents";
+
+export { Chat } from "./chat-agent";
+
+interface Env {
+	AI?: Ai;
+	__AI_PROXY?: Fetcher;
+	ASSETS: Fetcher;
+	Chat: DurableObjectNamespace;
+}
+
+export default {
+	async fetch(request: Request, env: Env): Promise<Response> {
+		const url = new URL(request.url);
+
+		if (url.pathname === "/health") {
+			return Response.json({ status: "ok", timestamp: Date.now() });
+		}
+
+		const agentResponse = await routeAgentRequest(request, env);
+		if (agentResponse !== null) return agentResponse;
+
+		return env.ASSETS.fetch(request);
+	},
+};

package/templates/chat/src/jack-ai.ts

@@ -0,0 +1,94 @@
+/**
+ * Jack AI Client - Drop-in replacement for Cloudflare AI binding.
+ *
+ * This wrapper provides the same interface as env.AI but routes calls
+ * through jack's binding proxy for metering and quota enforcement.
+ *
+ * Usage in templates:
+ * ```typescript
+ * import { createJackAI } from "./jack-ai";
+ *
+ * interface Env {
+ *   __AI_PROXY: Fetcher;        // Service binding to binding-proxy worker
+ * }
+ *
+ * export default {
+ *   async fetch(request: Request, env: Env) {
+ *     const AI = createJackAI(env);
+ *     const result = await AI.run("@cf/meta/llama-3.2-1b-instruct", { messages });
+ *     // Works exactly like env.AI.run()
+ *   }
+ * };
+ * ```
+ *
+ * The wrapper is transparent - it accepts the same parameters as env.AI.run()
+ * and returns the same response types, including streaming.
+ */
+
+interface JackAIEnv {
+	__AI_PROXY: Fetcher;
+}
+
+/**
+ * Creates a Jack AI client that mirrors the Cloudflare AI binding interface.
+ *
+ * @param env - Worker environment with jack proxy bindings
+ * @returns AI-compatible object with run() method
+ */
+export function createJackAI(env: JackAIEnv): {
+	run: <T = unknown>(
+		model: string,
+		inputs: unknown,
+		options?: unknown,
+	) => Promise<T | ReadableStream>;
+} {
+	return {
+		async run<T = unknown>(
+			model: string,
+			inputs: unknown,
+			options?: unknown,
+		): Promise<T | ReadableStream> {
+			const response = await env.__AI_PROXY.fetch("http://internal/ai/run", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ model, inputs, options }),
+			});
+
+			// Handle quota exceeded
+			if (response.status === 429) {
+				const error = await response.json();
+				const quotaError = new Error(
+					(error as { message?: string }).message || "AI quota exceeded",
+				);
+				(quotaError as Error & { code: string }).code = "AI_QUOTA_EXCEEDED";
+				(quotaError as Error & { resetIn?: number }).resetIn = (
+					error as { resetIn?: number }
+				).resetIn;
+				throw quotaError;
+			}
+
+			// Handle other errors
+			if (!response.ok) {
+				const error = await response.json();
+				throw new Error((error as { error?: string }).error || "AI request failed");
+			}
+
+			// Handle streaming response
+			const contentType = response.headers.get("Content-Type");
+			if (contentType?.includes("text/event-stream")) {
+				return response.body as ReadableStream;
+			}
+
+			// Handle JSON response
+			return response.json() as Promise<T>;
+		},
+	};
+}
+
+/**
+ * Type-safe wrapper that infers return types based on model.
+ * For advanced users who want full type safety.
+ */
+export type JackAI = ReturnType<typeof createJackAI>;

package/templates/chat/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"lib": ["ES2022", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"jsx": "react-jsx",
+		"strict": true,
+		"skipLibCheck": true,
+		"noEmit": true,
+		"types": ["@cloudflare/workers-types"],
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/client/*"]
+		}
+	},
+	"include": ["src"]
+}

package/templates/chat/vite.config.ts

@@ -0,0 +1,14 @@
+import { resolve } from "node:path";
+import { cloudflare } from "@cloudflare/vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [react(), tailwindcss(), cloudflare()],
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "./src/client"),
+		},
+	},
+});

package/templates/chat/wrangler.jsonc

@@ -0,0 +1,18 @@
+{
+	"name": "jack-template",
+	"main": "src/index.ts",
+	"compatibility_date": "2024-12-01",
+	"compatibility_flags": ["nodejs_compat"],
+	"ai": {
+		"binding": "AI"
+	},
+	"durable_objects": {
+		"bindings": [{ "name": "Chat", "class_name": "Chat" }]
+	},
+	"migrations": [{ "tag": "v1", "new_sqlite_classes": ["Chat"] }],
+	"assets": {
+		"directory": "dist/client",
+		"binding": "ASSETS",
+		"not_found_handling": "single-page-application"
+	}
+}