@getjack/jack 0.1.22 → 0.1.23

package/templates/ai-chat/public/chat.js

@@ -0,0 +1,149 @@
+const messagesEl = document.getElementById('messages');
+const inputEl = document.getElementById('input');
+const sendBtn = document.getElementById('send');
+
+let history = [];
+let isLoading = false;
+
+function setLoading(loading) {
+  isLoading = loading;
+  inputEl.disabled = loading;
+  sendBtn.disabled = loading;
+  sendBtn.textContent = loading ? '...' : 'Send';
+}
+
+function clearEmptyState() {
+  const emptyState = messagesEl.querySelector('.empty-state');
+  if (emptyState) {
+    emptyState.remove();
+  }
+}
+
+function appendMessage(role, content, className = '') {
+  clearEmptyState();
+  const el = document.createElement('div');
+  el.className = `message ${role} ${className}`.trim();
+  el.textContent = content;
+  messagesEl.appendChild(el);
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+  return el;
+}
+
+async function sendMessage() {
+  const content = inputEl.value.trim();
+  if (!content || isLoading) return;
+
+  // Add user message to history and display
+  history.push({ role: 'user', content });
+  appendMessage('user', content);
+  inputEl.value = '';
+
+  // Create assistant message placeholder
+  const assistantEl = appendMessage('assistant', '', 'typing');
+  setLoading(true);
+
+  try {
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages: history }),
+    });
+
+    if (!response.ok) {
+      let errorMessage = 'Something went wrong. Please try again.';
+      try {
+        const err = await response.json();
+        if (err.error) {
+          errorMessage = err.error;
+        }
+      } catch {
+        // Use default error message
+      }
+      assistantEl.textContent = errorMessage;
+      assistantEl.className = 'message assistant error';
+      setLoading(false);
+      return;
+    }
+
+    // Stream response
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let assistantContent = '';
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+
+      // Process complete SSE messages
+      const lines = buffer.split('\n');
+      // Keep the last potentially incomplete line in the buffer
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const data = line.slice(6).trim();
+          if (data === '[DONE]') continue;
+
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.response) {
+              assistantContent += parsed.response;
+              assistantEl.textContent = assistantContent;
+              assistantEl.className = 'message assistant';
+              messagesEl.scrollTop = messagesEl.scrollHeight;
+            }
+          } catch {
+            // Skip malformed JSON chunks
+          }
+        }
+      }
+    }
+
+    // Process any remaining buffer content
+    if (buffer.startsWith('data: ')) {
+      const data = buffer.slice(6).trim();
+      if (data && data !== '[DONE]') {
+        try {
+          const parsed = JSON.parse(data);
+          if (parsed.response) {
+            assistantContent += parsed.response;
+            assistantEl.textContent = assistantContent;
+            assistantEl.className = 'message assistant';
+          }
+        } catch {
+          // Skip malformed JSON
+        }
+      }
+    }
+
+    // Save to history if we got content
+    if (assistantContent) {
+      history.push({ role: 'assistant', content: assistantContent });
+    } else {
+      assistantEl.textContent = 'No response received. Please try again.';
+      assistantEl.className = 'message assistant error';
+    }
+  } catch (err) {
+    console.error('Chat error:', err);
+    assistantEl.textContent = 'Connection error. Please check your network and try again.';
+    assistantEl.className = 'message assistant error';
+  }
+
+  setLoading(false);
+  inputEl.focus();
+}
+
+// Event listeners
+sendBtn.addEventListener('click', sendMessage);
+inputEl.addEventListener('keypress', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+});
+
+// Focus input on load
+inputEl.focus();

