feat(): support fragment and :forEach

weareoutman · weareoutman · commit 11db4f2450ea · 2025-08-25T19:46:41.000+08:00
diff --git a/bricks/ai-portal/src/cruise-canvas/legacy-reducers/jobs.ts b/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
diff --git a/bricks/ai-portal/src/cruise-canvas/reducers/tasks.ts b/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
diff --git a/bricks/ai-portal/src/cruise-canvas/useConversationGraph.ts b/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] });
       }
     }
 
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertButton.ts b/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: {
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertCard.ts b/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),
+    },
+  };
+}
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertForEach.ts b/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,
+  };
+}
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertJsx.ts b/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 }
   )[]
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertModal.ts b/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),
     },
   };
 }
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertTable.ts b/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;
diff --git a/bricks/ai-portal/src/cruise-canvas/utils/jsx-converters/convertText.ts b/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,
     },
diff --git a/bricks/ai-portal/src/shared/CreatedView/CreatedView.tsx b/bricks/ai-portal/src/shared/CreatedView/CreatedView.tsx
@@ -11,6 +11,7 @@ import { unstable_createRoot } from "@next-core/runtime";
 import classNames from "classnames";
 import { uniqueId } from "lodash";
 import { initializeI18n } from "@next-core/i18n";
+import type { Component } from "@next-shared/jsx-storyboard";
 import styles from "./CreatedView.module.css";
 import sharedStyles from "../../cruise-canvas/shared.module.css";
 import type { Job } from "../../cruise-canvas/interfaces";
