Merge pull request #319 from easyops-cn/steve/tsx-control-nodes

feat(): support fragment and :forEach

Author: weareoutman

bricks/ai-portal/src/cruise-canvas/legacy-reducers/jobs.ts

@@ -221,6 +221,10 @@ function getJobGeneratedView(
               const view = (
                 result.code.includes("<eo-view") ? parseJsx : parseTsx
               )(result.code);
+              if (view.errors.length > 0) {
+                // eslint-disable-next-line no-console
+                console.warn("Parsed generated view with errors:", view.errors);
+              }
               return { viewId: result.viewId, ...view };
             }
             return result;
@@ -248,6 +252,10 @@ function getJobStaticDataView(
             const view = parseTsx(part.data.code, {
               withContexts: ["RESPONSE"],
             });
+            if (view.errors.length > 0) {
+              // eslint-disable-next-line no-console
+              console.warn("Parsed static data view with errors:", view.errors);
+            }
             return { viewId: part.data.viewId, ...view };
           } catch (e) {
             // eslint-disable-next-line no-console

bricks/ai-portal/src/cruise-canvas/reducers/tasks.ts

@@ -233,6 +233,10 @@ function getJobGeneratedView(
             const view = (
               result.code.includes("<eo-view") ? parseJsx : parseTsx
             )(result.code);
+            if (view.errors.length > 0) {
+              // eslint-disable-next-line no-console
+              console.warn("Parsed generated view with errors:", view.errors);
+            }
             return { viewId: result.viewId, ...view };
           } catch {
             // Do nothing, continue to next part
@@ -258,6 +262,10 @@ function getJobStaticDataView(
             const view = parseTsx(part.data.code, {
               withContexts: ["RESPONSE"],
             });
+            if (view.errors.length > 0) {
+              // eslint-disable-next-line no-console
+              console.warn("Parsed static data view with errors:", view.errors);
+            }
             return { viewId: part.data.viewId, ...view };
           } catch (e) {
             // eslint-disable-next-line no-console

bricks/ai-portal/src/cruise-canvas/useConversationGraph.ts

@@ -30,6 +30,7 @@ export function useConversationGraph(
 
     const {
       list,
+      roots: jobRoots,
       map: jobMap,
       levels: jobLevels,
       downstreamMap,
@@ -45,6 +46,23 @@ export function useConversationGraph(
 
       const nodeIds: string[] = [];
 
+      if (jobRoots.includes(jobId)) {
+        const userInput = messages
+          ?.find((msg) => msg.role === "user")
+          ?.parts?.find((part) => part.type === "text")?.text;
+        if (userInput !== undefined) {
+          const requirementId = `requirement:${jobId}`;
+          nodes.push({
+            type: "requirement",
+            id: requirementId,
+            content: userInput,
+          });
+          nodeIds.push(requirementId);
+          jobNodesMap.set(jobId, nodeIds);
+          continue;
+        }
+      }
+
       if (job.instruction) {
         const instructionNodeId = `instruction:${jobId}`;
         nodes.push({
@@ -110,8 +128,9 @@ export function useConversationGraph(
         });
       }
       const source = nodeIds[nodeIds.length - 1];
-      for (const target of downstreams) {
-        edges.push({ source, target });
+      for (const targetJobId of downstreams) {
+        const targetNodeIds = jobNodesMap.get(targetJobId)!;
+        edges.push({ source, target: targetNodeIds[0] });
       }
     }
 

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertButton.ts

@@ -4,7 +4,9 @@ import type { ButtonProps } from "@next-shared/jsx-storyboard/lib/components.js"
 
 export default function convertButton(component: Component): BrickConf {
   const { properties } = component;
-  const props = properties as ButtonProps;
+  const props = properties as ButtonProps & {
+    textContent?: string;
+  };
   return {
     brick: "eo-button",
     properties: {

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertCard.ts

@@ -0,0 +1,19 @@
+import type { BrickConf } from "@next-core/types";
+import type { Component } from "@next-shared/jsx-storyboard";
+import type { CardProps } from "@next-shared/jsx-storyboard/lib/components.js";
+
+export default function convertCard(component: Component): BrickConf {
+  const { properties } = component;
+  const { title, textContent } = properties as CardProps & {
+    textContent?: string;
+  };
+  return {
+    brick: "eo-card",
+    properties: {
+      themeVariant: "elevo",
+      cardTitle: title,
+      background: false,
+      ...(textContent ? { textContent } : null),
+    },
+  };
+}

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertForEach.ts

@@ -0,0 +1,13 @@
+import type { BrickConf } from "@next-core/types";
+import type { Component } from "@next-shared/jsx-storyboard";
+
+export default function convertForEach(component: Component): BrickConf {
+  const { properties } = component;
+  const { dataSource } = properties as {
+    dataSource?: unknown;
+  };
+  return {
+    brick: ":forEach",
+    dataSource,
+  };
+}

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertJsx.ts

@@ -17,12 +17,16 @@ import convertModal from "./convertModal";
 import convertToolbar from "./convertToolbar";
 import convertText from "./convertText";
 import type { ConstructedView } from "../../interfaces";
+import convertCard from "./convertCard";
+import convertForEach from "./convertForEach";
 
 export async function convertJsx(
   result: ConstructedView,
   options: ConvertViewOptions
 ) {
-  const convert = async (component: Component) => {
+  const convert = async (
+    component: Component
+  ): Promise<BrickConf | BrickConf[]> => {
     let brick: BrickConf | null = null;
     switch (component.name) {
       case "List":
@@ -37,6 +41,9 @@ export async function convertJsx(
       case "eo-descriptions":
         brick = await convertDescriptions(component, result, options);
         break;
+      case "Card":
+        brick = await convertCard(component);
+        break;
       case "Dashboard":
       case "eo-dashboard":
         brick = await convertDashboard(component, result, options);
@@ -86,10 +93,16 @@ export async function convertJsx(
           convertComponentName(component.name)
         );
         break;
+      case "ForEach":
+        brick = await convertForEach(component);
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.error("Unsupported component:", component.name);
     }
 
     if (!brick) {
-      return null;
+      return [];
     }
 
     // Set [data-component-id] for the brick
@@ -105,7 +118,16 @@ export async function convertJsx(
     if (component.children?.length) {
       brick.children = (
         await Promise.all(component.children.map(convert))
-      ).filter(Boolean) as BrickConf[];
+      ).flat();
+
+      if (component.name === "Card" && brick.children.length > 1) {
+        brick.children = [
+          {
+            brick: "eo-content-layout",
+            children: brick.children,
+          },
+        ];
+      }
     }
 
     return brick;
@@ -142,9 +164,7 @@ export async function convertJsx(
     },
   ];
 
-  const children = (await Promise.all(result.components.map(convert))).filter(
-    Boolean
-  ) as BrickConf[];
+  const children = (await Promise.all(result.components.map(convert))).flat();
 
   const needBox = result.components.every((component) =>
     [
@@ -168,7 +188,7 @@ export async function convertJsx(
 }
 
 function mergeTexts(
-  items: (
+  ...items: (
     | { type: "text"; text: string }
     | { type: "expression"; value: unknown }
   )[]

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertModal.ts

@@ -4,7 +4,10 @@ import type { ModalProps } from "@next-shared/jsx-storyboard/lib/components.js";
 
 export default function convertModal(component: Component): BrickConf {
   const { properties } = component;
-  const { title, confirmText, cancelText } = properties as Partial<ModalProps>;
+  const { title, confirmText, cancelText, textContent } =
+    properties as Partial<ModalProps> & {
+      textContent?: string;
+    };
   return {
     brick: "eo-modal",
     portal: true,
@@ -14,6 +17,7 @@ export default function convertModal(component: Component): BrickConf {
       confirmText: confirmText,
       cancelText: cancelText,
       keyboard: true,
+      ...(textContent ? { textContent } : null),
     },
   };
 }

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertTable.ts

@@ -14,7 +14,7 @@ export default async function convertTable(
 ): Promise<BrickConf> {
   const { properties } = component;
   const { dataSource, size, columns, rowKey, pagination, ...restProps } =
-    properties as Omit<TableProps<any, boolean>, "dataSource"> & {
+    properties as Omit<TableProps<any>, "dataSource"> & {
       dataSource: string | object;
       size?: "small" | "medium" | "large";
       pagination?: boolean;

bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertText.ts

@@ -8,7 +8,6 @@ export default function convertText(component: Component): BrickConf {
   };
   return {
     brick: "span",
-    portal: true,
     properties: {
       textContent,
     },