\n setShowComparison(!showComparison)}\n title=\"Powered by 100% renewable energy. Click for comparison.\"\n >\n \n \n {formatEmissions(emissionsUg)} · {formatEnergy(energyWms)} · {formatTime(timeMs)}\n \n \n {showComparison && (\n

\n GreenPT (renewable)\n {formatEmissions(emissionsUg)}\n

\n Conventional estimate\n ~{formatEmissions(conventional)}\n

\n {Math.round(((conventional - emissionsUg) / conventional) * 100)}% less CO{\"\\u2082\"} with GreenPT\n

\n \n Read more about our calculations\n \n

\n )}\n

\n );\n}\n\nfunction SessionFooter({ session }: { session: SessionImpact }) {\n if (session.messageCount === 0) return null;\n\n return (\n

\n \n \n Session: {session.messageCount} {session.messageCount === 1 ? \"message\" : \"messages\"} · {formatEmissions(session.totalEmissionsUg)} · {formatEnergy(session.totalEnergyWms)} total\n \n \n — {getRelatableEquivalent(session.totalEmissionsUg)}\n \n

\n );\n}\n\nfunction CarbonReceipt({ session }: { session: SessionImpact }) {\n const [expanded, setExpanded] = useState(false);\n\n if (session.messageCount === 0) return null;\n\n return (\n

\n {expanded && (\n

Carbon Receipt

\n Messages\n {session.messageCount}\n

\n Total CO{\"\\u2082\"}\n {formatEmissions(session.totalEmissionsUg)}\n

\n Total energy\n {formatEnergy(session.totalEnergyWms)}\n

\n Total inference time\n {formatTime(session.totalTimeMs)}\n

\n Conventional estimate\n ~{formatEmissions(getConventionalEstimate(session.totalEmissionsUg))}\n

\n {getRelatableEquivalent(session.totalEmissionsUg)}\n

\n My AI conversation used only {formatEmissions(session.totalEmissionsUg)} — powered by GreenPT\n

\n \n Read more about our calculations\n \n

\n )}\n setExpanded(!expanded)}\n >\n {expanded ? \"Hide\" : \"View\"} impact summary\n \n

\n );\n}\n\nfunction InfrastructureBadge({ globalStats }: { globalStats: GlobalStats | null }) {\n return (\n

\n \n Hosted on 100% renewable energy · Scaleway, Paris · EU data residency\n

\n {globalStats && globalStats.totalMessages > 0 && (\n

\n \n {globalStats.totalMessages} {globalStats.totalMessages === 1 ? \"message\" : \"messages\"} served · {formatEmissions(globalStats.totalEmissionsUg)} CO{\"\\u2082\"} total\n \n

\n )}\n

\n );\n}\n\nexport function App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [sessionId, setSessionId] = useState(null);\n const [errorMessage, setErrorMessage] = useState(null);\n const [sessionImpact, setSessionImpact] = useState({\n totalEmissionsUg: 0,\n totalEnergyWms: 0,\n totalTimeMs: 0,\n messageCount: 0,\n });\n const [globalStats, setGlobalStats] = useState(null);\n const messagesContainerRef = useRef(null);\n const hasStartedChat = messages.length > 0;\n\n const canSend = useMemo(\n () => input.trim().length > 0 && !isLoading,\n [input, isLoading],\n );\n\n useEffect(() => {\n if (messagesContainerRef.current) {\n messagesContainerRef.current.scrollTop =\n messagesContainerRef.current.scrollHeight;\n }\n }, [messages, isLoading]);\n\n useEffect(() => {\n fetch(\"/api/stats\")\n .then((res) => res.json())\n .then((data: GlobalStats) => setGlobalStats(data))\n .catch(() => {});\n }, []);\n\n async function sendMessage(nextMessage: string) {\n const trimmedInput = nextMessage.trim();\n if (!trimmedInput || isLoading) {\n return;\n }\n\n const nextMessages: ChatMessage[] = [\n ...messages,\n { role: \"user\", content: trimmedInput },\n ];\n setMessages(nextMessages);\n setInput(\"\");\n setIsLoading(true);\n setErrorMessage(null);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n },\n body: JSON.stringify({\n sessionId,\n messages: nextMessages.map(({ role, content }) => ({ role, content })),\n }),\n });\n\n if (!response.ok) {\n const errorBody = (await response.json()) as { error?: string };\n throw new Error(errorBody.error ?? \"Failed to send chat message\");\n }\n\n setMessages([...nextMessages, { role: \"assistant\", content: \"\" }]);\n\n const reader = response.body!.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const { parsed, remaining } = parseSSEBuffer(buffer);\n buffer = remaining;\n\n for (const event of parsed) {\n if (event.type === \"chunk\") {\n const data = JSON.parse(event.data) as ChatChunkEvent;\n setMessages([\n ...nextMessages,\n { role: \"assistant\", content: data.assistantMessage },\n ]);\n } else if (event.type === \"done\") {\n const data = JSON.parse(event.data) as ChatDoneEvent;\n setSessionId(data.sessionId);\n\n // Build messages with impact on the last assistant message\n const updatedMessages: ChatMessage[] = data.messages.map(\n (msg, i) => {\n if (\n data.impact &&\n msg.role === \"assistant\" &&\n i === data.messages.length - 1\n ) {\n return { ...msg, impact: data.impact };\n }\n return msg;\n },\n );\n\n // Preserve impact from prior messages\n const finalMessages = updatedMessages.map((msg, i) => {\n const prev = nextMessages[i];\n if (prev?.impact && !msg.impact) {\n return { ...msg, impact: prev.impact };\n }\n return msg;\n });\n\n setMessages(finalMessages);\n\n // Update session totals\n if (data.impact) {\n const emUg = data.impact!.emissions?.total ?? 0;\n const enWms = data.impact!.energy?.total ?? 0;\n const tMs = data.impact!.inferenceTime?.total ?? 0;\n\n setSessionImpact((prev) => ({\n totalEmissionsUg: prev.totalEmissionsUg + emUg,\n totalEnergyWms: prev.totalEnergyWms + enWms,\n totalTimeMs: prev.totalTimeMs + tMs,\n messageCount: prev.messageCount + 1,\n }));\n\n setGlobalStats((prev) => prev ? {\n totalMessages: prev.totalMessages + 1,\n totalEmissionsUg: prev.totalEmissionsUg + emUg,\n totalEnergyWms: prev.totalEnergyWms + enWms,\n totalTimeMs: prev.totalTimeMs + tMs,\n } : {\n totalMessages: 1,\n totalEmissionsUg: emUg,\n totalEnergyWms: enWms,\n totalTimeMs: tMs,\n });\n }\n } else if (event.type === \"error\") {\n const data = JSON.parse(event.data) as ChatErrorEvent;\n throw new Error(data.error);\n }\n }\n }\n } catch (error) {\n const message =\n error instanceof Error ? error.message : \"Failed to send chat message\";\n setErrorMessage(message);\n } finally {\n setIsLoading(false);\n }\n }\n\n function onSubmit(event: FormEvent) {\n event.preventDefault();\n sendMessage(input);\n }\n\n function onKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" && !event.shiftKey && canSend) {\n event.preventDefault();\n sendMessage(input);\n }\n }\n\n return (\n

\n \n \n {!hasStartedChat && (\n

\n \n

Ask your local AI

\n Start a conversation with our eco-friendly AI assistant.\n
\n Ask questions, get help, or just chat!\n

\n\n

\n \n Try Asking\n

\n\n

\n {STARTER_PROMPTS.map((prompt) => (\n sendMessage(prompt)}\n disabled={isLoading}\n >\n {prompt}\n \n ))}\n

\n )}\n\n {messages.map((message, index) => {\n const isStreamingMsg =\n isLoading &&\n message.role === \"assistant\" &&\n index === messages.length - 1;\n\n return (\n \n

\n {message.role === \"assistant\" ? \"AI Assistant\" : \"You\"}\n

\n \n \n {message.content}\n \n

\n {message.role === \"assistant\" && message.impact && (\n \n )}\n \n );\n })}\n\n {isLoading && (\n

Assistant is typing...

\n )}\n {errorMessage &&

{errorMessage}

}\n \n\n {hasStartedChat && (\n

\n \n \n

\n )}\n\n \n \n );\n}\n","deleted","label",[176,177,158],"frontend","components","permalink","https://www.val.town/x/greenpt/office-window/code/frontend/components/App.tsx","extension","actionData","errors"]