Feat(bcakend) more detail ux structure

backend/src/build-system/node/frontend-file-structure/index.ts

@@ -4,7 +4,6 @@ import { ModelProvider } from 'src/common/model-provider';
 import { prompts } from './prompt';
 
 export class FileStructureHandler implements BuildHandler {
-
   readonly id = 'op:FSTRUCT::STATE:GENERATE';
 
   async run(context: BuilderContext, args: unknown): Promise<BuildResult> {

backend/src/build-system/node/ux-sitemap-structure/index.ts

@@ -2,19 +2,21 @@ import { BuildHandler, BuildResult } from 'src/build-system/types';
 import { BuilderContext } from 'src/build-system/context';
 import { ModelProvider } from 'src/common/model-provider';
 import { prompts } from './prompt';
+import { Logger } from '@nestjs/common';
 
 // UXSMS: UX Sitemap Structure
 export class UXSitemapStructureHandler implements BuildHandler {
   readonly id = 'op:UXSMS::STATE:GENERATE';
+  readonly logger = new Logger('UXSitemapStructureHandler');
 
   async run(context: BuilderContext, args: unknown): Promise<BuildResult> {
-    console.log('Generating UX Structure Document...');
+    this.logger.log('Generating UX Structure Document...');
 
     // extract relevant data from the context
     const projectName =
       context.getData('projectName') || 'Default Project Name';
 
-    const prompt = prompts.generateUXDataMapPrompt(
+    const prompt = prompts.generateUXSiteMapStructrePrompt(
       projectName,
       args as string,
       // TODO: change later
@@ -33,3 +35,95 @@ export class UXSitemapStructureHandler implements BuildHandler {
     };
   }
 }
+
+export class Level2UXSitemapStructureHandler implements BuildHandler {
+  readonly id = 'op:LEVEL2_UXSMS::STATE:GENERATE';
+  readonly logger = new Logger('Level2UXSitemapStructureHandler');
+
+  async run(context: BuilderContext, args: unknown): Promise<BuildResult> {
+    this.logger.log('Generating Level 2 UX Sitemap Structure Document...');
+
+    // Extract necessary data from the context
+    const { projectName, sitemapDoc, uxStructureDoc } = args as {
+      projectName: string;
+      sitemapDoc: string;
+      uxStructureDoc: string;
+    };
+
+    // Ensure the UX Structure Document exists
+    if (!projectName || !sitemapDoc || !uxStructureDoc) {
+      throw new Error(
+        'Missing required arguments: projectName, sitemapDoc, or uxStructureDoc.',
+      );
+    }
+
+    // Extract sections from the UX Structure Document
+    const sections = this.extractAllSections(uxStructureDoc);
+    if (sections.length === 0) {
+      this.logger.error(
+        'No valid sections found in the UX Structure Document.',
+      );
+      return {
+        success: false,
+        data: 'No valid sections found in the UX Structure Document.',
+      };
+    }
+
+    // Process each section with the refined Level 2 prompt
+    const modelProvider = ModelProvider.getInstance();
+    const refinedSections = [];
+
+    for (const section of sections) {
+      const prompt = prompts.generateLevel2UXSiteMapStructrePrompt(
+        projectName,
+        section.content,
+        sitemapDoc,
+        'web', // TODO: Replace with dynamic platform if necessary
+      );
+
+      // Generate refined UX Structure content
+      const refinedContent = await modelProvider.chatSync(
+        { content: prompt },
+        'gpt-4o-mini',
+      );
+
+      refinedSections.push({
+        title: section.title,
+        content: refinedContent,
+      });
+    }
+
+    // Combine the refined sections into the final document
+    const refinedDocument = refinedSections
+      .map((section) => `## **${section.title}**\n${section.content}`)
+      .join('\n\n');
+
+    this.logger.log(refinedDocument);
+
+    return {
+      success: true,
+      data: refinedDocument,
+    };
+  }
+
+  /**
+   * Extracts all sections from a given text.
+   * @param text The UX Structure Document content.
+   * @returns Array of extracted sections with title and content.
+   */
+  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;
+  }
+}

backend/src/build-system/node/ux-sitemap-structure/prompt.ts

@@ -1,5 +1,5 @@
 export const prompts = {
-  generateUXDataMapPrompt: (
+  generateUXSiteMapStructrePrompt: (
     projectName: string,
     sitemapDoc: string,
     platform: string,
@@ -55,6 +55,75 @@ export const prompts = {
   2. What information needs to be displayed and why
   3. How the element supports user goals
 
+  Make sure is 100% completed. It will be directly be use in development.
+  `;
+  },
+  generateLevel2UXSiteMapStructrePrompt: (
+    projectName: string,
+    UXStructure: string,
+    sitemapDoc: string,
+    platform: string,
+  ): string => {
+    return `You are an expert UX Designer. 
+    Your task is to analyze and improve a specific part of a page in the provided UX Structure Document.
+    The goal is to refine the design, layout, and interaction to ensure a seamless user experience and facilitate frontend implementation.
+    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}
+
+  Follow these guidelines to analyze requirements from a UX perspective:
+
+  ### Instructions and Rules:
+
+  1, Analyze the Target Section:
+      Focus on the specific part of the page provided in the UX Structure document.
+      Identify ways to enhance its layout, interactions, and functionality.
+  2, Improve UX Details:
+      Add clarity to component placement and hierarchy.
+      Specify interactions, behaviors, and dynamic content updates.
+      Ensure the section aligns with user goals and their journey.
+  3, You need to identify and define every page/screen required for the application.
+  4, Detailed Breakdown for Each Page/Screen:
+    Page Purpose: Clearly state the user goal for the page.
+    Core Elements:
+        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.
+    Navigation and Routes:
+        Specify all frontend routes required to navigate to this page.
+        Include links or actions that lead to other pages or states.
+    Restrictions:
+        Note any restrictions or conditions for accessing the page (e.g., login required, specific user roles).
+
+  5, Focus on Detail:
+    Provide a component-level breakdown for each page, including layouts.
+    Explain how the design supports user goals and aligns with their journey.
+
+  6. For each page/screen in the sitemap:
+     - How the block should be place on the view?
+     - What information does the user need to see?
+     - What elements should be on the page?
+     - What are all the routes require for the frontend?
+     - What dynamic content needs to be displayed?
+     - What are the restriction for the page?
+
+  7. Consider:
+     - User goals on each page
+     - User journy
+     - 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
+  3. How the element supports user goals
+
   Make sure is 100% completed. It will be directly be use in development.
   `;
   },