Val Town Code SearchReturn to Val Town

4
5- Ask clarifying questions when requirements are ambiguous
6- Provide complete, functional solutions rather than skeleton implementations
7- Test your logic against edge cases before presenting the final solution
8- Ensure all code follows Val Town's specific platform requirements
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
19- Follow modern ES6+ conventions and functional programming practices if possible
20
21## Types of triggers
28
29```ts
30export default async function (req: Request) {
31  return new Response("Hello World");
32}
40
41```ts
42export default async function () {
43  // Scheduled task code
44}
52
53```ts
54export default async function (email: Email) {
55  // Process email
56}
60## Val Town Standard Libraries
61
62Val Town provides several hosted services and utility functions.
63
64### Blob Storage
114```
115
116## Val Town Utility Functions
117
118Val Town provides several utility functions to help with common project tasks.
119
120### Importing Utilities
194│   ├── database/
195│   │   ├── migrations.ts    # Schema definitions
196│   │   ├── queries.ts       # DB query functions
197│   │   └── README.md
198│   └── routes/              # Route modules
213└── shared/
214    ├── README.md
215    └── utils.ts             # Shared types and functions
216```
217
220- Hono is the recommended API framework
221- Main entry point should be `backend/index.ts`
222- **Static asset serving:** Use the utility functions to read and serve project files:
223  ```ts
224  import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
254- Run migrations on startup or comment out for performance
255- Change table names when modifying schemas rather than altering
256- Export clear query functions with proper TypeScript typing
257
258## Common Gotchas and Solutions

1/**
2 * Sound effects utility functions for the application
3 */
4
7 * @returns A Promise that resolves when the sound has started playing
8 */
9export function playBellSound(): Promise<void> {
10  return new Promise((resolve) => {
11    try {
69 * @returns A Promise that resolves when the sound has started playing
70 */
71export function playSimpleNotification(): Promise<void> {
72  return new Promise((resolve) => {
73    try {

9);
10
11async function loader({ bearerToken }: { bearerToken: string }) {
12  const data = await (await fetch("/api/projects-loader", {
13    headers: {
18}
19
20export function Projects({ bearerToken, setProject }: { bearerToken: string; setProject: any }) {
21  const [loaderData, setLoaderData] = useState<any>();
22  const [isLoading, setIsLoading] = useState<boolean>(true);

11}
12
13export function ProjectFiles({
14  projectFiles,
15  isLoadingFiles,

4import { ImagePreview } from "./ImageUpload.tsx";
5
6// Helper function to detect language from file path
7const detectLanguage = (path: string): string => {
8  if (!path) return "text";
86};
87
88export function MessagePart({ part }: { part: NonNullable<Message["parts"]>[number] }) {
89  if (part.type === "text") return <ReactMarkdown>{part.text}</ReactMarkdown>;
90  if (part.type === "reasoning")

24}
25
26export function MessageItem({ message, usages, messageEndTimes, running }: MessageItemProps) {
27  return (
28    <div

2import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
3
4export function Login() {
5  const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
6  const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");

11}
12
13export function ImageUpload({ images, setImages, processFiles }: ImageUploadProps) {
14  const fileInputRef = useRef<HTMLInputElement>(null);
15
79}
80
81// Process files utility function - moved from the component to be reusable
82export const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {
83  // Filter for image files only
124
125// Component to display images in messages
126export function ImagePreview({ images }: { images: string[] }) {
127  const [expandedImage, setExpandedImage] = useState<string | null>(null);
128

1export default function fileWithLineNumbers(text: string, view_range = []) {
2  return [
3    undefined, // Line numbers are 1-indexed

6}
7
8export function ErrorDisplay({ error }: ErrorDisplayProps) {
9  if (!error) return null;
10