1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React from "https://esm.sh/react@18.2.0?dev";
3import { Link } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import {
5 SquarePenIcon,
98 </p>
99 <ul>
100 <li>React frontend with TypeScript</li>
101 <li>Hono API server backend</li>
102 <li>Web Audio API for sound notifications</li>
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import { TownieIcon } from "./components/icons.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useRef, useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { TownieIcon } from "./icons.tsx";
4import { Messages } from "./Messages.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "https://esm.sh/react@18.2.0?dev";
3import { useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "https://esm.sh/react@18.2.0?dev";
3import { useNavigate, useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.tsx";
1import { useChat } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
2import React, { useCallback, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
3import { playBellSound } from "../utils/soundEffects.ts";
4
101 }, [stop, pendingMessageId, soundEnabled]);
102
103 React.useEffect(() => {
104 customStopRef.current = handleStop;
105 }, [handleStop]);
106
107 React.useEffect(() => {
108 (window as any).customStopRef = customStopRef;
109 }, []);
1- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!
2- [x] Get React Router working on the client & move off localstorage for storing page state
3- [ ] When it hits the max number of steps, detect that and give the user a button (or instructions on how) to get it to continue (neverstew mentioned this)
4- [x] Make it look good
46
47OpenTownie is built with:
48- React frontend with TypeScript
49- React Router
50- Hono API server backend
51- Web Audio API for sound notifications
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
4import { RefreshIcon } from "./icons.tsx";
5
39 }, [messages, running, currentEndpoint, customPath]);
40
41 const handleEndpointChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
42 setSelectedEndpointIndex(Number(e.target.value));
43 };
44
45 const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
46 setCustomPath(e.target.value);
47 };
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3
4const formatTime = (ms: number): string => {
