\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}\n\n// ==============================================================================\n// SECTION 4: REACT COMPONENTS\n// ==============================================================================\n\nfunction Settings({ isOpen, onClose }) {\n if (!isOpen) return null;\n\n return (\n

Settings

Current model: gemini-2.0-flash-exp

\n Warning: Gemini 2.0 Flash is an experimental preview. Some features may not be available, and it may not be\n suitable for production use.\n

\n \n

\n );\n}\n\nfunction formatMessage(content) {\n const codeBlockRegex = /```(\\w+)?\\n([\\s\\S]*?)```/g;\n const parts = [];\n let lastIndex = 0;\n let match;\n\n while ((match = codeBlockRegex.exec(content)) !== null) {\n // Add text before the code block\n if (match.index > lastIndex) {\n parts.push(content.slice(lastIndex, match.index));\n }\n\n // Add the code block with syntax highlighting\n const language = match[1] || \"javascript\";\n parts.push(\n \n {match[2].trim()}\n ,\n );\n\n lastIndex = match.index + match[0].length;\n }\n\n // Add any remaining text\n if (lastIndex < content.length) {\n parts.push(content.slice(lastIndex));\n }\n\n return parts;\n}\n\nfunction Message({ role, content, debug }) {\n return (\n

\n \n {role === \"user\" ? \"You\" : role === \"assistant\" ? \"Gemini\" : \"System\"}:\n {\" \"}\n {formatMessage(content).map((part, index) => React.isValidElement(part) ? part : {part})}\n {debug && (\n

Debug Information:

\n \n {JSON.stringify(debug, null, 2)}\n \n

\n )}\n

\n );\n}\n\nfunction App() {\n const [input, setInput] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isSettingsOpen, setIsSettingsOpen] = useState(false);\n const [loading, setLoading] = useState(false);\n const [debugMode, setDebugMode] = useState(false);\n const messageListRef = useRef(null);\n\n useEffect(() => {\n loadMessages();\n }, []);\n\n useEffect(() => {\n // Scroll to the bottom whenever messages update\n if (messageListRef.current) {\n messageListRef.current.scrollTop = messageListRef.current.scrollHeight;\n }\n }, [messages]);\n\n const loadMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch messages\");\n }\n const data = await response.json();\n setMessages(data);\n } catch (error) {\n console.error(\"Error fetching messages:\", error);\n setMessages([\n {\n role: \"system\",\n content: \"Failed to load messages. Please try refreshing the page.\",\n },\n ]);\n }\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!input.trim() || loading) return;\n\n const userMessage = { role: \"user\", content: input };\n setMessages((prev) => [...prev, userMessage]);\n setInput(\"\");\n setLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: input, debug: debugMode }),\n });\n\n if (!response.ok) {\n throw new Error(\"Failed to send chat message\");\n }\n\n const data = await response.json();\n setMessages((prev) => [\n ...prev,\n { role: data.role, content: data.content, debug: debugMode ? data.debug : null },\n ]);\n } catch (error) {\n console.error(\"Error sending chat message:\", error);\n setMessages((prev) => [\n ...prev,\n {\n role: \"system\",\n content: \"An error occurred while processing your message. Please try again.\",\n },\n ]);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Gemini Chat

\n \n\n

\n {messages.map((msg, index) => )}\n

\n\n

\n );\n}\n\n// ==============================================================================\n// SECTION 5: CLIENT-SIDE INITIALIZATION\n// ==============================================================================\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Only run the client code if we're in a browser\nif (typeof document !== \"undefined\") {\n client();\n}","deleted","label",[99],"permalink","https://www.val.town/x/arfan/geminichat/code/main.tsx","extension","actionData","errors"]