put waiting too long message back in chat

frontend/app/chat/page.tsx

@@ -72,6 +72,7 @@ function ChatPage() {
 		y: number;
 	} | null>(null);
 	const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+	const [waitingTooLong, setWaitingTooLong] = useState(false);
 
 	const chatInputRef = useRef<ChatInputHandle>(null);
 
@@ -100,12 +101,13 @@ function ChatPage() {
 		streamingMessage,
 		sendMessage: sendStreamingMessage,
 		abortStream,
+		isLoading: isStreamLoading,
 	} = useChatStreaming({
 		endpoint: apiEndpoint,
 		onComplete: (message, responseId) => {
 			setMessages((prev) => [...prev, message]);
 			setLoading(false);
-
+			setWaitingTooLong(false);
 			if (responseId) {
 				cancelNudges();
 				setPreviousResponseIds((prev) => ({
@@ -124,6 +126,7 @@ function ChatPage() {
 		onError: (error) => {
 			console.error("Streaming error:", error);
 			setLoading(false);
+			setWaitingTooLong(false);
 			const errorMessage: Message = {
 				role: "assistant",
 				content:
@@ -134,6 +137,23 @@ function ChatPage() {
 		},
 	});
 
+	// Show warning if waiting too long (20 seconds)
+	useEffect(() => {
+		let timeoutId: NodeJS.Timeout | null = null;
+
+		if (isStreamLoading && !streamingMessage) {
+			timeoutId = setTimeout(() => {
+				setWaitingTooLong(true);
+			}, 20000); // 20 seconds
+		} else {
+			setWaitingTooLong(false);
+		}
+
+		return () => {
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	}, [isStreamLoading, streamingMessage]);
+
 	const getCursorPosition = (textarea: HTMLTextAreaElement) => {
 		// Create a hidden div with the same styles as the textarea
 		const div = document.createElement("div");
@@ -1323,6 +1343,20 @@ function ChatPage() {
 									isCompleted={false}
 								/>
 							)}
+
+							{/* Waiting too long indicator */}
+							{waitingTooLong && !streamingMessage && loading && (
+								<div className="pl-10 space-y-2">
+									<div className="flex items-center gap-2 text-sm text-muted-foreground">
+										<Loader2 className="h-4 w-4 animate-spin" />
+										<span>The server is taking longer than expected...</span>
+									</div>
+									<p className="text-xs text-muted-foreground">
+										This may be due to high server load. The request will
+										timeout after 60 seconds.
+									</p>
+								</div>
+							)}
 						</>
 					)}
 					{!streamingMessage && (