feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/workflow/variable/src/components/index.tsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export { PrivateScopeProvider } from './private-scope-provider';
+export { PublicScopeProvider } from './public-scope-provider';

frontend/packages/workflow/variable/src/components/private-scope-provider/index.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { useMemo, type ReactElement } from 'react';
+
+import {
+  FlowNodeVariableData,
+  type Scope,
+  ScopeProvider,
+} from '@flowgram-adapter/free-layout-editor';
+import { useEntityFromContext } from '@flowgram-adapter/free-layout-editor';
+
+interface VariableProviderProps {
+  children: ReactElement | ReactElement[];
+}
+
+export const PrivateScopeProvider = ({ children }: VariableProviderProps) => {
+  const node = useEntityFromContext();
+
+  const privateScope: Scope = useMemo(() => {
+    const variableData: FlowNodeVariableData =
+      node.getData(FlowNodeVariableData);
+    if (!variableData.private) {
+      variableData.initPrivate();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return variableData.private!;
+  }, [node]);
+
+  return (
+    <ScopeProvider value={{ scope: privateScope }}>{children}</ScopeProvider>
+  );
+};

frontend/packages/workflow/variable/src/components/public-scope-provider/index.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { useMemo } from 'react';
+
+import {
+  FlowNodeVariableData,
+  type Scope,
+  ScopeProvider,
+} from '@flowgram-adapter/free-layout-editor';
+import { useEntityFromContext } from '@flowgram-adapter/free-layout-editor';
+
+interface VariableProviderProps {
+  children: React.ReactElement;
+}
+
+export const PublicScopeProvider = ({ children }: VariableProviderProps) => {
+  const node = useEntityFromContext();
+
+  const publicScope: Scope = useMemo(
+    () => node.getData(FlowNodeVariableData).public,
+    [node],
+  );
+
+  return (
+    <ScopeProvider value={{ scope: publicScope }}>{children}</ScopeProvider>
+  );
+};

frontend/packages/workflow/variable/src/components/variable-debug-panel/content.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React, { startTransition, useEffect } from 'react';
+
+import { VariableEngine } from '@flowgram-adapter/free-layout-editor';
+import { FlowNodeFormData } from '@flowgram-adapter/free-layout-editor';
+import { useRefresh, useService } from '@flowgram-adapter/free-layout-editor';
+import { Tag, Tree } from '@douyinfe/semi-ui';
+import { ViewVariableType } from '@coze-workflow/base/types';
+
+import { getViewVariableTypeByAST } from '../../core/utils/parse-ast';
+import { type WorkflowVariableField } from '../../core/types';
+import { isGlobalVariableKey } from '../../constants';
+
+const getRootFieldTitle = (field: WorkflowVariableField) => {
+  if (isGlobalVariableKey(field.key)) {
+    return 'Global';
+  }
+
+  return field.scope.meta?.node
+    ?.getData(FlowNodeFormData)
+    ?.formModel?.getFormItemValueByPath('/nodeMeta')?.title;
+};
+
+const getTreeDataByField = (field: WorkflowVariableField, path = '/') => {
+  const { type, childFields } = getViewVariableTypeByAST(field.type);
+
+  const currTreeKey = `${path}${field.key}/`;
+
+  const isRoot = path === '/';
+
+  const tag = isRoot
+    ? getRootFieldTitle(field)
+    : type && ViewVariableType.getLabel(type);
+
+  return {
+    key: currTreeKey,
+    label: (
+      <>
+        {field.key}
+        <Tag
+          style={{ marginLeft: 5 }}
+          size="small"
+          color={isRoot ? 'violet' : 'light-blue'}
+        >
+          {tag}
+        </Tag>
+      </>
+    ),
+    children: childFields?.map(_child =>
+      getTreeDataByField(_child, currTreeKey),
+    ),
+  };
+};
+
+export const VariableDebugPanel = (): JSX.Element => {
+  const variableEngine: VariableEngine = useService(VariableEngine);
+
+  const refresh = useRefresh();
+  const { variables } = variableEngine.globalVariableTable;
+  const treeData = variables.map(_v => getTreeDataByField(_v));
+
+  useEffect(() => {
+    const subscription = variableEngine.globalEvent$.subscribe(_v => {
+      startTransition(() => {
+        refresh();
+      });
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  return (
+    <div style={{ minWidth: 350, maxHeight: 500, overflowY: 'auto' }}>
+      <p>Debug panel for variable, only visible in BOE. </p>
+      <Tree showLine={true} treeData={treeData} autoExpandParent />
+    </div>
+  );
+};

frontend/packages/workflow/variable/src/components/variable-debug-panel/variable-debug-layer.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React from 'react';
+
+import { Layer } from '@flowgram-adapter/free-layout-editor';
+import { Collapse } from '@douyinfe/semi-ui';
+
+import { VariableDebugPanel } from './content';
+
+export class VariableDebugLayer extends Layer {
+  render(): JSX.Element {
+    return (
+      <div
+        style={{
+          position: 'fixed',
+          right: 50,
+          top: 100,
+          background: '#fff',
+          borderRadius: 5,
+          boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
+          zIndex: 999,
+        }}
+      >
+        <Collapse>
+          <Collapse.Panel header="Variable (Debug)" itemKey="1">
+            <VariableDebugPanel />
+          </Collapse.Panel>
+        </Collapse>
+      </div>
+    );
+  }
+}