Automatically refresh app iframe

src/components/chat/ChatInput.tsx

@@ -50,6 +50,8 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   const [messages, setMessages] = useAtom<Message[]>(chatMessagesAtom);
   const setIsPreviewOpen = useSetAtom(isPreviewOpenAtom);
 
+  const { refreshAppIframe } = useRunApp();
+
   // Use the hook to fetch the proposal
   const {
     proposalResult,
@@ -140,6 +142,9 @@ export function ChatInput({ chatId }: { chatId?: number }) {
     } finally {
       setIsApproving(false);
       setIsPreviewOpen(true);
+      refreshAppIframe();
+
+      // Keep same as handleReject
       refreshProposal();
       fetchChatMessages();
     }
@@ -169,6 +174,8 @@ export function ChatInput({ chatId }: { chatId?: number }) {
       setError((err as Error)?.message || "An error occurred while rejecting");
     } finally {
       setIsRejecting(false);
+
+      // Keep same as handleApprove
       refreshProposal();
       fetchChatMessages();
     }

src/components/preview_panel/PreviewIframe.tsx

@@ -55,8 +55,8 @@ const ErrorBanner = ({ error, onDismiss, onAIFix }: ErrorBannerProps) => {
             <Lightbulb size={16} className=" text-red-800 dark:text-red-300" />
           </div>
           <span className="text-sm text-red-700 dark:text-red-200">
-            <span className="font-medium">Tip: </span>Check if refreshing the
+            <span className="font-medium">Tip: </span>Check if restarting the
-            page or restarting the app fixes the error.
+            app fixes the error.
           </span>
         </div>
       </div>

src/hooks/useRunApp.ts

@@ -106,5 +106,10 @@ export function useRunApp() {
     }
   }, []);
 
-  return { loading, error, runApp, stopApp, restartApp, app };
+  const refreshAppIframe = useCallback(async () => {
+    setPreviewPanelKey((prevKey) => prevKey + 1);
+    setError(null);
+  }, [setPreviewPanelKey, setError]);
+
+  return { loading, error, runApp, stopApp, restartApp, app, refreshAppIframe };
 }

src/hooks/useStreamChat.ts

@@ -17,6 +17,7 @@ import { useLoadVersions } from "./useLoadVersions";
 import { showError } from "@/lib/toast";
 import { useProposal } from "./useProposal";
 import { useSearch } from "@tanstack/react-router";
+import { useRunApp } from "./useRunApp";
 
 export function getRandomString() {
   return Math.random().toString(36).substring(2, 15);
@@ -34,6 +35,7 @@ export function useStreamChat({
   const { refreshApp } = useLoadApp(selectedAppId);
   const setStreamCount = useSetAtom(chatStreamCountAtom);
   const { refreshVersions } = useLoadVersions(selectedAppId);
+  const { refreshAppIframe } = useRunApp();
   let chatId: number | undefined;
 
   if (hasChatId) {
@@ -100,6 +102,7 @@ export function useStreamChat({
           onEnd: (response: ChatResponseEnd) => {
             if (response.updatedFiles) {
               setIsPreviewOpen(true);
+              refreshAppIframe();
             }
             refreshProposal(chatId);