155- Current health goals and any medication reminders needed?
156
157Your goal is to collect this information naturally through conversation and store it as memories (as undated memories). Once you've gathered sufficient background information, you can conclude the intake process and transition to normal reactive chat.
158
159If the conversation is already past the intake stage, then analyze the message content and think about which memories might be worth creating based on the information provided.
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
200- For persistence, use Val Town SQLite or Blob storage with `import.meta.url` for keys/table names
201- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and include the `@jsxImportSource` pragma
202- When facing client-side render issues, check if all React dependencies are pinned to the same version
203- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
204
262
263### Frontend Best Practices
264- Structure as a standard client-side React app
265- Use SVG for favicons (Val Town only supports text files)
266- Separate components into individual files
267- Access bootstrapped data from `window.__INITIAL_DATA__`
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
289 - Always run table creation before querying
290
2913. **React Configuration:**
292 - All React dependencies must be pinned to 18.2.0
293 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
294 - Rendering issues often come from mismatched React versions
295
2964. **File Handling:**
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, {
3 useState,
4 useEffect,
5 useCallback,
6 useMemo,
7} from "https://esm.sh/react@18.2.0";
8import { type Memory } from "../../shared/types.ts";
9import { ASSETS, SCENE_POSITIONS, SOURCE_TYPES } from "./assets.ts";
165 }, [fetchMemories]);
166
167 const handleAddMemory = async (e: React.FormEvent) => {
168 e.preventDefault();
169 if (!newMemoryText.trim()) return;
220 };
221
222 const handleUpdateMemory = async (e: React.FormEvent) => {
223 e.preventDefault();
224 if (!editingMemory || !editingMemory.text.trim()) return;
1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import ReactDOM from "https://esm.sh/react-dom@19/client";
4import { BrowserRouter, Routes, Route, Link, Outlet } from "https://esm.sh/react-router@7";
5
6function App () {
8 <div>
9 <header>
10 <div>React Router Starter</div>
11 <nav>
12 <ul>
22 <Outlet />
23 <footer>
24 <a href="https://val.town/x/jxnblk/react-router-starter">Remix it on Val Town</a>
25 </footer>
26 </div>
47const root = document.getElementById("root");
48
49ReactDOM.createRoot(root).render(
50 <BrowserRouter>
51 <Routes>
1/** @jsxImportSource npm:react */
2import * as React from "npm:react";
3import ReactDOMServer from "npm:react-dom/server";
4
5const CLIENT_MODULE = import.meta.resolve("./client.tsx");
9 <html lang="en">
10 <head>
11 <title>React Router Starter</title>
12 </head>
13 <body>
19
20export default async function (req: Request): Promise<Response> {
21 let html = await ReactDOMServer.renderToReadableStream(<Root />, {
22 bootstrapModules: [ CLIENT_MODULE ],
23 });
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import { Dashboard } from "./Dashboard.tsx";
4import { Navigation } from "./Navigation.tsx";
6
7// Main App component
8export const App: React.FC = () => {
9 const [isSetup, setIsSetup] = useState<boolean | null>(null);
10 const [view, setView] = useState<string>("dashboard");
34 </div>
35 </div>
36 <!-- Preact and JSX runtime -->
37 <script type="importmap">
38 {
39 "imports": {
40 "react": "https://esm.sh/react@18.2.0",
41 "react/hooks": "https://esm.sh/react@18.2.0/hooks",
42 "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime"
43 }
44 }
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import { App } from "./components/App.tsx";
5
14 // Create root and render app
15 const root = createRoot(appElement);
16 root.render(React.createElement(App));
17 } else {
18 console.error('App element not found');
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React from "https://esm.sh/react@18.2.0";
3
4// Navigation component props
9
10// Navigation component
11export const Navigation: React.FC<NavigationProps> = ({ activeView, onViewChange }) => {
12 return (
13 <header className="bg-blue-600 text-white shadow-md">
76
77// NavItem component
78const NavItem: React.FC<NavItemProps> = ({ label, view, activeView, onViewChange }) => {
79 const isActive = activeView === view;
80
1// @jsxImportSource https://esm.sh/react@18.2.0
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { TRACKS, getTrackName, getTrackEmoji, getCurrentDay } from "../../shared/utils.ts";
4
27
28// Dashboard component
29export const Dashboard: React.FC<DashboardProps> = ({ onViewChange }) => {
30 const [tracks, setTracks] = useState<TrackStatus[]>([]);
31 const [todaysTasks, setTodaysTasks] = useState<Task[]>([]);
306
307// Track card component
308const TrackCard: React.FC<TrackCardProps> = ({ track, status, onViewDetails }) => {
309 return (
310 <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
332
333// Status badge component
334const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
335 let bg = "bg-gray-100";
336 let text = "text-gray-800";
362
363// Stat card component
364const StatCard: React.FC<StatCardProps> = ({ title, value, color }) => {
365 let colorClass = "text-gray-700 dark:text-gray-300";
366