fix(variable-extraction): streamline variable usage analysis and enhance language consistency in templates

- Removed the variable usage analysis logic from the buildAppPublishPrompt function, simplifying the process by directly using all variables from canvasData.
- Updated template generation guidelines to emphasize the importance of maintaining language consistency with Canvas Nodes.
- Enhanced the ShareSettings component to provide clearer tooltips based on skill response node availability.
- Improved the WorkflowRunForm to validate template variables and ensure all required fields are filled before running the workflow.
- Ensured compliance with coding standards, including the use of optional chaining and nullish coalescing for safer property access.
- Wrapped components with React.memo to optimize performance and prevent unnecessary re-renders.

Author: anthhub

apps/api/src/modules/variable-extraction/app-publish-prompt.ts

@@ -32,16 +32,8 @@ export function buildAppPublishPrompt(
   canvasContext: CanvasContext,
   historicalData?: HistoricalData,
 ): string {
-  // Analyze which variables are actually used in canvas nodes
-  const usedVariables = analyzeVariableUsage(canvasData.nodes, canvasData.variables);
-
-  // Filter variables to only include those that are actually used
-  const filteredVariables = canvasData.variables.filter((variable) =>
-    usedVariables.has(variable.name),
-  );
-
   const nodesText = buildNodesText(canvasData.nodes);
-  const variablesText = buildVariablesText(filteredVariables);
+  const variablesText = buildVariablesText(canvasData.variables);
   const canvasContextText = buildCanvasContextText(canvasContext);
   const historicalContext = historicalData ? buildHistoricalContext(historicalData) : '';
 
@@ -74,34 +66,45 @@ ${historicalContext ? `### Historical Learning Context\n${historicalContext}` :
 
 ## Template Generation Guidelines
 
-### 1. Natural Language Conversion
+### 1. Language Consistency (CRITICAL)
+- **MUST maintain the same language as used in Canvas Nodes and Prompts**
+- If Canvas Nodes contain Chinese text, generate templates in Chinese
+- If Canvas Nodes contain English text, generate templates in English
+- If Canvas Nodes contain mixed languages, follow the primary language pattern
+- **Language Detection**: Analyze the Canvas Nodes content to determine the user's preferred language
+- **Consistency Requirement**: All template fields (title, description, content) must use the same language as the Canvas Nodes
+
+### 2. Natural Language Conversion
 - Convert technical workflow descriptions into user-friendly language
 - Use clear, actionable language that explains what the workflow does
 - Focus on user benefits and outcomes
+- **Maintain language consistency with Canvas Nodes**
 
-### 2. Variable Integration
+### 3. Variable Integration
 - **CRITICAL**: Only include variables that are actually used in Canvas Nodes and Prompts
 - Replace specific values with {{variable_name}} placeholders
 - Ensure all variables are properly represented in the template
 - Maintain semantic meaning while making it parameterizable
 - **Variable Usage Validation**: Only variables that appear in {{variable_name}} format within the Canvas Nodes should be included in the template
 
-### 3. Template Structure
+### 4. Template Structure
 - Start with a clear description of what the workflow accomplishes
 - Explain what inputs are needed (variables)
 - Describe the expected output or result
 - Use conversational, helpful tone
+- **Maintain language consistency with Canvas Nodes**
 
-### 4. Variable Type Handling
+### 5. Variable Type Handling
 - **string**: Use descriptive placeholders like "{{topic}}" or "{{style}}"
 - **resource**: Use file-related placeholders like "{{upload_file}}" or "{{document}}"
 - **option**: Use selection-related placeholders like "{{format}}" or "{{mode}}"
 
-### 5. Quality Standards
+### 6. Quality Standards
 - Templates should be self-explanatory
 - Variables should have clear, descriptive names
 - Maintain workflow functionality while improving usability
 - Ensure consistency with existing variable names
+- **Language consistency is mandatory - all output must match Canvas Nodes language**
 
 ## Output Format Requirements
 
@@ -145,17 +148,19 @@ ${historicalContext ? `### Historical Learning Context\n${historicalContext}` :
 \`\`\`
 
 ## Key Principles
-1. **Clarity**: Users should immediately understand what the workflow does
-2. **Simplicity**: Avoid technical jargon, use everyday language
-3. **Completeness**: Include all necessary variables and context
-4. **Actionability**: Users should know exactly what to provide and expect
-5. **Professionalism**: Maintain a helpful, trustworthy tone
-6. **Variable Usage Validation**: Only include variables that are actually referenced in Canvas Nodes with {{variable_name}} format
+1. **Language Consistency**: **CRITICAL** - All template fields must use the same language as Canvas Nodes
+2. **Clarity**: Users should immediately understand what the workflow does
+3. **Simplicity**: Avoid technical jargon, use everyday language
+4. **Completeness**: Include all necessary variables and context
+5. **Actionability**: Users should know exactly what to provide and expect
+6. **Professionalism**: Maintain a helpful, trustworthy tone
+7. **Variable Usage Validation**: Only include variables that are actually referenced in Canvas Nodes with {{variable_name}} format
 
 ## Critical Focus: Workflow Publishing Template String
 
 The **"content"** field in the template object is the most important output - this is the **workflow publishing template string** that will be used by users. It must:
 
+- **Language Consistency**: **CRITICAL** - Must use the same language as Canvas Nodes
 - **Be Natural and Conversational**: Sound like a helpful assistant explaining what they'll do
 - **Include Only Used Variables**: Only variables that are actually referenced in Canvas Nodes with {{variable_name}} format should be included
 - **Maintain Original Intent**: Preserve the user's original goal and requirements
@@ -205,43 +210,10 @@ ${APP_PUBLISH_EXAMPLES}
    - Only variables that are actually used in Canvas Nodes should be included
    - Templates should maintain the original workflow intent
    - Language should be professional yet approachable
+   - **Language Consistency**: **CRITICAL** - All template fields must match the language used in Canvas Nodes
    - **Variable Usage Validation**: Verify that all {{variable_name}} placeholders in the template correspond to variables actually referenced in Canvas Nodes`;
 }
 
-/**
- * Analyze which variables are actually used in canvas nodes
- * Returns a set of variable names that are referenced in node content
- */
-function analyzeVariableUsage(nodes: CanvasNode[], variables: WorkflowVariable[]): Set<string> {
-  const usedVariables = new Set<string>();
-
-  if (!nodes?.length || !variables?.length) {
-    return usedVariables;
-  }
-
-  // Get all variable names
-  const variableNames = variables.map((v) => v.name);
-
-  // Check each node for variable references
-  for (const node of nodes) {
-    const content = node.data?.content || node.content || '';
-    if (typeof content === 'string' && content.length > 0) {
-      // Check for {{variable_name}} pattern
-      const variablePattern = /\{\{([^}]+)\}\}/g;
-      let match: RegExpExecArray | null = variablePattern.exec(content);
-      while (match !== null) {
-        const variableName = match[1]?.trim();
-        if (variableName && variableNames.includes(variableName)) {
-          usedVariables.add(variableName);
-        }
-        match = variablePattern.exec(content);
-      }
-    }
-  }
-
-  return usedVariables;
-}
-
 /**
  * Build nodes text - format canvas nodes into readable description
  */

packages/ai-workspace-common/src/components/canvas/top-toolbar/share-settings.tsx

@@ -393,7 +393,13 @@ const ShareSettings = React.memo(({ canvasId, canvasTitle }: ShareSettingsProps)
             {t('shareContent.publishTemplate')}
           </div>
           <Tooltip
-            title={toolbarLoading ? t('shareContent.waitForAgentsToFinish') : undefined}
+            title={
+              toolbarLoading
+                ? t('shareContent.waitForAgentsToFinish')
+                : !skillResponseNodes?.length
+                  ? t('shareContent.noSkillResponseNodes')
+                  : undefined
+            }
             placement="top"
           >
             <Button

packages/ai-workspace-common/src/components/canvas/workflow-run/workflow-run-form.tsx

@@ -1,6 +1,6 @@
 import type { WorkflowVariable, WorkflowExecutionStatus } from '@refly/openapi-schema';
 import { useTranslation } from 'react-i18next';
-import { Button, Input, Select, Form, Typography } from 'antd';
+import { Button, Input, Select, Form, Typography, message } from 'antd';
 import { Play, Copy } from 'refly-icons';
 import { IconShare } from '@refly-packages/ai-workspace-common/components/common/icon';
 import { useState, useEffect, useCallback, useMemo } from 'react';
@@ -276,6 +276,29 @@ export const WorkflowRunForm = ({
     [refreshFile, variableValues, handleValueChange, form, workflowVariables],
   );
 
+  // Initialize template variables when templateContent changes
+  useEffect(() => {
+    if (templateContent) {
+      // Extract variables from template content
+      const variableRegex = /\{\{([^}]+)\}\}/g;
+      const templateVariableNames = new Set<string>();
+      let match: RegExpExecArray | null;
+
+      match = variableRegex.exec(templateContent);
+      while (match !== null) {
+        templateVariableNames.add(match[1].trim());
+        match = variableRegex.exec(templateContent);
+      }
+
+      // Filter workflowVariables to only include those mentioned in template
+      const relevantVariables = workflowVariables.filter((variable) =>
+        templateVariableNames.has(variable.name),
+      );
+
+      setTemplateVariables(relevantVariables);
+    }
+  }, [templateContent, workflowVariables]);
+
   // Update form values when workflowVariables change
   useEffect(() => {
     const newValues = convertVariableToFormValue();
@@ -297,12 +320,48 @@ export const WorkflowRunForm = ({
     }
 
     try {
-      // Validate form before running
-      await form.validateFields();
+      let newVariables: WorkflowVariable[] = [];
+
+      if (templateContent) {
+        // Validate templateVariables values
+        const hasInvalidValues = templateVariables.some((variable) => {
+          if (!variable.value || variable.value.length === 0) {
+            return true;
+          }
+
+          return variable.value.every((val) => {
+            if (variable.variableType === 'string') {
+              return !val.text || val.text.trim() === '';
+            }
+            if (variable.variableType === 'option') {
+              return !val.text || val.text.trim() === '';
+            }
+            if (variable.variableType === 'resource') {
+              return !val.resource || !val.resource.storageKey;
+            }
+            return true;
+          });
+        });
 
-      // If validation passes, proceed with running
-      const newVariables = convertFormValueToVariable();
-      console.log('newVariables', newVariables);
+        if (hasInvalidValues) {
+          // Show validation error message
+          message.warning(
+            t(
+              'canvas.workflow.run.validationError',
+              'Please fill in all required fields before running the workflow',
+            ),
+          );
+          return;
+        }
+
+        newVariables = templateVariables;
+      } else {
+        // Validate form before running
+        await form.validateFields();
+
+        // If validation passes, proceed with running
+        newVariables = convertFormValueToVariable();
+      }
 
       // Set running state - use external callback if provided, otherwise use internal state
       if (onRunningChange) {
@@ -475,7 +534,7 @@ export const WorkflowRunForm = ({
   }, []);
 
   return (
-    <div className={cn('w-full h-full gap-3 flex flex-col', className)}>
+    <div className={cn('w-full h-full gap-3 flex flex-col rounded-2xl', className)}>
       {
         <>
           {templateContent ? (
@@ -534,7 +593,7 @@ export const WorkflowRunForm = ({
                   : t('canvas.workflow.run.run') || 'Run'}
               </Button>
 
-              {onCopyWorkflow && (
+              {onCopyWorkflow && workflowApp?.remixEnabled && (
                 <Button
                   className="h-9 sm:h-10 text-sm sm:text-base"
                   type="default"

packages/i18n/src/en-US/ui.ts

@@ -896,6 +896,7 @@ const translations = {
     publish: 'Publish',
     publishTemplateTooltip: 'Publish canvas as template',
     waitForAgentsToFinish: 'Please wait for all Agents to finish running before publishing',
+    noSkillResponseNodes: 'Please add Agent nodes to the canvas before publishing',
     latestPublishedApp: 'Latest Published App',
     linkShare: 'Link Share',
     updateCanvasPermissionSuccess: 'Update canvas permission successfully',

packages/i18n/src/zh-Hans/ui.ts

@@ -891,6 +891,7 @@ const translations = {
     publish: '发布',
     publishTemplateTooltip: '将画布发布为模板',
     waitForAgentsToFinish: '请等待所有 Agent 运行结束后再发布',
+    noSkillResponseNodes: '请先在画布中添加 Agent 节点后再发布',
     latestPublishedApp: '最新发布的应用',
     linkShare: '链接分享',
     updateCanvasPermissionSuccess: '更新画布权限成功',