1// @jsxImportSource https://esm.sh/react@18.2.0
2import { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0";
3
4interface MarkdownOutputProps {
1// @jsxImportSource https://esm.sh/react@18.2.0
2import { useState } from "https://esm.sh/react@18.2.0";
3
4interface CrawlFormProps {
11 const [depth, setDepth] = useState(3);
12
13 const handleSubmit = (e: React.FormEvent) => {
14 e.preventDefault();
15 if (!url) return;
1// @jsxImportSource https://esm.sh/react@18.2.0
2import { useState } from "https://esm.sh/react@18.2.0";
3import { CrawlForm } from "./CrawlForm";
4import { MarkdownOutput } from "./MarkdownOutput";
19- `frontend/` - Client-side code
20 - `index.html` - Main HTML template
21 - `index.tsx` - Frontend React code
22 - `components/` - React components
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, { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
4import { Chat } from "./Chat.tsx";
5import { Login } from "./Login.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0?dev";
3
4interface SvgEditorProps {
51
52 // Handle SVG code editing
53 const handleCodeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
54 const newContent = e.target.value;
55 setSvgContent(newContent);
60
61 // Handle SVG file upload
62 const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
63 const file = e.target.files?.[0];
64 if (!file) return;
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useChat } from "https://esm.sh/@ai-sdk/react?dev&deps=react@18.2.0&react-dom@18.2.0";
3import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
4import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0?dev";
5import { playBellSound } from "../utils/soundEffects.ts";
6import { ImageUpload, PROMPT_IMAGE_LIMIT } from "./ImageUpload.tsx";
100 });
101
102 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
103 e.preventDefault();
104 const validImages = images.filter((img): img is string => typeof img === "string");
113
114 // Keep track of the most recent assistant message that's still streaming
115 const pendingMessageId = React.useMemo(() => {
116 if (!running) return null;
117 // Find the most recent assistant message that doesn't have an end time
122
123 // Custom stop handler that also handles UI elements (timer and spinner)
124 const handleStop = React.useCallback(() => {
125 // Call the original stop function
126 stop();
143
144 // Update the custom stop function ref when the dependencies change
145 React.useEffect(() => {
146 customStopRef.current = handleStop;
147 }, [handleStop]);
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3
4// Component for the loading spinner
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, { useState } from "https://esm.sh/react@18.2.0?dev";
4import { Chat } from "./Chat.tsx";
5import { Login } from "./Login.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, { useState } from "https://esm.sh/react@18.2.0?dev";
4import { Chat } from "./Chat.tsx";
5import { Login } from "./Login.tsx";