fix: Automatically added the prompt after the app is initialised with recipe instructions (#2631)

Co-authored-by: Michael Neale <michael.neale@gmail.com>

ui/desktop/src/App.tsx

@@ -87,6 +87,7 @@ const getInitialView = (): ViewConfig => {
 export default function App() {
   const [fatalError, setFatalError] = useState<string | null>(null);
   const [modalVisible, setModalVisible] = useState(false);
+  const [appInitialized, setAppInitialized] = useState(false);
   const [pendingLink, setPendingLink] = useState<string | null>(null);
   const [modalMessage, setModalMessage] = useState<string>('');
   const [extensionConfirmLabel, setExtensionConfirmLabel] = useState<string>('');
@@ -205,10 +206,15 @@ export default function App() {
       toastService.configure({ silent: false });
     };
 
-    initializeApp().catch((error) => {
-      console.error('Unhandled error in initialization:', error);
-      setFatalError(`${error instanceof Error ? error.message : 'Unknown error'}`);
-    });
+    (async () => {
+      try {
+        await initializeApp();
+        setAppInitialized(true);
+      } catch (error) {
+        console.error('Unhandled error in initialization:', error);
+        setFatalError(`${error instanceof Error ? error.message : 'Unknown error'}`);
+      }
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // Empty dependency array since we only want this to run once
 
@@ -552,6 +558,7 @@ export default function App() {
           )}
           {view === 'chat' && !isLoadingSession && (
             <ChatView
+              readyForAutoUserPrompt={appInitialized}
               chat={chat}
               setChat={setChat}
               setView={setView}

ui/desktop/src/components/ChatView.tsx

@@ -55,11 +55,13 @@ const isUserMessage = (message: Message): boolean => {
 };
 
 export default function ChatView({
+  readyForAutoUserPrompt,
   chat,
   setChat,
   setView,
   setIsGoosehintsModalOpen,
 }: {
+  readyForAutoUserPrompt: boolean;
   chat: ChatType;
   setChat: (chat: ChatType) => void;
   setView: (view: View, viewOptions?: ViewOptions) => void;
@@ -68,6 +70,7 @@ export default function ChatView({
   return (
     <ChatContextManagerProvider>
       <ChatContent
+        readyForAutoUserPrompt={readyForAutoUserPrompt}
         chat={chat}
         setChat={setChat}
         setView={setView}
@@ -78,11 +81,13 @@ export default function ChatView({
 }
 
 function ChatContent({
+  readyForAutoUserPrompt,
   chat,
   setChat,
   setView,
   setIsGoosehintsModalOpen,
 }: {
+  readyForAutoUserPrompt: boolean;
   chat: ChatType;
   setChat: (chat: ChatType) => void;
   setView: (view: View, viewOptions?: ViewOptions) => void;
@@ -281,11 +286,11 @@ function ChatContent({
 
   useEffect(() => {
     const prompt = recipeConfig?.prompt;
-    if (prompt && !hasSentPromptRef.current) {
+    if (prompt && !hasSentPromptRef.current && readyForAutoUserPrompt) {
       append(prompt);
       hasSentPromptRef.current = true;
     }
-  }, [recipeConfig?.prompt, append]);
+  }, [recipeConfig?.prompt, append, readyForAutoUserPrompt]);
 
   // Handle submit
   const handleSubmit = (e: React.FormEvent) => {

ui/desktop/src/utils/providerUtils.ts

@@ -140,7 +140,6 @@ export const initializeSystem = async (
     // Get recipeConfig directly here
     const recipeConfig = window.appConfig?.get?.('recipeConfig');
     const botPrompt = recipeConfig?.instructions;
-
     // Extend the system prompt with desktop-specific information
     const response = await fetch(getApiUrl('/agent/prompt'), {
       method: 'POST',
@@ -154,7 +153,6 @@ export const initializeSystem = async (
           : desktopPrompt,
       }),
     });
-
     if (!response.ok) {
       console.warn(`Failed to extend system prompt: ${response.statusText}`);
     } else {