@@ -106,12 +107,14 @@ export function CreatedView({
 
   const sizeLarge = useMemo(() => {
     if (isJsxView(view)) {
-      // TODO: handle nested components
-      for (const component of view.components ?? []) {
-        if (component.name === "Table" || component.name === "eo-table") {
-          return true;
+      let large = false;
+      traverseComponents(view.components ?? [], (component) => {
+        if (large) {
+          return;
         }
-        if (
+        if (component.name === "Table" || component.name === "eo-table") {
+          large = true;
+        } else if (
           component.name === "Dashboard" ||
           component.name === "eo-dashboard"
         ) {
@@ -120,10 +123,11 @@ export function CreatedView({
             Array.isArray(widgets) &&
             widgets.length >= (component.properties!.groupField ? 3 : 7)
           ) {
-            return true;
+            large = true;
           }
         }
-      }
+      });
+      return large;
     } else {
       for (const component of view.components ?? []) {
         if (component.componentName === "table") {
@@ -194,3 +198,13 @@ export function CreatedView({
     </div>
   );
 }
+
+function traverseComponents(
+  components: Component[],
+  callback: (component: Component) => void
+) {
+  for (const component of components) {
+    callback(component);
+    traverseComponents(component.children ?? [], callback);
+  }
+}
diff --git a/bricks/ai-portal/src/shared/JsxEditor/JsxEditor.tsx b/bricks/ai-portal/src/shared/JsxEditor/JsxEditor.tsx
@@ -109,14 +109,22 @@ declare const RESPONSE: typeof RESPONSE_VALUE;`,
             themeVariant="elevo"
             type="primary"
             onClick={() => {
+              const newView = (code.includes("<eo-view") ? parseJsx : parseTsx)(
+                code,
+                view.withContexts
+                  ? { withContexts: Object.keys(view.withContexts) }
+                  : undefined
+              );
+              if (newView.errors.length > 0) {
+                // eslint-disable-next-line no-console
+                console.warn(
+                  "Parsed modified view with errors:",
+                  newView.errors
+                );
+              }
               updateView?.(activeJsxEditorJob!.id, {
                 viewId: view.viewId,
-                ...(code.includes("<eo-view") ? parseJsx : parseTsx)(
-                  code,
-                  view.withContexts
-                    ? { withContexts: Object.keys(view.withContexts) }
-                    : undefined
-                ),
+                ...newView,
                 withContexts: view.withContexts,
               });
               setActiveJsxEditorJob?.(undefined);
diff --git a/shared/jsx-storyboard/lib/components.d.ts b/shared/jsx-storyboard/lib/components.d.ts
@@ -9,8 +9,7 @@ export interface BaseProps {
   componentId?: string;
 }
 
-export interface TableProps<T extends object, S extends boolean>
-  extends BaseProps {
+export interface TableProps<T extends object> extends BaseProps {
   dataSource: {
     list: T[];
     page?: number;
@@ -24,9 +23,10 @@ export interface TableProps<T extends object, S extends boolean>
     sortable?: boolean;
   }>;
   rowKey: string;
-  rowSelection?: S;
+  rowSelection?: boolean;
   sort?: TableSort | null;
-  onSelect?: S extends true ? (event: CustomEvent<T[]>) => void : never;
+  pagination?: boolean;
+  onSelect?: (event: CustomEvent<T[]>) => void;
   onPaginate?: (event: CustomEvent<{ page: number; pageSize: number }>) => void;
   onSort?: (event: CustomEvent<TableSort | null>) => void;
 }
@@ -111,6 +111,10 @@ export interface ModalProps extends BaseProps {
   onConfirm?: () => void;
 }
 
+export interface CardProps extends BaseProps {
+  title?: string;
+}
+
 export interface DashboardWidget {
   widget: "chart";
   type: "line" | "area";
@@ -146,9 +150,7 @@ export interface TableSort {
 }
 
 declare const View: (props: ViewProps) => any;
-declare const Table: <T extends object, S extends boolean = false>(
-  props: TableProps<T, S>
-) => any;
+declare const Table: <T extends object>(props: TableProps<T>) => any;
 declare const List: (props: ListProps) => any;
 declare const Descriptions: (props: DescriptionsProps) => any;
 declare const Button: (props: ButtonProps) => any;
@@ -166,4 +168,5 @@ declare const DatePicker: (props: DatePickerProps) => any;
 declare const TimePicker: (props: TimePickerProps) => any;
 declare const Dashboard: (props: DashboardProps) => any;
 declare const Modal: (props: ModalProps) => any;
-declare const Plaintext: (props: {}) => any;
+declare const Card: (props: CardProps) => any;
+declare const Plaintext: (props: BaseProps) => any;
diff --git a/shared/jsx-storyboard/src/constructors/element.ts b/shared/jsx-storyboard/src/constructors/element.ts
@@ -215,7 +215,7 @@ export function constructElement(
                       child.type === "text"
                         ? child.text
                         : child.type === "expression"
-                          ? `<%= ${child.expression} %>`
+                          ? `<%= ${result.source.slice(child.expression.start!, child.expression.end!)} %>`
                           : mergeTexts(child.children, result.source),
                   },
                 }
diff --git a/shared/jsx-storyboard/src/tsx-constructors/api.ts b/shared/jsx-storyboard/src/tsx-constructors/api.ts
diff --git a/shared/jsx-storyboard/src/tsx-constructors/children.ts b/shared/jsx-storyboard/src/tsx-constructors/children.ts
diff --git a/shared/jsx-storyboard/src/tsx-constructors/components.ts b/shared/jsx-storyboard/src/tsx-constructors/components.ts
diff --git a/shared/jsx-storyboard/src/tsx-constructors/element.ts b/shared/jsx-storyboard/src/tsx-constructors/element.ts
diff --git a/shared/jsx-storyboard/src/tsx-constructors/events.ts b/shared/jsx-storyboard/src/tsx-constructors/events.ts
diff --git a/shared/jsx-storyboard/src/tsx-constructors/replaceVariables.ts b/shared/jsx-storyboard/src/tsx-constructors/replaceVariables.ts
diff --git a/shared/jsx-storyboard/src/tsx-constructors/view.ts b/shared/jsx-storyboard/src/tsx-constructors/view.ts
