feat(javascript): add language and frameworks to AutoPageContext.build #81

Add language and frameworks parameters to the `AutoPageContext.build` function in the `AutoPageContext.kt` file. This allows the function to accept the language and frameworks information from the `JsDependenciesSnapshot` in the `AutoPageAction.kt` file. The language and frameworks are then passed to the `AutoPageContext` object, which is used in the `AutoPageFlow` and `AutoPageTask` classes. This change enables the professional Frontend developer to choose the best components for the user based on the selected language and frameworks.

Author: phodal

docs/workflow/auto-page.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Frontend Flow
+title: AutoPage
 nav_order: 3
 parent: Workflow
 ---
@@ -34,6 +34,8 @@ data class AutoPageContext(
     var components: List<String>,
     val componentNames: List<String>,
     val routes: List<String>,
+    val frameworks: List<String> = listOf("React"),
+    val language: String = "JavaScript",
 )
 ```
 
@@ -43,8 +45,9 @@ Clarify:
 
     You are a professional Frontend developer.
     According to the user's requirements, you should choose the best components for the user in List.
-    
-    - Framework: React
+
+    - Framework: ${context.frameworks}
+    - Language: ${context.language}
     - User component: ${context.componentNames}, ${context.pageNames}
 
     For example:
@@ -67,6 +70,8 @@ Design:
     You are a professional Frontend developer.
     According to the user's requirements, and Components info, write Component for the user.
 
+    - Framework: ${context.frameworks}
+    - Language: ${context.language}
     - User Components Infos: ${context.components}
 
     For example:

docs/workflow/auto-sql.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: Gen SQL Flow
+title: AutoSQL
 nav_order: 2
 parent: Workflow
 ---

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/actions/AutoPageAction.kt

@@ -4,6 +4,7 @@ import cc.unitmesh.devti.AutoDevBundle
 import cc.unitmesh.devti.gui.sendToChatPanel
 import cc.unitmesh.devti.intentions.action.base.ChatBaseIntention
 import cc.unitmesh.devti.llms.LlmFactory
+import cc.unitmesh.ide.javascript.JsDependenciesSnapshot
 import cc.unitmesh.ide.javascript.flow.model.AutoPageContext
 import cc.unitmesh.ide.javascript.flow.AutoPageFlow
 import cc.unitmesh.ide.javascript.flow.AutoPageTask
@@ -29,11 +30,15 @@ class AutoPageAction : ChatBaseIntention() {
         if (editor == null || file == null) return
         val selectedText = editor.selectionModel.selectedText ?: return
 
+        val snapshot = JsDependenciesSnapshot.create(project, file)
+        val language = snapshot.language()
+        val frameworks = snapshot.mostPopularFrameworks()
+
         val reactAutoPage = ReactAutoPage(project, selectedText, editor)
 
         sendToChatPanel(project) { contentPanel, _ ->
             val llmProvider = LlmFactory().create(project)
-            val context = AutoPageContext.build(reactAutoPage)
+            val context = AutoPageContext.build(reactAutoPage,  language, frameworks)
             val prompter = AutoPageFlow(context, contentPanel, llmProvider)
 
             val task = AutoPageTask(project, prompter, editor, reactAutoPage)

javascript/src/main/kotlin/cc/unitmesh/ide/javascript/flow/model/AutoPageContext.kt

@@ -9,16 +9,20 @@ data class AutoPageContext(
     var components: List<String>,
     val componentNames: List<String>,
     val routes: List<String>,
+    val frameworks: List<String> = listOf("React"),
+    val language: String = "JavaScript",
 ) {
     companion object {
-        fun build(reactAutoPage: ReactAutoPage): AutoPageContext {
+        fun build(reactAutoPage: ReactAutoPage, language: String, frameworks: List<String>): AutoPageContext {
             return AutoPageContext(
                 requirement = reactAutoPage.userTask,
                 pages = reactAutoPage.getPages().map { it.format() },
                 pageNames = reactAutoPage.getPages().map { it.name },
                 components = reactAutoPage.getComponents().map { it.format() },
                 componentNames = reactAutoPage.getComponents().map { it.name },
                 routes = reactAutoPage.getRoutes().map { "${it.key}： ${it.value}" },
+                frameworks = frameworks,
+                language = language
             )
         }
     }

src/main/resources/genius/page/page-gen-clarify.vm

@@ -1,7 +1,8 @@
 You are a professional Frontend developer.
 According to the user's requirements, you should choose the best components for the user in List.
 
-- Framework: React
+- Framework: ${context.frameworks}
+- Language: ${context.language}
 - User component: ${context.componentNames}, ${context.pageNames}
 
 For example: