page by page update

Sma1lboy · Jan 12, 2025 · 7eecfe4 · 7eecfe4
1 parent eebffc6
commit 7eecfe4
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 39 deletions.
diff --git a/backend/src/build-system/handlers/ux/sitemap-structure/prompt.ts b/backend/src/build-system/handlers/ux/sitemap-structure/prompt.ts
@@ -16,7 +16,7 @@ export const prompts = {
     Within <UXSitemap>, start with <global_comp>, and generate multiple <gen_page> blocks, one for each page.
     Each <gen_page> must follow this structure exactly:
 
-<gen_page>
+<gen_page id="[id]">
 P#. [Page Name]
     URL Path: /[path]
     Description: [Brief description of page purpose]
@@ -55,6 +55,7 @@ P#. [Page Name]
 3. **Page Definitions**:
    - Use \`<page_gen>\` tags to define each individual page or screen from the Sitemap Documentation.
    - For each \`<page_gen>\`, provide:
+     - **Page id** a unique page id.
      - **Page name** (P#).  
      - **URL Path**: The route or path used to access this page.  
      - **Description**: Explain the purpose of the page, the users goal, and how it supports the user journey.  
@@ -122,8 +123,6 @@ Deliver a single XML-like document that strictly follows the structure above. St
   },
   generateLevel2UXSiteMapStructrePrompt: (
     projectName: string,
-    UXStructure: string,
-    sitemapDoc: string,
     platform: string,
   ): string => {
     return `You are an expert UX Designer. 
@@ -132,10 +131,10 @@ Deliver a single XML-like document that strictly follows the structure above. St
     The output should address all aspects of user interaction, content layout, based on the following inputs:
   
          - Project name: ${projectName}
-         - Sitemap Documentation: ${sitemapDoc}
-         - UX Structure document: ${UXStructure}
          - Platform: ${platform}
-  
+         - Sitemap Documentation: (Provided by the user next)
+         - UX SiteMap Structure: (Provided by the user next)
+         
   Follow these guidelines to analyze requirements from a UX perspective:
   
   ### Instructions and Rules:
@@ -154,7 +153,7 @@ Deliver a single XML-like document that strictly follows the structure above. St
         List all components (e.g., headers, buttons, sidebars) and explain their role on the page.
         Include specific interactions and behaviors for each element.
     Content Display:
-        Identify the information that needs to be visible on the page and why it’s essential for the user.
+        Identify the information that needs to be visible on the page and why it's essential for the user.
     Navigation and Routes:
         Specify all frontend routes required to navigate to this page.
         Include links or actions that lead to other pages or states.
@@ -184,8 +183,6 @@ Deliver a single XML-like document that strictly follows the structure above. St
      - Element purposes
      - Content that needs to be displayed
 
-  Your reply must start with: "\`\`\`UXStructureMap" and end with "\`\`\`". 
-
   Focus on describing the UX Structure from a user experience perspective. For each page:
   1. What element appear on each page and why
   2. What information needs to be displayed and why

diff --git a/backend/src/build-system/handlers/ux/sitemap-structure/sms-page.ts b/backend/src/build-system/handlers/ux/sitemap-structure/sms-page.ts
@@ -4,9 +4,12 @@ import { BuildHandler, BuildResult } from 'src/build-system/types';
 import { ModelProvider } from 'src/common/model-provider';
 import { prompts } from './prompt';
 import { removeCodeBlockFences } from 'src/build-system/utils/strings';
+import { MessageInterface } from 'src/common/model-provider/types';
 
-export class Level2UXSitemapStructureHandler implements BuildHandler<string> {
-  readonly id = 'op:UX:SMS:LEVEL2';
+export class UXSitemapStructurePagebyPageHandler
+  implements BuildHandler<string>
+{
+  readonly id = 'op:UX:SMS:PAGEBYPAGE';
   readonly logger = new Logger('Level2UXSitemapStructureHandler');
 
   async run(context: BuilderContext): Promise<BuildResult<string>> {
@@ -44,53 +47,68 @@ export class Level2UXSitemapStructureHandler implements BuildHandler<string> {
     for (const section of sections) {
       const prompt = prompts.generateLevel2UXSiteMapStructrePrompt(
         projectName,
-        section.content,
-        sitemapDoc,
         'web', // TODO: Replace with dynamic platform if necessary
       );
 
+      const messages: MessageInterface[] = [
+        {
+          role: 'system',
+          content: prompt,
+        },
+        {
+          role: 'user',
+          content: `
+            Here is the UX Sitemap Documentation (SMD):
+          
+            ${sitemapDoc}
+          
+            Next will provide UX SiteMap Structure`,
+        },
+        {
+          role: 'user',
+          content: `
+            Here is the UX SiteMap Structre Section (SMS):
+          
+            ${section}
+          
+            Please generate the Full UX Sitemap Structre for this section now.`,
+        },
+        {
+          role: 'user',
+          content: `Please add more detail about the Core Components within each <page_gen>.
+            Specifically:
+            - Provide a descriptive name for each Core Component (e.g., “C1.1. SearchBar”).
+            - List possible states (Default, Hover, etc.) and typical user interactions (click, scroll, etc.).
+            - Clarify how these components support user goals and why they exist on that page.`,
+        },
+      ];
+
       const refinedContent = await modelProvider.chatSync({
         model: 'gpt-4o-mini',
-        messages: [{ content: prompt, role: 'system' }],
+        messages,
       });
 
-      refinedSections.push({
-        title: section.title,
-        content: refinedContent,
-      });
+      refinedSections.push(refinedContent);
     }
 
-    // Combine the refined sections into the final document
-    const refinedDocument = refinedSections
-      .map((section) => `## **${section.title}**\n${section.content}`)
-      .join('\n\n');
+    // Convert refinedSections to a stringD
+    const refinedDocument = `<UXStructureMap>\n${refinedSections.join('\n\n')}\n</UXStructureMap>`;
 
     this.logger.log(refinedDocument);
 
     return {
       success: true,
-      data: removeCodeBlockFences(refinedDocument),
+      data: refinedDocument,
     };
   }
 
   /**
-   * Extracts all sections from a given text.
+   * Extracts all <page_gen> sections as raw strings, including the tags.
    * @param text The UX Structure Document content.
-   * @returns Array of extracted sections with title and content.
+   * @returns Array of extracted sections as full strings.
    */
-  private extractAllSections(
-    text: string,
-  ): Array<{ title: string; content: string }> {
-    const regex = /## \*\*(\d+\.\s.*)\*\*([\s\S]*?)(?=\n## \*\*|$)/g;
-    const sections = [];
-    let match;
-
-    while ((match = regex.exec(text)) !== null) {
-      const title = match[1].trim();
-      const content = match[2].trim();
-      sections.push({ title, content });
-    }
-
-    return sections;
+  private extractAllSections(text: string): string[] {
+    const pageRegex = /<gen_page id="[^"]+">[\s\S]*?<\/gen_page>/g;
+    return text.match(pageRegex) || [];
   }
 }