\n Error: {JSON.stringify(project.error, null, 2)}\n

\n );\n }\n\n\n if (!project.data) return null;\n\n return (\n \n \n \n );\n}\n\nfunction Conversation ({\n project,\n files,\n branchId,\n refetch,\n}: {\n project: any;\n files: any[];\n branchId: string;\n refetch: () => void;\n}) {\n const [images, setImages] = useState<(string|null)[]>([]);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const { audio, user } = useContext(AppContext);\n const { balance, loading: balanceLoading, refetch: refetchBalance } = useCreditBalance();\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit,\n handleStop,\n running,\n usages,\n messageEndTimes,\n overLimit,\n } = useChatLogic({\n project,\n branchId,\n selectedFiles,\n images,\n soundEnabled: audio,\n });\n\n useLoadingFavicon(running);\n\n // Track when requests end and refetch balance\n const prevRunning = useRef(running);\n useEffect(() => {\n // If running changed from true to false, request just ended\n if (prevRunning.current === true && running === false) {\n refetchBalance();\n }\n prevRunning.current = running;\n }, [running, refetchBalance]);\n\n // Auto-poll balance every 4 seconds when credits are insufficient\n useEffect(() => {\n const hasInsufficientCredits = !balanceLoading && balance !== null && balance <= 0;\n \n if (hasInsufficientCredits) {\n const intervalId = setInterval(() => {\n refetchBalance();\n }, 4000); // 4 seconds\n \n return () => clearInterval(intervalId);\n }\n }, [balanceLoading, balance, refetchBalance]);\n\n useEffect(() => {\n if (!messages?.length) return;\n let last = messages.at(-1);\n if (shouldRefetch(last)) {\n refetch();\n }\n }, [messages]);\n useUsageStats(messages, usages);\n\n if (!project) {\n return (\n

\n Error loading project\n

\n );\n }\n\n const hasInsufficientCredits = !balanceLoading && balance !== null && balance <= 0;\n\n return (\n \n

\n \n {project.imageUrl ? (\n

\n ) : user?.profileImageUrl ? (\n \n ) : (\n

\n )}\n

{project.name}

\n \n

\n\n \n {error && !overLimit && (\n

{error.stack}

\n )}\n\n

\n {hasInsufficientCredits ? (\n

\n \n Townie has moved to usage-based pricing. {\" \"}\n Learn more & purchase credits.\n \n

\n {\n refetchBalance();\n }}\n className=\"icon-button\"\n title=\"Refresh credit balance\"\n >\n \n \n

\n ) : (\n {\n handleSubmit(e);\n setImages([]);\n }}\n onCancel={handleStop}\n running={running}\n error={error}\n images={images}\n setImages={setImages}\n />\n )}\n

\n \n );\n}\n\nfunction shouldRefetch (message) {\n for (let i = 0; i < message?.parts?.length; i++) {\n let part = message.parts[i];\n if (part.type === \"tool-invocation\") {\n switch (part.toolInvocation?.toolName) {\n case \"str_replace_editor\":\n if (part.toolInvocation?.args?.command === \"create\") {\n return true;\n }\n break;\n case \"delete_file\":\n case \"change_val_type\":\n return true;\n }\n }\n }\n return false;\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/boots/Townie/code/frontend/components/ChatRouteSingleColumn.tsx","extension","actionData","errors"]