package/templates/ai-chat/public/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Chat</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: #f5f5f5;
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      padding: 1rem;
+    }
+
+    .chat-container {
+      width: 100%;
+      max-width: 700px;
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - 2rem);
+    }
+
+    header {
+      text-align: center;
+      padding: 1rem;
+    }
+
+    header h1 {
+      font-size: 1.5rem;
+      color: #333;
+      margin-bottom: 0.25rem;
+    }
+
+    header p {
+      font-size: 0.875rem;
+      color: #666;
+    }
+
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      background: white;
+      border-radius: 12px;
+      margin-bottom: 1rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .message {
+      padding: 0.75rem 1rem;
+      margin-bottom: 0.75rem;
+      border-radius: 12px;
+      max-width: 85%;
+      line-height: 1.5;
+      word-wrap: break-word;
+    }
+
+    .message.user {
+      background: #007bff;
+      color: white;
+      margin-left: auto;
+      border-bottom-right-radius: 4px;
+    }
+
+    .message.assistant {
+      background: #e9ecef;
+      color: #333;
+      margin-right: auto;
+      border-bottom-left-radius: 4px;
+    }
+
+    .message.error {
+      background: #fee;
+      color: #c00;
+      border: 1px solid #fcc;
+    }
+
+    .message.typing {
+      color: #666;
+      font-style: italic;
+    }
+
+    .input-area {
+      display: flex;
+      gap: 0.5rem;
+      background: white;
+      padding: 1rem;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .input-area input {
+      flex: 1;
+      padding: 0.75rem 1rem;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      font-size: 1rem;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    .input-area input:focus {
+      border-color: #007bff;
+    }
+
+    .input-area input:disabled {
+      background: #f5f5f5;
+      cursor: not-allowed;
+    }
+
+    .input-area button {
+      padding: 0.75rem 1.5rem;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+
+    .input-area button:hover:not(:disabled) {
+      background: #0056b3;
+    }
+
+    .input-area button:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    .empty-state {
+      text-align: center;
+      color: #999;
+      padding: 3rem 1rem;
+    }
+
+    .empty-state p {
+      font-size: 1.1rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .empty-state small {
+      font-size: 0.875rem;
+    }
+
+    @media (max-width: 480px) {
+      body {
+        padding: 0.5rem;
+      }
+
+      .chat-container {
+        height: calc(100vh - 1rem);
+      }
+
+      header h1 {
+        font-size: 1.25rem;
+      }
+
+      .message {
+        max-width: 90%;
+        padding: 0.625rem 0.875rem;
+      }
+
+      .input-area {
+        padding: 0.75rem;
+      }
+
+      .input-area button {
+        padding: 0.75rem 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="chat-container">
+    <header>
+      <h1>AI Chat</h1>
+      <p>Powered by Cloudflare AI (Mistral 7B)</p>
+    </header>
+
+    <div id="messages" class="messages">
+      <div class="empty-state">
+        <p>Start a conversation</p>
+        <small>Type a message below to begin</small>
+      </div>
+    </div>
+
+    <div class="input-area">
+      <input
+        type="text"
+        id="input"
+        placeholder="Type your message..."
+        autocomplete="off"
+      />
+      <button id="send">Send</button>
+    </div>
+  </div>
+
+  <script src="/chat.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,105 @@
+interface Env {
+	AI: Ai;
+	ASSETS: Fetcher;
+}
+
+interface ChatMessage {
+	role: "user" | "assistant" | "system";
+	content: string;
+}
+
+// Rate limiting: 10 requests per minute per IP
+const RATE_LIMIT = 10;
+const RATE_WINDOW_MS = 60_000;
+const rateLimitMap = new Map<string, { count: number; resetAt: number }>();
+
+function checkRateLimit(ip: string): boolean {
+	const now = Date.now();
+	const entry = rateLimitMap.get(ip);
+
+	if (!entry || now >= entry.resetAt) {
+		rateLimitMap.set(ip, { count: 1, resetAt: now + RATE_WINDOW_MS });
+		return true;
+	}
+
+	if (entry.count >= RATE_LIMIT) {
+		return false;
+	}
+
+	entry.count++;
+	return true;
+}
+
+// Clean up old entries periodically to prevent memory leaks
+function cleanupRateLimitMap(): void {
+	const now = Date.now();
+	for (const [ip, entry] of rateLimitMap) {
+		if (now >= entry.resetAt) {
+			rateLimitMap.delete(ip);
+		}
+	}
+}
+
+export default {
+	async fetch(request: Request, env: Env): Promise<Response> {
+		const url = new URL(request.url);
+
+		// Serve static assets for non-API routes
+		if (request.method === "GET" && !url.pathname.startsWith("/api")) {
+			return env.ASSETS.fetch(request);
+		}
+
+		// POST /api/chat - Streaming chat endpoint
+		if (request.method === "POST" && url.pathname === "/api/chat") {
+			const ip = request.headers.get("cf-connecting-ip") || "unknown";
+
+			// Check rate limit
+			if (!checkRateLimit(ip)) {
+				// Cleanup old entries occasionally
+				cleanupRateLimitMap();
+				return Response.json(
+					{ error: "Too many requests. Please wait a moment and try again." },
+					{ status: 429 },
+				);
+			}
+
+			try {
+				const body = (await request.json()) as { messages?: ChatMessage[] };
+				const messages = body.messages;
+
+				if (!messages || !Array.isArray(messages)) {
+					return Response.json(
+						{ error: "Invalid request. Please provide a messages array." },
+						{ status: 400 },
+					);
+				}
+
+				// Stream response using SSE
+				const stream = await env.AI.run(
+					"@cf/mistral/mistral-7b-instruct-v0.1",
+					{
+						messages,
+						stream: true,
+						max_tokens: 1024,
+					},
+				);
+
+				return new Response(stream, {
+					headers: {
+						"Content-Type": "text/event-stream",
+						"Cache-Control": "no-cache",
+						Connection: "keep-alive",
+					},
+				});
+			} catch (err) {
+				console.error("Chat error:", err);
+				return Response.json(
+					{ error: "Something went wrong. Please try again." },
+					{ status: 500 },
+				);
+			}
+		}
+
+		return Response.json({ error: "Not found" }, { status: 404 });
+	},
+};

package/templates/ai-chat/wrangler.jsonc

@@ -0,0 +1,12 @@
+{
+	"name": "jack-template",
+	"main": "src/index.ts",
+	"compatibility_date": "2024-12-01",
+	"ai": {
+		"binding": "AI"
+	},
+	"assets": {
+		"directory": "public",
+		"binding": "ASSETS"
+	}
+}

package/templates/semantic-search/.jack.json

@@ -0,0 +1,26 @@
+{
+	"name": "semantic-search",
+	"description": "Semantic search with AI embeddings + Vectorize",
+	"secrets": [],
+	"capabilities": ["ai", "db"],
+	"intent": {
+		"keywords": ["rag", "semantic", "search", "embeddings", "vectorize", "vector", "similarity"],
+		"examples": ["RAG app", "document search", "semantic search", "knowledge base"]
+	},
+	"hooks": {
+		"postDeploy": [
+			{ "action": "clipboard", "text": "{{url}}", "message": "URL copied" },
+			{
+				"action": "box",
+				"title": "Semantic Search: {{name}}",
+				"lines": [
+					"{{url}}",
+					"",
+					"Open in browser to index documents and search!",
+					"",
+					"Note: Local dev requires 'wrangler dev --remote'"
+				]
+			}
+		]
+	}
+}

package/templates/semantic-search/bun.lock

@@ -0,0 +1,18 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "jack-template",
+      "devDependencies": {
+        "@cloudflare/workers-types": "^4.20241205.0",
+        "typescript": "^5.0.0",
+      },
+    },
+  },
+  "packages": {
+    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20260120.0", "", {}, "sha512-B8pueG+a5S+mdK3z8oKu1ShcxloZ7qWb68IEyLLaepvdryIbNC7JVPcY0bWsjS56UQVKc5fnyRge3yZIwc9bxw=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+  }
+}

package/templates/semantic-search/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "jack-template",
+	"type": "module",
+	"scripts": {
+		"dev": "wrangler dev --remote",
+		"deploy": "wrangler deploy"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^4.20241205.0",
+		"typescript": "^5.0.0"
+	}
+}

package/templates/semantic-search/public/app.js

@@ -0,0 +1,120 @@
+const docIdEl = document.getElementById("doc-id");
+const docContentEl = document.getElementById("doc-content");
+const indexBtn = document.getElementById("index-btn");
+const indexStatus = document.getElementById("index-status");
+const searchQueryEl = document.getElementById("search-query");
+const searchBtn = document.getElementById("search-btn");
+const resultsEl = document.getElementById("results");
+
+// Index document
+async function indexDocument() {
+	const id = docIdEl.value.trim();
+	const content = docContentEl.value.trim();
+
+	if (!id || !content) {
+		showStatus(indexStatus, "Please enter both ID and content", "error");
+		return;
+	}
+
+	indexBtn.disabled = true;
+	indexBtn.innerHTML = '<span class="loading"></span>Indexing...';
+
+	try {
+		const response = await fetch("/api/index", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ id, content }),
+		});
+
+		const data = await response.json();
+
+		if (response.ok) {
+			showStatus(indexStatus, `Document "${id}" indexed successfully!`, "success");
+			docIdEl.value = "";
+			docContentEl.value = "";
+		} else {
+			showStatus(indexStatus, data.error || "Failed to index document", "error");
+		}
+	} catch (err) {
+		showStatus(indexStatus, "Network error. Please try again.", "error");
+	} finally {
+		indexBtn.disabled = false;
+		indexBtn.textContent = "Index Document";
+	}
+}
+
+// Search documents
+async function searchDocuments() {
+	const query = searchQueryEl.value.trim();
+
+	if (!query) {
+		resultsEl.innerHTML = '<div class="no-results">Please enter a search query</div>';
+		return;
+	}
+
+	searchBtn.disabled = true;
+	searchBtn.innerHTML = '<span class="loading"></span>Searching...';
+	resultsEl.innerHTML = "";
+
+	try {
+		const response = await fetch("/api/search", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ query, limit: 5 }),
+		});
+
+		const data = await response.json();
+
+		if (response.ok) {
+			if (data.results && data.results.length > 0) {
+				resultsEl.innerHTML = data.results
+					.map(
+						(result) => `
+          <div class="result">
+            <div class="result-header">
+              <span class="result-id">${escapeHtml(result.id)}</span>
+              <span class="result-score">Score: ${(result.score * 100).toFixed(1)}%</span>
+            </div>
+            <div class="result-preview">${escapeHtml(result.metadata?.preview || "No preview available")}</div>
+          </div>
+        `,
+					)
+					.join("");
+			} else {
+				resultsEl.innerHTML = '<div class="no-results">No matching documents found</div>';
+			}
+		} else {
+			resultsEl.innerHTML = `<div class="no-results">${escapeHtml(data.error || "Search failed")}</div>`;
+		}
+	} catch (err) {
+		resultsEl.innerHTML = '<div class="no-results">Network error. Please try again.</div>';
+	} finally {
+		searchBtn.disabled = false;
+		searchBtn.textContent = "Search";
+	}
+}
+
+// Helper functions
+function showStatus(el, message, type) {
+	el.textContent = message;
+	el.className = `status ${type}`;
+}
+
+function escapeHtml(text) {
+	const div = document.createElement("div");
+	div.textContent = text;
+	return div.innerHTML;
+}
+
+// Event listeners
+indexBtn.addEventListener("click", indexDocument);
+searchBtn.addEventListener("click", searchDocuments);
+
+// Enter key support
+docIdEl.addEventListener("keypress", (e) => {
+	if (e.key === "Enter") docContentEl.focus();
+});
+
+searchQueryEl.addEventListener("keypress", (e) => {
+	if (e.key === "Enter") searchDocuments();
+});