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@18.2.0 */
2import { type Context, Hono } from "https://esm.sh/hono";
3import { debounce } from "https://esm.sh/lodash-es";
4import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
5import { parseProject } from "https://esm.town/v/std/parseImportMeta/project";
6import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";
4import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
5import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton";
6
7interface TooltipProps {
8 children: ReactNode;
9 content: string;
10}
9## How it works
10
11The `http.tsx` file is the main entry point and renders an HTML response on the server using React.
12This HTML includes a `<script>` tag to load the `client.tsx` file, which hydrates the React app.
13
14The JSX pragma at the top of files is:
19
20This points to the `jsx/jsx-runtime` module (the `jsx-runtime` name is important),
21which wraps the default React JSX runtime with a function that extracts an `sx` prop and applies it as the `style` prop.
22
23When the client module requests the `App.tsx` file from Val Town, the JSX is compiled to vanilla JavaScript to run in the browser.
1/** @jsxImportSource ./jsx */
2import { App } from "./App.tsx";
3import { hydrateRoot } from "https://esm.sh/react-dom@19/client";
4
5const root = hydrateRoot(document.getElementById("root"), <App />);
1/** @jsxImportSource ./jsx */
2import { renderToString } from "https://esm.sh/react-dom@19/server";
3import { App } from "./App.tsx";
4
1import { jsx as reactJSX } from 'https://esm.sh/react@19/jsx-runtime';
2export { Fragment } from "https://esm.sh/react@19";
3
4export const jsx = (type, props, key) => {
14 },
15 };
16 return reactJSX(type, merged, key);
17 }
18
19 return reactJSX(type, props, key);
20}
21
149- Current health goals and any medication reminders needed?
150
151Your 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.
152
153If 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.