update prompt and updatedapp logic

hsy822 · hsy822 · commit 1eff1e49b9b9 · 2025-11-17T11:51:55.000+09:00
diff --git a/apps/quick-dapp/src/InBrowserVite.tsx b/apps/quick-dapp/src/InBrowserVite.tsx
@@ -210,13 +210,11 @@ export class InBrowserVite {
           }
 
           const cdnPath = `https://esm.sh/${args.path}`;
-          console.log(`[InBrowserVite] Resolved '${args.path}' to external CDN: ${cdnPath}`);
           
           return { path: cdnPath, external: true };
         });
 
         build.onLoad({ filter: /\.css$/, namespace: 'local' }, async (args: any) => {
-          console.log(`[InBrowserVite-LOG] CSS 파일 "${args.path}"를 'css-in-js'로 변환합니다.`);
           
           const pathsToTry = [
             args.path,
diff --git a/apps/quick-dapp/src/components/EditHtmlTemplate/index.tsx b/apps/quick-dapp/src/components/EditHtmlTemplate/index.tsx
@@ -153,13 +153,66 @@ function EditHtmlTemplate(): JSX.Element {
 
   const handleChatMessage = async (message: string) => {
     try {
-      await remixClient.call('ai-dapp-generator' as any, 'updateDapp', appState.instance.address, message)
+    const currentFiles = new Map<string, string>();
+    await readDappFiles('dapp', currentFiles);
 
-      runBuild(); 
+    const currentFilesObject: Pages = Object.fromEntries(currentFiles);
+    
+    const pages: Record<string, string> = await remixClient.call(
+      'ai-dapp-generator' as any,
+      'updateDapp',
+      appState.instance.address,
+      message,
+      currentFilesObject
+    );
+    
+    try {
+      await remixClient.call('fileManager', 'remove', 'dapp');
+    } catch (e) {}
+    
+    await remixClient.call('fileManager', 'mkdir', 'dapp');
+
+    const writePromises = [];
+    const createdFolders = new Set<string>(['dapp']);
+
+    for (const [rawFilename, content] of Object.entries(pages)) {
+      const safeParts = rawFilename.replace(/\\/g, '/')
+                        .split('/')
+                        .filter(part => part !== '..' && part !== '.' && part !== '');
+    
+      if (safeParts.length === 0) {
+        continue;
+      }
+      const safeFilename = safeParts.join('/');
+      const fullPath = 'dapp/' + safeFilename;
+    
+      writePromises.push(
+      (async () => {
+        if (safeParts.length > 1) {
+          const subFolders = safeParts.slice(0, -1);
+          let currentPath = 'dapp';
+          for (const folder of subFolders) {
+            currentPath = `${currentPath}/${folder}`;
+            if (!createdFolders.has(currentPath)) {
+            try {
+              await remixClient.call('fileManager', 'mkdir', currentPath);
+              createdFolders.add(currentPath);
+            } catch (e) {}
+            }
+          }
+        }
+        await remixClient.call('fileManager', 'writeFile', fullPath, content);
+      })()
+      );
+    }
+
+    await Promise.all(writePromises);
+    runBuild();
 
     } catch (error) {
-      console.error('Error updating DApp via chat:', error)
-      setIframeError('Failed to update DApp via AI: ' + error.message);
+      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);
     }
   };
 
diff --git a/apps/remix-ide/src/app/plugins/ai-dapp-generator.ts b/apps/remix-ide/src/app/plugins/ai-dapp-generator.ts
@@ -51,13 +51,12 @@ export class AIDappGenerator extends Plugin {
         { role: 'user', content: message }
       ]
 
-      const htmlContent = await this.callLLMAPI(messagesToSend) 
+      const htmlContent = await this.callLLMAPI(messagesToSend, INITIAL_SYSTEM_PROMPT)
 
       const pages = parsePages(htmlContent)
-      
       context.messages = [
         { role: 'user', content: message },
-        { role: 'assistant', content: htmlContent }
+       { role: 'assistant', content: htmlContent }
       ]
       this.saveContext(options.address, context)
 
@@ -80,21 +79,24 @@ export class AIDappGenerator extends Plugin {
   /**
    * Update an existing DApp with new description
    */
-  async updateDapp(address: string, description: string): Promise<Pages> {
-    const context = this.getOrCreateContext(address)
+  async updateDapp(address: string, description: string, currentFiles: Pages): Promise<Pages> {
+      const context = this.getOrCreateContext(address)
 
     if (context.messages.length === 0) {
       throw new Error('No existing DApp found for this address. Please generate one first.')
     }
 
-    const message = this.createUpdateMessage(description)
+    const message = this.createUpdateMessage(description, currentFiles)
     context.messages.push({ role: 'user', content: message })
 
     try {
-      const htmlContent = await this.callLLMAPI(context.messages)
+      const htmlContent = await this.callLLMAPI(context.messages, FOLLOW_UP_SYSTEM_PROMPT)
 
-      const currentPages: Pages = await this.getLastGeneratedDapp(address) || {}
-      const pages = parsePagesFollowUp(htmlContent, currentPages)
+      const pages = parsePages(htmlContent) 
+
+      if (Object.keys(pages).length === 0) {
+        throw new Error("AI failed to return valid file structure. Check logs.");
+      }
 
       context.messages.push({ role: 'assistant', content: htmlContent })
       this.saveContext(address, context)
@@ -155,11 +157,10 @@ export class AIDappGenerator extends Plugin {
     if (context) {
       for (const message of context.messages) {
         if (message.role === 'assistant') {
-          if ((message.content.indexOf(UPDATE_PAGE_START) === -1)) {
-            currentPages = parsePages(message.content)
-          } else {
-            currentPages = parsePagesFollowUp(message.content, currentPages)
-          }          
+          const newPages = parsePages(message.content)
+          if (Object.keys(newPages).length > 0) {
+            currentPages = newPages
+          }
         }
       }
     }
@@ -175,12 +176,12 @@ export class AIDappGenerator extends Plugin {
 
   private createInitialMessage(options: GenerateDappOptions): string {
     const providerCode = this.getProviderCode()
-    return INITIAL_SYSTEM_PROMPT + `. \n The website should interact the smart contract deployed at this address: ${options.address} on ${options.chainId} network. The ABI of the contract is: ${JSON.stringify(options.abi)}. Put the following code in the header to be able to connect to the blockchain:${providerCode}. Follow the design and features proposed in this description: ${options.description}`
+    return `. \n The website should interact the smart contract deployed at this address: ${options.address} on ${options.chainId} network. The ABI of the contract is: ${JSON.stringify(options.abi)}. Put the following code in the header to be able to connect to the blockchain:${providerCode}. Follow the design and features proposed in this description: ${options.description}`  
   }
 
-  private createUpdateMessage(description: string): string {
-    const providerCode = this.getProviderCode()
-    return FOLLOW_UP_SYSTEM_PROMPT + `. \n Update the website to satisfy the following description: ${description}.`
+  private createUpdateMessage(description: string, currentFiles: Pages): string {
+    const filesString = JSON.stringify(currentFiles, null, 2);
+    return `Here is the full code of my current project:\n\n${filesString}\n\nNow, please apply the following update based on this current code: ${description}. Remember to return ALL project files in the specified START_TITLE format.`
   }
 
   private getProviderCode(): string {
@@ -194,7 +195,7 @@ export class AIDappGenerator extends Plugin {
 </script>`
   }
 
-  private async callLLMAPI(messages: any[]): Promise<string> {
+  private async callLLMAPI(messages: any[], systemPrompt: string): Promise<string> {
     const param = new QueryParams()
     const apikey = param.get()['fireworksapikey']
 
@@ -217,7 +218,10 @@ export class AIDappGenerator extends Plugin {
         presence_penalty: 0,
         frequency_penalty: 0,
         temperature: 0.6,
-        messages: messages
+        messages: [
+          { role: 'system', content: systemPrompt },
+          ...messages
+        ]
       })
     })
 
diff --git a/apps/remix-ide/src/app/plugins/prompt.ts b/apps/remix-ide/src/app/plugins/prompt.ts
@@ -95,82 +95,80 @@ export default App;
 IMPORTANT: The first file should be always named index.html.
 You MUST generate all files: index.html, src/main.jsx, src/App.jsx.`;
 
-export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer modifying an existing HTML files.
-The user wants to apply changes and probably add new features/pages to the website, based on their request.
-You MUST output ONLY the changes required using the following UPDATE_PAGE_START and SEARCH/REPLACE format. Do NOT output the entire file.
-If it's a new page, you MUST applied the following NEW_PAGE_START and UPDATE_PAGE_END format.
+export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert Front-End Developer specializing in React, Vite, and ethers.js.
+Your task is to generate a multi-file DApp project structure.
+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.
+
+Return EACH file using the specified "TITLE_PAGE_START" format.
+The file structure MUST be:
+1.  \`index.html\`: The HTML root file. It MUST link to \`/src/main.jsx\` as a module.
+2.  \`src/main.jsx\`: The React entry point. It MUST import \`App.jsx\` and use \`ReactDOM.createRoot\`.
+3.  \`src/App.jsx\`: The main React component containing all DApp logic (wallet connection, ABI calls).
+4.  \`src/index.css\`: (Optional) Basic CSS file, imported by \`src/main.jsx\`.
+
 ${PROMPT_FOR_IMAGE_GENERATION}
-Do NOT explain the changes or what you did, just return the expected results.
-Update Format Rules:
-1. Start with ${UPDATE_PAGE_START}
-2. Provide the name of the page you are modifying.
-3. Close the start tag with the ${UPDATE_PAGE_END}.
-4. Start with ${SEARCH_START}
-5. Provide the exact lines from the current code that need to be replaced.
-6. Use ${DIVIDER} to separate the search block from the replacement.
-7. Provide the new lines that should replace the original lines.
-8. End with ${REPLACE_END}
-9. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
-10. To insert code, use an empty SEARCH block (only ${SEARCH_START} and ${DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
-11. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only ${DIVIDER} and ${REPLACE_END} on their lines).
-12. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
-Example Modifying Code:
-\`\`\`
-Some explanation...
-${UPDATE_PAGE_START}index.html${UPDATE_PAGE_END}
-${SEARCH_START}
-    <h1>Old Title</h1>
-${DIVIDER}
-    <h1>New Title</h1>
-${REPLACE_END}
-${SEARCH_START}
-  </body>
-${DIVIDER}
-    <script>console.log("Added script");</script>
-  </body>
-${REPLACE_END}
-\`\`\`
-Example Deleting Code:
-\`\`\`
-Removing the paragraph...
+No need to explain what you did. Just return the code for each file.
+
+Example Format:
 ${TITLE_PAGE_START}index.html${TITLE_PAGE_END}
-${SEARCH_START}
-  <p>This paragraph will be deleted.</p>
-${DIVIDER}
-${REPLACE_END}
-\`\`\`
-The user can also ask to add a new page, in this case you should return the new page in the following format:
-1. Start with ${NEW_PAGE_START}.
-2. Add the name of the page without special character, such as spaces or punctuation, using the .html format only, right after the start tag.
-3. Close the start tag with the ${NEW_PAGE_END}.
-4. Start the HTML response with the triple backticks, like \`\`\`html.
-5. Insert the following html there.
-6. Close with the triple backticks, like \`\`\`.
-7. Retry if another pages.
-Example Code:
-${NEW_PAGE_START}index.html${NEW_PAGE_END}
 \`\`\`html
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Index</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DApp</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-</head>
-<body>
-    <h1>Hello World</h1>
-    <script>AOS.init();</script>
-    <script>const { animate } = anime;</script>
-    <script>feather.replace();</script>
-</body>
+    <link rel="stylesheet" href="/src/index.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>
 \`\`\`
-IMPORTANT: While creating a new page, UPDATE ALL THE OTHERS (using the UPDATE_PAGE_START and SEARCH/REPLACE format) pages to add or replace the link to the new page, otherwise the user will not be able to navigate to the new page. (Dont use onclick to navigate, only href)
-No need to explain what you did. Just return the expected result.`
+${TITLE_PAGE_START}src/index.css${TITLE_PAGE_END}
+\`\`\`css
+/* AI will generate Tailwind base styles or custom CSS here */
+body {
+  font-family: sans-serif;
+}
+\`\`\`
+${TITLE_PAGE_START}src/main.jsx${TITLE_PAGE_END}
+\`\`\`javascript
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+\`\`\`
+${TITLE_PAGE_START}src/App.jsx${TITLE_PAGE_END}
+\`\`\`javascript
+import React, { useState, useEffect } from 'react';
+import { ethers } from 'ethers';
+
+// AI will generate the React component logic here...
+// ... including ABI, address, wallet connection, etc.
+
+const App = () => {
+  // AI-generated React logic will go here
+  return (
+    <div>
+      <h1>My DApp</h1>
+      {/* AI-generated UI will go here */}
+    </div>
+  );
+};
+
+export default App;
+\`\`\`
+IMPORTANT: The first file should be always named index.html.
+You MUST generate all files: index.html, src/main.jsx, src/App.jsx.`;
