@gadmin2n/schematics 0.0.72 → 0.0.74

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/components/CreateNodeInstanceModal.tsx

@@ -0,0 +1,363 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Alert,
+  Button,
+  Input,
+  Modal,
+  Select,
+  Space,
+  Spin,
+  Typography,
+  message,
+} from 'antd';
+import { CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { useWorkflowAgent } from '../../hooks/useWorkflowAgent';
+import type { WorkflowNodeType, NodeInstanceAgentOutput } from '../../types';
+
+const { Text } = Typography;
+const { TextArea } = Input;
+
+/**
+ * Front-end hardcoded mapping: nodeType category → prompt placeholder & scenario hint.
+ */
+const CATEGORY_PROMPT_CONFIG: Record<
+  string,
+  { placeholder: string; scenarioHint: string }
+> = {
+  TRIGGER: {
+    placeholder: 'e.g. Trigger every weekday at 9am Shanghai time',
+    scenarioHint:
+      'This is a trigger node. Generate config for defining when/how the workflow starts.',
+  },
+  ACTION: {
+    placeholder:
+      'e.g. Send a POST request to https://api.example.com/notify with the order data',
+    scenarioHint:
+      'This is an action node. Generate config for performing an operation (HTTP call, DB query, notification, etc.).',
+  },
+  CONDITION: {
+    placeholder:
+      'e.g. Check if order.amount > 1000 AND order.status is "pending"',
+    scenarioHint:
+      'This is a condition/branching node. Generate config for evaluating conditions to decide the flow path.',
+  },
+  LOOP: {
+    placeholder: 'e.g. Iterate over the "items" array field with concurrency 3',
+    scenarioHint:
+      'This is a loop node. Generate config for iterating over data collections.',
+  },
+  FLOW_CONTROL: {
+    placeholder: 'e.g. Wait 30 seconds before proceeding to the next step',
+    scenarioHint:
+      'This is a flow control node. Generate config for managing execution flow (delay, parallel, error handling).',
+  },
+  APPROVAL: {
+    placeholder:
+      'e.g. Wait for manager@company.com to approve, timeout after 24 hours',
+    scenarioHint:
+      'This is an approval node. Generate config for human approval gates with escalation rules.',
+  },
+  SUB_WORKFLOW: {
+    placeholder:
+      'e.g. Call the "order-processing" workflow and wait for completion',
+    scenarioHint:
+      'This is a sub-workflow node. Generate config for invoking another workflow as a child process.',
+  },
+};
+
+const DEFAULT_PROMPT_CONFIG = {
+  placeholder: 'Describe what this node instance should do...',
+  scenarioHint: 'Generate appropriate configuration for this node type.',
+};
+
+function getPromptConfig(category: string) {
+  return CATEGORY_PROMPT_CONFIG[category] || DEFAULT_PROMPT_CONFIG;
+}
+
+function tryParseNodeInstanceOutput(
+  raw: string,
+): NodeInstanceAgentOutput | null {
+  try {
+    const match = raw.match(/```json\s*([\s\S]*?)```/);
+    const jsonStr = match ? match[1].trim() : raw.trim();
+    const parsed = JSON.parse(jsonStr);
+    if (typeof parsed.name === 'string' && typeof parsed.config === 'object') {
+      return parsed as NodeInstanceAgentOutput;
+    }
+  } catch {
+    // not valid
+  }
+  return null;
+}
+
+export interface AiGenerateResult {
+  nodeTypeId: string;
+  name: string;
+  description: string;
+  config: Record<string, any>;
+}
+
+interface Props {
+  open: boolean;
+  nodeTypes: WorkflowNodeType[];
+  onClose: () => void;
+  onApply: (data: AiGenerateResult) => void;
+}
+
+export function CreateNodeInstanceModal({
+  open,
+  nodeTypes,
+  onClose,
+  onApply,
+}: Props) {
+  const [selectedNodeTypeId, setSelectedNodeTypeId] = useState<
+    string | undefined
+  >();
+  const [prompt, setPrompt] = useState('');
+  const [step, setStep] = useState<'selectType' | 'generating' | 'done'>(
+    'selectType',
+  );
+  const [generatedResult, setGeneratedResult] =
+    useState<NodeInstanceAgentOutput | null>(null);
+  const [resultInput, setResultInput] = useState('');
+
+  const {
+    generate,
+    abort: abortAgent,
+    loading: agentLoading,
+    error: agentError,
+  } = useWorkflowAgent({ nodeTypes });
+
+  const selectedNodeType = useMemo(
+    () => nodeTypes.find((nt) => String(nt.id) === selectedNodeTypeId),
+    [selectedNodeTypeId, nodeTypes],
+  );
+
+  const promptConfig = useMemo(
+    () =>
+      selectedNodeType
+        ? getPromptConfig(selectedNodeType.category)
+        : DEFAULT_PROMPT_CONFIG,
+    [selectedNodeType],
+  );
+
+  async function handleGenerate() {
+    if (!prompt.trim()) {
+      message.warning('Please describe what this node instance should do');
+      return;
+    }
+    if (!selectedNodeType) return;
+
+    setStep('generating');
+    const result = await generate({
+      action: 'create_node_instance',
+      prompt: prompt.trim(),
+      nodeType: selectedNodeType,
+      scenarioHint: promptConfig.scenarioHint,
+    });
+
+    if (result && 'config' in result) {
+      const nodeResult = result as NodeInstanceAgentOutput;
+      setGeneratedResult(nodeResult);
+      setResultInput(JSON.stringify(nodeResult, null, 2));
+      setStep('done');
+    } else if (!result) {
+      // Aborted or still waiting — stay in generating to allow manual paste
+      setStep('generating');
+    }
+  }
+
+  function handleApplyManualJson() {
+    const parsed = tryParseNodeInstanceOutput(resultInput);
+    if (!parsed) {
+      message.error(
+        'Invalid JSON format. Expected: { "name": "...", "description": "...", "config": {...} }',
+      );
+      return;
+    }
+    setGeneratedResult(parsed);
+    setResultInput(JSON.stringify(parsed, null, 2));
+    setStep('done');
+  }
+
+  function handleConfirm() {
+    if (!generatedResult || !selectedNodeTypeId) return;
+
+    onApply({
+      nodeTypeId: selectedNodeTypeId,
+      name: generatedResult.name,
+      description: generatedResult.description || '',
+      config: generatedResult.config,
+    });
+    handleClose();
+  }
+
+  function handleClose() {
+    abortAgent();
+    setSelectedNodeTypeId(undefined);
+    setPrompt('');
+    setStep('selectType');
+    setGeneratedResult(null);
+    setResultInput('');
+    onClose();
+  }
+
+  return (
+    <Modal
+      title="AI Create Node Instance"
+      open={open}
+      onCancel={handleClose}
+      footer={null}
+      destroyOnClose
+      width={560}
+    >
+      <Space direction="vertical" style={{ width: '100%' }} size="middle">
+        {/* Node Type Select — always visible */}
+        <div>
+          <Text strong>Node Type</Text>
+          <Select
+            placeholder="Select a node type"
+            value={selectedNodeTypeId}
+            onChange={setSelectedNodeTypeId}
+            disabled={step === 'generating'}
+            style={{ width: '100%', marginTop: 4 }}
+            showSearch
+            optionFilterProp="label"
+            options={nodeTypes.map((nt) => ({
+              label: `${nt.label} (${nt.category})`,
+              value: String(nt.id),
+            }))}
+          />
+        </div>
+
+        {/* Prompt Input — visible once type is selected */}
+        {selectedNodeTypeId && (
+          <div>
+            <Text strong>Describe your node instance</Text>
+            <TextArea
+              rows={4}
+              placeholder={promptConfig.placeholder}
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              disabled={step === 'generating' || step === 'done'}
+              style={{ marginTop: 4 }}
+            />
+          </div>
+        )}
+
+        {/* Generating state */}
+        {step === 'generating' && (
+          <>
+            <Alert
+              type="info"
+              icon={<Spin indicator={<LoadingOutlined />} size="small" />}
+              showIcon
+              message="Waiting for Agent..."
+              description="Continue your conversation with the Agent in the chat panel. Once it outputs valid JSON, it will be captured automatically. Or paste JSON below manually."
+            />
+            <div>
+              <Text strong>JSON Result</Text>
+              <Text type="secondary" style={{ marginLeft: 8, fontSize: 12 }}>
+                Auto-filled by Agent or paste manually
+              </Text>
+              <TextArea
+                rows={6}
+                placeholder={
+                  '{"name": "...", "description": "...", "config": {...}}'
+                }
+                value={resultInput}
+                onChange={(e) => setResultInput(e.target.value)}
+                style={{ marginTop: 4, fontFamily: 'monospace', fontSize: 12 }}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Done state */}
+        {step === 'done' && generatedResult && (
+          <>
+            <Alert
+              type="success"
+              icon={<CheckCircleOutlined />}
+              showIcon
+              message="Node instance config generated!"
+              description={`Name: ${generatedResult.name}. Config has ${Object.keys(generatedResult.config).length} fields.`}
+            />
+            <div>
+              <Text strong>JSON Result</Text>
+              <TextArea
+                rows={6}
+                value={resultInput}
+                onChange={(e) => setResultInput(e.target.value)}
+                style={{ marginTop: 4, fontFamily: 'monospace', fontSize: 12 }}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Agent error */}
+        {agentError && (
+          <Alert
+            type="error"
+            message="Generation failed"
+            description={agentError}
+            showIcon
+          />
+        )}
+
+        {/* Action buttons */}
+        <div style={{ textAlign: 'right' }}>
+          <Space>
+            <Button onClick={handleClose}>Cancel</Button>
+            {step === 'selectType' && (
+              <Button
+                type="primary"
+                disabled={!selectedNodeTypeId || !prompt.trim()}
+                loading={agentLoading}
+                onClick={handleGenerate}
+              >
+                Generate
+              </Button>
+            )}
+            {step === 'generating' && (
+              <Button
+                type="primary"
+                disabled={!resultInput.trim()}
+                onClick={handleApplyManualJson}
+              >
+                Apply JSON
+              </Button>
+            )}
+            {step === 'done' && (
+              <>
+                <Button
+                  onClick={() => {
+                    setStep('selectType');
+                    setGeneratedResult(null);
+                    setResultInput('');
+                  }}
+                >
+                  Re-generate
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    const parsed = tryParseNodeInstanceOutput(resultInput);
+                    if (parsed) {
+                      setGeneratedResult(parsed);
+                      handleConfirm();
+                    } else {
+                      message.error('Invalid JSON format');
+                    }
+                  }}
+                >
+                  Confirm &amp; Create
+                </Button>
+              </>
+            )}
+          </Space>
+        </div>
+      </Space>
+    </Modal>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/components/DynamicConfigForm.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { Form, Input, InputNumber, Switch, Select } from 'antd';
+
+const { TextArea } = Input;
+
+interface SchemaProperty {
+  type: string;
+  title?: string;
+  description?: string;
+  enum?: string[];
+  default?: any;
+  items?: { type: string; enum?: string[] };
+}
+
+interface ConfigSchema {
+  type?: string;
+  properties?: Record<string, SchemaProperty>;
+  required?: string[];
+}
+
+interface Props {
+  schema: ConfigSchema | null;
+  disabled?: boolean;
+}
+
+/**
+ * Renders Ant Design Form.Items dynamically based on a JSON Schema.
+ * Must be used inside a <Form> parent — it does not create its own Form instance.
+ * All fields are namespaced under "config" (e.g., Form field name = ["config", "fieldKey"]).
+ */
+export function DynamicConfigForm({ schema, disabled = false }: Props) {
+  if (!schema?.properties) {
+    return null;
+  }
+
+  const requiredFields = schema.required ?? [];
+
+  return (
+    <>
+      {Object.entries(schema.properties).map(([key, prop]) => {
+        const label = prop.title || key;
+        const isRequired = requiredFields.includes(key);
+
+        // Boolean → Switch
+        if (prop.type === 'boolean') {
+          return (
+            <Form.Item
+              key={key}
+              name={['config', key]}
+              label={label}
+              tooltip={prop.description}
+              valuePropName="checked"
+              rules={isRequired ? [{ required: true }] : undefined}
+            >
+              <Switch disabled={disabled} />
+            </Form.Item>
+          );
+        }
+
+        // Enum → Select
+        if (prop.enum) {
+          return (
+            <Form.Item
+              key={key}
+              name={['config', key]}
+              label={label}
+              tooltip={prop.description}
+              rules={
+                isRequired
+                  ? [{ required: true, message: `${label} is required` }]
+                  : undefined
+              }
+            >
+              <Select
+                disabled={disabled}
+                allowClear
+                options={prop.enum.map((v) => ({ label: v, value: v }))}
+              />
+            </Form.Item>
+          );
+        }
+
+        // Array → Select tags mode
+        if (prop.type === 'array') {
+          const enumOptions = prop.items?.enum;
+          return (
+            <Form.Item
+              key={key}
+              name={['config', key]}
+              label={label}
+              tooltip={prop.description}
+              rules={
+                isRequired
+                  ? [{ required: true, message: `${label} is required` }]
+                  : undefined
+              }
+            >
+              <Select
+                mode="tags"
+                disabled={disabled}
+                allowClear
+                options={enumOptions?.map((v) => ({ label: v, value: v }))}
+              />
+            </Form.Item>
+          );
+        }
+
+        // Number → InputNumber
+        if (prop.type === 'number' || prop.type === 'integer') {
+          return (
+            <Form.Item
+              key={key}
+              name={['config', key]}
+              label={label}
+              tooltip={prop.description}
+              rules={
+                isRequired
+                  ? [{ required: true, message: `${label} is required` }]
+                  : undefined
+              }
+            >
+              <InputNumber disabled={disabled} style={{ width: '100%' }} />
+            </Form.Item>
+          );
+        }
+
+        // String (default) → Input or TextArea
+        const isLongText =
+          prop.description?.includes('multiline') ||
+          key.toLowerCase().includes('body') ||
+          key.toLowerCase().includes('template');
+        return (
+          <Form.Item
+            key={key}
+            name={['config', key]}
+            label={label}
+            tooltip={prop.description}
+            rules={
+              isRequired
+                ? [{ required: true, message: `${label} is required` }]
+                : undefined
+            }
+          >
+            {isLongText ? (
+              <TextArea rows={3} disabled={disabled} />
+            ) : (
+              <Input disabled={disabled} />
+            )}
+          </Form.Item>
+        );
+      })}
+    </>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/components/NodeInstanceForm.tsx

@@ -0,0 +1,176 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  Modal,
+  Select,
+  Switch,
+  Typography,
+} from 'antd';
+import { ArrowLeftOutlined, RobotOutlined } from '@ant-design/icons';
+import type { FormInstance } from 'antd';
+import { DynamicConfigForm } from './DynamicConfigForm';
+import {
+  CreateNodeInstanceModal,
+  type AiGenerateResult,
+} from './CreateNodeInstanceModal';
+import type { WorkflowNodeType } from '../../types';
+
+const { Title } = Typography;
+const isDev = import.meta.env.DEV;
+
+interface NodeInstanceFormProps {
+  form: FormInstance;
+  nodeTypes: WorkflowNodeType[];
+  title: string;
+  submitText: string;
+  submitting: boolean;
+  disableNodeType?: boolean;
+  onSubmit: () => void;
+  onBack: () => void;
+}
+
+export function NodeInstanceForm({
+  form,
+  nodeTypes,
+  title,
+  submitText,
+  submitting,
+  disableNodeType,
+  onSubmit,
+  onBack,
+}: NodeInstanceFormProps) {
+  const [aiModalOpen, setAiModalOpen] = useState(false);
+
+  const selectedNodeTypeId = Form.useWatch('nodeTypeId', form);
+
+  const selectedSchema = useMemo(() => {
+    if (!selectedNodeTypeId) return null;
+    const nt = nodeTypes.find(
+      (t) => String(t.id) === String(selectedNodeTypeId),
+    );
+    return nt?.configSchema ?? null;
+  }, [selectedNodeTypeId, nodeTypes]);
+
+  function handleAiApply(data: AiGenerateResult) {
+    const currentName = form.getFieldValue('name');
+    const currentDesc = form.getFieldValue('description');
+    const currentConfig = form.getFieldValue('config');
+    const hasExistingValues = currentName || currentDesc || currentConfig;
+
+    if (hasExistingValues) {
+      Modal.confirm({
+        title: '覆盖确认',
+        content: 'AI 生成的内容将覆盖当前填写的内容，是否继续？',
+        okText: '确认覆盖',
+        cancelText: '取消',
+        onOk: () => applyAiData(data),
+      });
+    } else {
+      applyAiData(data);
+    }
+  }
+
+  function applyAiData(data: AiGenerateResult) {
+    form.setFieldsValue({
+      nodeTypeId: data.nodeTypeId ? String(data.nodeTypeId) : undefined,
+      name: data.name || undefined,
+      description: data.description || undefined,
+      config: data.config || undefined,
+    });
+  }
+
+  return (
+    <div style={{ background: '#f0f2f5', minHeight: 'calc(100vh - 64px)' }}>
+      <Card style={{ marginBottom: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Button type="text" icon={<ArrowLeftOutlined />} onClick={onBack}>
+              返回
+            </Button>
+            <Title level={4} style={{ margin: 0 }}>
+              {title}
+            </Title>
+          </div>
+          {isDev && (
+            <Button
+              type="primary"
+              icon={<RobotOutlined />}
+              onClick={() => setAiModalOpen(true)}
+            >
+              AI 自动生成
+            </Button>
+          )}
+        </div>
+      </Card>
+
+      <Card style={{ padding: '24px 32px' }}>
+        <Form form={form} layout="vertical" style={{ maxWidth: 600 }}>
+          <Form.Item
+            name="nodeTypeId"
+            label="Node Type"
+            rules={[{ required: true, message: 'Please select a node type' }]}
+          >
+            <Select
+              placeholder="Select node type"
+              disabled={disableNodeType}
+              showSearch
+              optionFilterProp="label"
+              options={nodeTypes.map((nt) => ({
+                label: `${nt.label} (${nt.category})`,
+                value: String(nt.id),
+              }))}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="name"
+            label="Instance Name"
+            rules={[{ required: true, message: 'Please enter a name' }]}
+          >
+            <Input placeholder="e.g. Send Slack to #general" />
+          </Form.Item>
+
+          <Form.Item name="description" label="Description">
+            <Input.TextArea rows={2} placeholder="Optional description" />
+          </Form.Item>
+
+          <Form.Item name="isEnabled" label="Enabled" valuePropName="checked">
+            <Switch />
+          </Form.Item>
+
+          {selectedSchema && (
+            <>
+              <Title level={5} style={{ color: '#595959' }}>
+                Configuration
+              </Title>
+              <DynamicConfigForm schema={selectedSchema} />
+            </>
+          )}
+
+          <div style={{ marginTop: 24, display: 'flex', gap: 12 }}>
+            <Button onClick={onBack}>Cancel</Button>
+            <Button type="primary" loading={submitting} onClick={onSubmit}>
+              {submitText}
+            </Button>
+          </div>
+        </Form>
+      </Card>
+
+      <CreateNodeInstanceModal
+        open={aiModalOpen}
+        nodeTypes={nodeTypes}
+        onClose={() => setAiModalOpen(false)}
+        onApply={handleAiApply}
+      />
+    </div>
+  );
+}