Val Town Code SearchReturn to Val Town

8import { ChatMessages } from "./ChatMessages.tsx";
9import { ChatInput } from "./ChatInput.tsx";
10import { ApiKeyWarning } from "./ApiKeyWarning.tsx";
11import { processFiles } from "./ImageUpload.tsx";
12import { Preview } from "./Preview.tsx";
15  project,
16  bearerToken,
17  anthropicApiKey,
18  setProject,
19}: {
20  project: any;
21  bearerToken: string;
22  anthropicApiKey: string;
23  setProject: (project: any) => void;
24}) {
57    project,
58    branchId,
59    anthropicApiKey,
60    bearerToken,
61    selectedFiles,
170
171      <div className="p-6 flex flex-col h-full w-full">
172        <ApiKeyWarning show={!anthropicApiKey} />
173        
174        <div className="flex flex-col lg:flex-row gap-4">

37      setIsLoadingBranches(true);
38      try {
39        const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
40          headers: {
41            "Authorization": `Bearer ${bearerToken}`,
107      const fetchBranches = async () => {
108        try {
109          const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
110            headers: {
111              "Authorization": `Bearer ${bearerToken}`,

17export function App() {
18  const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
19  const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
20  const [projectJSON, setProjectJSON] = useLocalStorage("project", "");
21  const [project, setProject_] = useState(safeParse(projectJSON));
30    setBearerToken("");
31    setShowLogin(false);
32    // Keep the anthropic API key in case the user wants to reuse it
33  }
34
41        <Chat
42          bearerToken={bearerToken}
43          anthropicApiKey={anthropicApiKey}
44          project={project}
45          setProject={setProject}

3  { bearerToken, projectId, branchId }: { bearerToken: string; projectId: string; branchId?: string },
4) {
5  const url = new URL("/api/project-files", window.location.origin);
6  url.searchParams.append("projectId", projectId);
7  if (branchId) {

2import React from "https://esm.sh/react@18.2.0?dev";
3
4interface ApiKeyWarningProps {
5  show: boolean;
6}
7
8export function ApiKeyWarning({ show }: ApiKeyWarningProps) {
9  if (!show) return null;
10  
11  return (
12    <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 rounded">
13      <p className="font-bold">Anthropic API Key Missing</p>
14      <p>Please log out and add your Anthropic API key to use this app.</p>
15    </div>
16  );

15
16// Public route without authentication
17app.get("/api/public/:id", async (c) => {
18  const key = `__public/${c.req.param("id")}`;
19  const { blob } = await import("https://esm.town/v/std/blob");
133};
134
135app.get("/api/blobs", checkAuth, async (c) => {
136  const prefix = c.req.query("prefix") || "";
137  const limit = parseInt(c.req.query("limit") || "20", 10);
142});
143
144app.get("/api/blob", checkAuth, async (c) => {
145  const key = c.req.query("key");
146  if (!key) return c.text("Missing key parameter", 400);
150});
151
152app.put("/api/blob", checkAuth, async (c) => {
153  const key = c.req.query("key");
154  if (!key) return c.text("Missing key parameter", 400);
159});
160
161app.delete("/api/blob", checkAuth, async (c) => {
162  const key = c.req.query("key");
163  if (!key) return c.text("Missing key parameter", 400);
167});
168
169app.post("/api/blob", checkAuth, async (c) => {
170  const { file, key } = await c.req.parseBody();
171  if (!file || !key) return c.text("Missing file or key", 400);

70  const menuRef = useRef(null);
71  const isPublic = blob.key.startsWith("__public/");
72  const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;
73
74  useEffect(() => {
234    setLoading(true);
235    try {
236      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
237      const data = await response.json();
238      setBlobs(data);
261      setBlobContentLoading(true);
262      try {
263        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
264        const content = await response.text();
265        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
275  const handleSave = async () => {
276    try {
277      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
278        method: "PUT",
279        body: editContent,
287  const handleDelete = async (key) => {
288    try {
289      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
290      setBlobs(blobs.filter(b => b.key !== key));
291      if (selectedBlob && selectedBlob.key === key) {
304        const key = `${searchPrefix}${file.name}`;
305        formData.append("key", encodeKey(key));
306        await fetch("/api/blob", { method: "POST", body: formData });
307        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
308        setBlobs([newBlob, ...blobs]);
326      try {
327        const fullKey = `${searchPrefix}${key}`;
328        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
329          method: "PUT",
330          body: "",
341  const handleDownload = async (key) => {
342    try {
343      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
344      const blob = await response.blob();
345      const url = window.URL.createObjectURL(blob);
360    if (newKey && newKey !== oldKey) {
361      try {
362        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
363        const content = await response.blob();
364        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
365          method: "PUT",
366          body: content,
367        });
368        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
369        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
370        if (selectedBlob && selectedBlob.key === oldKey) {
380    const newKey = `__public/${key}`;
381    try {
382      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
383      const content = await response.blob();
384      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
385        method: "PUT",
386        body: content,
387      });
388      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
389      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
390      if (selectedBlob && selectedBlob.key === key) {
399    const newKey = key.slice(9); // Remove "__public/" prefix
400    try {
401      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
402      const content = await response.blob();
403      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
404        method: "PUT",
405        body: content,
406      });
407      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
408      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
409      if (selectedBlob && selectedBlob.key === key) {
554                        onClick={() =>
555                          copyToClipboard(
556                            `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,
557                          )}
558                        className="text-blue-400 hover:text-blue-300 text-sm"
577                        >
578                          <img
579                            src={`/api/blob?key=${encodeKey(selectedBlob.key)}`}
580                            alt="Blob content"
581                            className="max-w-full h-auto"

2
3export default async function(interval: Interval) {
4  // Use open-meteo for free weather API
5  const response = await fetch(
6    "https://api.open-meteo.com/v1/forecast?latitude=-1.2921&longitude=36.8219&current_weather=true&temperature_unit=celsius&windspeed_unit=km/h&precipitation_unit=millimeters&timezone=Africa/Nairobi",
7  );
8  const weatherData = await response.json();
17Timestamp: ${new Date().toLocaleString("en-US", { timeZone: "Africa/Nairobi" })}
18
19Powered by Open-Meteo Weather API
20Source: ${import.meta.url.replace("esm.town", "val.town")}
21  `;

22  useEffect(() => {
23    async function fetchFacts() {
24      const response = await fetch("/api/facts");
25      const data = await response.json();
26      setFacts(data);
31  useEffect(() => {
32    async function fetchDailyFact() {
33      const response = await fetch("/api/daily-fact");
34      const data = await response.json();
35      setDailyFact(data);
143  `);
144
145  // Handle API routes
146  const url = new URL(request.url);
147  if (url.pathname === "/api/facts") {
148    const facts = await sqlite.execute(`
149      SELECT * FROM ${KEY}_facts_${SCHEMA_VERSION}
154  }
155
156  if (url.pathname === "/api/daily-fact") {
157    const dailyFact = await sqlite.execute(`
158      SELECT * FROM ${KEY}_facts_${SCHEMA_VERSION}

22  useEffect(() => {
23    async function fetchFacts() {
24      const response = await fetch("/api/facts");
25      const data = await response.json();
26      setFacts(data);
31  useEffect(() => {
32    async function fetchDailyFact() {
33      const response = await fetch("/api/daily-fact");
34      const data = await response.json();
35      setDailyFact(data);
143  `);
144
145  // Handle API routes
146  const url = new URL(request.url);
147  if (url.pathname === "/api/facts") {
148    const facts = await sqlite.execute(`
149      SELECT * FROM ${KEY}_facts_${SCHEMA_VERSION}
154  }
155
156  if (url.pathname === "/api/daily-fact") {
157    const dailyFact = await sqlite.execute(`
158      SELECT * FROM ${KEY}_facts_${SCHEMA_VERSION}