183- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
184- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
185- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
186- Ensure all React dependencies and sub-dependencies are pinned to the same version
187- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
188
269 - Always run table creation before querying
270
2713. **React Configuration:**
272 - All React dependencies must be pinned to 18.2.0
273 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
274 - Rendering issues often come from mismatched React versions
275
2764. **File Handling:**
46
47OpenTownie is built with:
48- React frontend with TypeScript
49- Hono API server backend
50- Tailwind CSS for styling
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { CreateProjectModal } from "./CreateProject.tsx";
4// Component for the loading spinner
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React from "https://esm.sh/react@18.2.0?dev";
3import { DirectoryTree } from "./DirectoryTree.tsx";
4import { LoadingSpinner } from "./LoadingSpinner.tsx";
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";
4
5interface PreviewProps {
49
50 // Handle endpoint selection change
51 const handleEndpointChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
52 setSelectedEndpointIndex(Number(e.target.value));
53 };
54
55 // Handle path input change
56 const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
57 setCustomPath(e.target.value);
58 };
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3
4// Utility to format milliseconds into a readable time string
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
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
48 // Use the triple backtick syntax for code blocks
49 const codeBlock = "```" + language + "\n" + content + "\n```";
50 return <ReactMarkdown>{codeBlock}</ReactMarkdown>;
51};
52
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")
91 return (
95 </summary>
96 <div>
97 <ReactMarkdown>{part.reasoning}</ReactMarkdown>
98 {part.details && part.details.map((detail, index) => (
99 <div key={index} className="mt-2">
100 <ReactMarkdown>{detail.text}</ReactMarkdown>
101 </div>
102 ))}
147 return (
148 <div className="think-content text-lg">
149 <ReactMarkdown>{args.thought}</ReactMarkdown>
150 </div>
151 );
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React from "https://esm.sh/react@18.2.0?dev";
3import { MessagePart } from "./MessagePart.tsx";
4import { MessageTimer } from "./MessageTimer.tsx";
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";
3
4export function Login() {
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React from "https://esm.sh/react@18.2.0?dev";
3
4export const LoadingSpinner = () => (
