update user flow and prompts

Author: hsy822

apps/quick-dapp/src/actions/index.ts

@@ -250,11 +250,13 @@ export const emptyInstance = async () => {
       address: '',
       network: '',
       htmlTemplate: '',
+      pages: {},
       abi: {},
       items: {},
       containers: [],
       title: '',
       details: '',
+      logo: null,
       theme: 'Dark',
       userInput: { methods: {} },
       natSpec: { checked: false, methods: {} },

apps/quick-dapp/src/components/DeployPanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, useRef } from 'react';
 import { Form, Button, Alert, Card, Row, Col, Collapse } from 'react-bootstrap';
 import { ethers, namehash } from 'ethers';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -46,6 +46,15 @@ function DeployPanel(): JSX.Element {
   const [isPublishOpen, setIsPublishOpen] = useState(true);
   const [isEnsOpen, setIsEnsOpen] = useState(true);
 
+  const logoInputRef = useRef<HTMLInputElement>(null);
+
+  const handleRemoveLogo = () => {
+    dispatch({ type: 'SET_INSTANCE', payload: { logo: null } });
+    if (logoInputRef.current) {
+      logoInputRef.current.value = '';
+    }
+  };
+
   const handleImageChange = (e) => {
     if (e.target.files && e.target.files[0]) {
       const reader: any = new FileReader()
@@ -370,7 +379,18 @@ function DeployPanel(): JSX.Element {
           <Card.Body id="dapp-details-collapse">
             <Form.Group className="mb-3" controlId="formDappLogo">
               <Form.Label className="text-uppercase mb-0">Dapp logo</Form.Label>
+              {logo && logo.byteLength > 0 && (
+                <span 
+                  onClick={handleRemoveLogo} 
+                  style={{ cursor: 'pointer', fontSize: '0.8rem' }} 
+                  className="ms-1"
+                  title="Remove logo"
+                >
+                  <i className="fas fa-trash me-1"></i>
+                </span>
+              )}
               <Form.Control
+                ref={logoInputRef}
                 type="file"
                 accept="image/*"
                 onChange={handleImageChange}

apps/quick-dapp/src/components/EditHtmlTemplate/index.tsx

@@ -43,6 +43,7 @@ function EditHtmlTemplate(): JSX.Element {
   const [showIframe, setShowIframe] = useState(true);
   const [isBuilderReady, setIsBuilderReady] = useState(false);
   const [isBuilding, setIsBuilding] = useState(false);
+  const [isAiUpdating, setIsAiUpdating] = useState(false);
 
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const builderRef = useRef<InBrowserVite | null>(null);
@@ -188,6 +189,8 @@ function EditHtmlTemplate(): JSX.Element {
   }
 
   const handleChatMessage = async (message: string) => {
+    setIsAiUpdating(true);
+
     try {
     const currentFiles = new Map<string, string>();
     await readDappFiles('dapp', currentFiles);
@@ -243,12 +246,13 @@ function EditHtmlTemplate(): JSX.Element {
     }
 
     await Promise.all(writePromises);
-    runBuild();
 
     } catch (error) {
       const errorMsg = (error instanceof Error) ? error.message : String(error);
       console.error('[DEBUG-LOG E] (ERROR) handleChatMessage:', errorMsg);
       setIframeError('Failed to update DApp via AI: ' + errorMsg);
+    } finally {
+      setIsAiUpdating(false);
     }
   };
 
@@ -289,6 +293,14 @@ function EditHtmlTemplate(): JSX.Element {
     }
   }, [isBuilderReady, htmlTemplate]);
 
+  useEffect(() => {
+    if (isBuilderReady && !isAiUpdating && htmlTemplate) {
+      setTimeout(() => {
+        runBuild();
+      }, 0);
+    }
+  }, [isBuilderReady, isAiUpdating, htmlTemplate]);
+
   return (
     <Row className="m-0 h-100">
       <Col xs={12} lg={8} className="pe-3 d-flex flex-column h-100">
@@ -315,7 +327,14 @@ function EditHtmlTemplate(): JSX.Element {
             </div>
             <Card className="border flex-grow-1 d-flex">
               <Card.Body className="p-0 d-flex flex-column">
-                {showIframe ? (
+                {isAiUpdating ? (
+                  <div className="d-flex flex-column align-items-center justify-content-center h-100 text-center p-4" style={{ minHeight: '400px' }}>
+                    <i className="fas fa-spinner fa-spin fa-2x mb-3 text-primary"></i>
+                    <h6 className="text-muted">
+                      Your dapp is being created by RemixAI Assistant.
+                    </h6>
+                  </div>
+                ) : showIframe ? (
                   <iframe
                     ref={iframeRef}
                     style={{

apps/quick-dapp/src/reducers/state.ts

@@ -11,6 +11,7 @@ export const appInitialState: any = {
     theme: 'Dark',
     userInput: { methods: {} },
     natSpec: { checked: false, methods: {} },
+    logo: null,
   },
 };
 

apps/quick-dapp/src/remix-client.ts

@@ -1,14 +1,15 @@
 import { PluginClient } from '@remixproject/plugin';
 import { createClient } from '@remixproject/plugin-webview';
-import { initInstance } from './actions';
+import { initInstance, emptyInstance } from './actions';
 
 class RemixClient extends PluginClient {
   constructor() {
     super();
+    this.methods = ['edit', 'clearInstance'];
     createClient(this);
   }
 
-  edit({ address, abi, network, name, devdoc, methodIdentifiers, solcVersion, htmlTemplate }: any): void {
+  edit({ address, abi, network, name, devdoc, methodIdentifiers, solcVersion, htmlTemplate, pages }: any): void {
     initInstance({
       address,
       abi,
@@ -17,9 +18,14 @@ class RemixClient extends PluginClient {
       devdoc,
       methodIdentifiers,
       solcVersion,
-      htmlTemplate
+      htmlTemplate,
+      pages
     });
   }
+
+  clearInstance(): void {
+    emptyInstance();
+  }
 }
 
 export default new RemixClient();

apps/remix-ide/src/app/plugins/prompt.ts

@@ -23,6 +23,7 @@ You MUST generate separate files for HTML, CSS, and JavaScript (JSX).
 You MUST use React with JSX syntax (not "text/babel" scripts).
 You MUST use ethers.js (v6) for all blockchain interactions.
 The user's contract address, ABI, and network info will be provided in the main prompt.
+**Design Requirement:** You MUST intelligently place the 'logo', 'title', and 'details' from \`window.__QUICK_DAPP_CONFIG__\` into the UI (e.g., placing the logo/title in a Navbar and details in a Hero section), do not just dump them at the top.
 
 Return EACH file using the specified "TITLE_PAGE_START" format.
 The file structure MUST be:
@@ -94,20 +95,23 @@ const App = () => {
   const dappTitle = config.title || "My DApp";
   const dappDetails = config.details || "My DApp Description";
 
-  // AI-generated React logic will go here
+  // AI-generated React logic will go here. 
+  // IMPORTANT: Use the variables above in a nice layout (Navbar, Hero, etc).
   return (
-    <div>
-      {logoDataUrl && (
-        <img 
-          src={logoDataUrl} 
-          alt="DApp Logo" 
-          style={{ maxHeight: '80px', margin: '1rem auto' }} 
-        />
-      )}
-      <h1>{dappTitle}</h1>
-      <p>{dappDetails}</p>
-
-      {/* AI-generated UI will go here */}
+    <div className="min-h-screen bg-gray-50">
+      {/* Dynamic Navbar Example */}
+      <nav className="bg-white shadow p-4 flex items-center justify-between">
+        <div className="flex items-center">
+           {logoDataUrl && <img src={logoDataUrl} alt="Logo" className="h-8 w-auto mr-3" />}
+           <h1 className="text-xl font-bold">{dappTitle}</h1>
+        </div>
+      </nav>
+
+      <main className="container mx-auto p-6">
+        <p className="text-gray-600 mb-8">{dappDetails}</p>
+
+        {/* AI-generated UI interaction logic will go here */}
+      </main>
     </div>
   );
 };
@@ -123,6 +127,7 @@ You MUST generate separate files for HTML, CSS, and JavaScript (JSX).
 You MUST use React with JSX syntax (not "text/babel" scripts).
 You MUST use ethers.js (v6) for all blockchain interactions.
 The user's contract address, ABI, and network info will be provided in the main prompt.
+**Design Requirement:** You MUST intelligently place the 'logo', 'title', and 'details' from \`window.__QUICK_DAPP_CONFIG__\` into the UI (e.g., placing the logo/title in a Navbar and details in a Hero section), do not just dump them at the top.
 
 Return EACH file using the specified "TITLE_PAGE_START" format.
 The file structure MUST be:
@@ -194,20 +199,23 @@ const App = () => {
   const dappTitle = config.title || "My DApp";
   const dappDetails = config.details || "My DApp Description";
   
-  // AI-generated React logic will go here
+  // AI-generated React logic will go here.
+  // IMPORTANT: Use the variables above in a nice layout (Navbar, Hero, etc).
   return (
-    <div>
-      {logoDataUrl && (
-        <img 
-          src={logoDataUrl} 
-          alt="DApp Logo" 
-          style={{ maxHeight: '80px', margin: '1rem auto' }} 
-        />
-      )}
-      <h1>{dappTitle}</h1>
-      <p>{dappDetails}</p>
-
-      {/* AI-generated UI will go here */}
+    <div className="min-h-screen bg-gray-50">
+      {/* Dynamic Navbar Example */}
+      <nav className="bg-white shadow p-4 flex items-center justify-between">
+        <div className="flex items-center">
+           {logoDataUrl && <img src={logoDataUrl} alt="Logo" className="h-8 w-auto mr-3" />}
+           <h1 className="text-xl font-bold">{dappTitle}</h1>
+        </div>
+      </nav>
+
+      <main className="container mx-auto p-6">
+        <p className="text-gray-600 mb-8">{dappDetails}</p>
+
+        {/* AI-generated UI interaction logic will go here */}
+      </main>
     </div>
   );
 };

libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

@@ -316,13 +316,13 @@ export function UniversalDappUI(props: UdappProps) {
                               <div className="mb-2">
                                 <span>Please describe how you would want the design to look like.</span>
                               </div>
-                              <div>A new tab with the new website when the generation is done. This might take up to 2 minutes.</div>
-                              <button className="btn btn-secondary btn-sm ms-2" onClick={async () => {
+                              <div>This might take up to 2 minutes.</div>
+                              {/* <button className="btn btn-secondary btn-sm ms-2" onClick={async () => {
                                 await props.plugin.call('ai-dapp-generator', 'resetDapp', address)
                                 const lastGenerated = await props.plugin.call('ai-dapp-generator', 'getLastGeneratedDapp', address)
                                 props.editInstance(address, props.instance.abi, props.instance.name, data.artefact.devdoc, data.artefact.metadata, lastGenerated)
                                 props.plugin.call('manager', 'deactivatePlugin', 'iframeContent')
-                              }}>Reset Dapp</button>
+                              }}>Reset Dapp</button> */}
                             </ul>
                         )
                         const modalContent = {
@@ -341,6 +341,13 @@ export function UniversalDappUI(props: UdappProps) {
                         props.plugin.call('notification', 'modal', modalContent)
                       })
 
+                      await props.plugin.call('ai-dapp-generator', 'resetDapp', address)
+                      try {
+                        await props.plugin.call('quick-dapp', 'clearInstance')
+                      } catch (e) {
+                        console.warn('Quick Dapp clean up failed (plugin might not be loaded yet):', e)
+                      }
+
                       // Use the AI DApp Generator plugin
                       await generateAIDappWithPlugin(description, address, data, props)
                       } catch (error) {