5import satori from "npm:satori";
6
7export function handleImageEndpoints(app: Hono) {
8 const headers = {
9 "Content-Type": "image/png",
10 "cache-control": "public, max-age=3600",
11 };
12 app.get("/image", async (c) => {
13 return c.body(await homeImage(), 200, headers);
14 });
15}
16
17export async function homeImage() {
18 return await ogImage(
19 <div
20 tw="w-full h-full flex justify-start items-end text-[100px] bg-black bg-gradient-to-br from-black to-gray-900 text-white p-[50px]"
34 width: "100px",
35 height: "100px",
36 WebkitMaskImage: `url(${base64Icon(Store)})`,
37 WebkitMaskRepeat: "no-repeat",
38 // WebkitMaskPosition: "center",
53//////////
54
55export async function ogImage(body) {
56 const svg = await satori(
57 body,
64 if (code === "emoji") {
65 const unicode = segment.codePointAt(0).toString(16).toUpperCase();
66 return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));
67 }
68 return "";
101 const base64 = Buffer.from(svg).toString("base64");
102 // console.log('getIconDataUrl', name, svg, base64)
103 return `data:image/svg+xml;base64,${base64}`;
104};
3export const name = "Mini App Store";
4export const iconUrl = "https://imgur.com/u3sNFyO.png";
5// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
6
7export function embedMetadata(baseUrl: string, path: string = "/") {
13 return {
14 version: "next",
15 imageUrl: baseUrl + "/image",
16 button: {
17 title: name + titleSuffix,
20 name: name,
21 url: baseUrl + path,
22 splashImageUrl: iconUrl,
23 splashBackgroundColor: "#111111",
24 },
49 "iconUrl": iconUrl,
50 "homeUrl": baseUrl,
51 "splashImageUrl": iconUrl,
52 "splashBackgroundColor": "#111111",
53 "webhookUrl": baseUrl + "/webhook",
3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.
4
5
6
7## Install
2import { useState } from "https://esm.sh/react@19.0.0";
3import { AudioRecorder } from "./AudioRecorder.tsx";
4import { ImageUploader } from "./ImageUploader.tsx";
5import { useAuth } from "../../../hooks/useAuth.ts";
6import { client } from "../../../hono.ts";
20 const [generatedEmail, setGeneratedEmail] = useState<EmailData | null>(null);
21 const [savedWorkOrderId, setSavedWorkOrderId] = useState<string | null>(null);
22 const [imageB64, setImageB64] = useState<string | null>(null);
23 const [audioB64, setAudioB64] = useState<string | null>(null);
24 const [isGenerating, setIsGenerating] = useState(false);
27 const generateEmail = async () => {
28 setIsGenerating(true);
29 if (!audioB64 || !imageB64 || !user) return;
30
31 const response = await client.workorders.generate.$post({
32 json: {
33 imageB64,
34 audioB64,
35 fromName: `${user.firstName || ""} ${user.lastName || ""}`.trim() ||
70 e.preventDefault();
71
72 if (!audioB64 || !imageB64) return;
73 if (!user) return;
74 await generateEmail();
76
77 const buttonClass = `w-full px-4 py-2 rounded-md font-medium ${
78 isGenerating || !audioB64 || !imageB64
79 ? "bg-gray-300 text-gray-500 cursor-not-allowed"
80 : "bg-amber-600 hover:bg-amber-700 text-white"
92 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
93 <AudioRecorder onRecordingComplete={setAudioB64} />
94 <ImageUploader onImageSelected={setImageB64} />
95 </div>
96
98 <button
99 type="submit"
100 disabled={isGenerating || !audioB64 || !imageB64}
101 className={buttonClass}
102 >
152 setGeneratedEmail(null);
153 setAudioB64(null);
154 setImageB64(null);
155 setSavedWorkOrderId(null);
156 }}
13## Example
14This val tracks mentions of "Val Town" and related terms on Reddit, filtering results from the last 7 days and sending alerts to a Discord webhook.
15
16
17---
21### 1. Fork this Val
22To start using this template, fork this val by clicking the fork button at the top-right corner of the page.
23
24
25---
26### 2. View Source Code
27<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
28
29
30---
9 bearerToken: string;
10 selectedFiles: string[];
11 images: (string | null)[];
12 soundEnabled: boolean;
13}
19 bearerToken,
20 selectedFiles,
21 images,
22 soundEnabled,
23}: UseChatLogicProps) {
41 anthropicApiKey,
42 selectedFiles,
43 images: images
44 .filter((img): img is string => {
45 const isValid = typeof img === "string" && img.startsWith("data:");
46 if (!isValid && img !== null) {
47 console.warn("Invalid image format:", img?.substring(0, 50) + "...");
48 }
49 return isValid;
29 - [x] File write as a code embed
30 - [x] str_replace as a diff view
31- [x] make image drop area invisible and bigger
32- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)
33- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?
172
173- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
174- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
19 }
20
21 const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
22 console.log("Original messages:", JSON.stringify(messages, null, 2));
23 console.log("Images received:", JSON.stringify(images, null, 2));
24
25 // Check if API key is available
47 let coreMessages = convertToCoreMessages(messages);
48
49 // If there are images, we need to add them to the last user message
50 if (images && Array.isArray(images) && images.length > 0) {
51 // Find the last user message
52 const lastUserMessageIndex = coreMessages.findIndex(
70 };
71
72 // Add each image to the content array using the correct ImagePart format
73 for (const image of images) {
74 if (image && image.url) {
75 // Extract mime type from data URL if available
76 let mimeType = undefined;
77 if (image.url.startsWith("data:")) {
78 const matches = image.url.match(/^data:([^;]+);/);
79 if (matches && matches.length > 1) {
80 mimeType = matches[1];
83
84 newUserMessage.content.push({
85 type: "image",
86 image: image.url,
87 mimeType,
88 });
2import { type Message } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
3import ReactMarkdown from "https://esm.sh/react-markdown?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { ImagePreview } from "./ImageUpload.tsx";
5
6// Helper function to detect language from file path
322 );
323 }
324 if (part.type === "image") {
325 // Handle both formats: {image: {url: string}} and {image: string}
326 const imageUrl = typeof part.image === "string"
327 ? part.image
328 : part.image.url || (part.image as any).source?.url;
329
330 return (
331 <div className="mt-2">
332 <img
333 src={imageUrl}
334 alt="Uploaded image"
335 className="max-h-64 max-w-full object-contain rounded"
336 />
338 );
339 }
340 // Handle multiple images in a single part
341 if (part.type === "images") {
342 return <ImagePreview images={part.images.map(img => img.url)} />;
343 }
344}
