fix(web): workflow statement support variable

web/src/views/Workflow/components/Chat/Chat.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-06 21:10:56 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-02 18:01:09
+ * @Last Modified time: 2026-04-07 17:06:02
  */
 /**
  * Workflow Chat Component
@@ -40,6 +40,7 @@ import ChatToolbar from '@/components/Chat/ChatToolbar'
 import type { ChatToolbarRef } from '@/components/Chat/ChatToolbar'
 import Runtime from './Runtime';
 import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
+import { replaceVariables } from '@/views/ApplicationConfig/Agent';
 
 const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null; features?: FeaturesConfigForm }>(({
   appId, graphRef, features
@@ -419,6 +420,22 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: Work
     handleClose
   }));
 
+  useEffect(() => {
+    const opening_statement = features?.opening_statement
+
+    if (opening_statement?.enabled && opening_statement?.statement && opening_statement?.statement.trim() !== '') {
+      const assistantMsg: ChatItem = {
+        role: 'assistant',
+        content: replaceVariables(opening_statement.statement, variables as any),
+        meta_data: {
+          suggested_questions: opening_statement?.suggested_questions
+        }
+      }
+      console.log('variables', assistantMsg)
+      setChatList(prev => [assistantMsg, ...prev.slice(1)])
+    }
+  }, [chatList.length, features?.opening_statement, variables])
+
   return (
     <RbDrawer
       title={<Flex align="center" gap={10}>

web/src/views/Workflow/components/Editor/index.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2025-12-23 16:22:51 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-03 20:44:16
+ * @Last Modified time: 2026-04-07 16:29:36
  */
 import { type FC, useState, useMemo } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -57,7 +57,6 @@ const Editor: FC<LexicalEditorProps> =({
   language = 'string',
   height,
   className,
-  waitForInit = false,
 }) => {
   console.log('Editor value', value)
   const [_count, setCount] = useState(0);
@@ -149,10 +148,10 @@ const Editor: FC<LexicalEditorProps> =({
         />
         <HistoryPlugin />
         <CommandPlugin />
-        <AutocompletePlugin options={options} enableJinja2={false} />
+        <AutocompletePlugin options={options} />
         <CharacterCountPlugin setCount={setCount} onChange={onChange} />
-        <InitialValuePlugin value={value} options={options} enableLineNumbers={false} />
-        <BlurPlugin enableJinja2={false} />
+        <InitialValuePlugin value={value} options={options} />
+        <BlurPlugin />
       </div>
     </LexicalComposer>
   );

web/src/views/Workflow/components/Editor/nodes/VariableNode.tsx

@@ -33,6 +33,18 @@ const VariableComponent: React.FC<{ nodeKey: NodeKey; data: Suggestion }> = ({
     setSelected(!isSelected);
   };
   
+  if (!data.nodeData?.name) {
+    return (
+      <span
+        onClick={handleClick}
+        className="rb:inline rb:cursor-pointer rb:text-[#171719]"
+        contentEditable={false}
+      >
+        {data.value}
+      </span>
+    );
+  }
+
   return (
     <span
       onClick={handleClick}

web/src/views/Workflow/components/Editor/plugin/AutocompletePlugin.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2025-12-23 16:22:51 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-04-02 17:12:41
+ * @Last Modified time: 2026-04-07 16:51:04
  */
 import { useEffect, useLayoutEffect, useState, useRef, type FC } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -168,7 +168,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
   // Group suggestions by node ID
   const groupedSuggestions = options.reduce((groups: Record<string, Suggestion[]>, suggestion) => {
     const { nodeData } = suggestion
-    const nodeId = nodeData.id as string;
+    const nodeId = nodeData?.id as string;
     if (!groups[nodeId]) {
       groups[nodeId] = [];
     }
@@ -291,67 +291,67 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
       }}
     >
       <div className="rb:py-1 rb:min-w-70 rb:max-h-50 rb:overflow-y-auto">
-      <Flex vertical gap={12}>
-        {Object.entries(groupedSuggestions).map(([nodeId, nodeOptions]) => {
-          const nodeName = nodeOptions[0]?.nodeData?.name || nodeId;
-          const nodeIcon = nodeOptions[0]?.nodeData?.icon;
-          return (
-            <div key={nodeId}>
-              <Flex align="center" gap={4} className="rb:px-3! rb:text-[12px] rb:py-1.25! rb:font-medium rb:text-[#5B6167]">
-                {nodeIcon && <div className={`rb:size-3 rb:bg-cover ${nodeIcon}`} />}
-                {nodeName}
-              </Flex>
-              {nodeOptions.map((option) => {
-                const globalIndex = flatOptions.indexOf(option);
-                const isExpanded = expandedParent?.key === option.key;
-                const hasChildren = !!option.children?.length;
-                return (
-                  <Flex
-                    key={option.key}
-                    ref={(el) => { if (el) itemRefs.current.set(option.key, el); }}
-                    data-selected={selectedIndex === globalIndex}
-                    className="rb:pl-6! rb:pr-3! rb:py-2!"
-                    align="center"
-                    justify="space-between"
-                    style={{
-                      cursor: option.disabled ? 'not-allowed' : 'pointer',
-                      background: (selectedIndex === globalIndex || isExpanded) ? '#f0f8ff' : 'white',
-                      opacity: option.disabled ? 0.5 : 1,
-                    }}
-                    onClick={() => {
-                      if (option.disabled) return;
-                      insertMention(option);
-                    }}
-                    onMouseEnter={() => {
-                      setSelectedIndex(globalIndex);
-                      if (hasChildren) {
-                        const el = itemRefs.current.get(option.key);
-                        if (el && popupRef.current) {
-                          const elRect = el.getBoundingClientRect();
-                          const popupRect = popupRef.current.getBoundingClientRect();
-                          setChildPanelTop(calcChildPanelTop(elRect, popupRect));
+        <Flex vertical gap={12}>
+          {Object.entries(groupedSuggestions).map(([nodeId, nodeOptions]) => {
+            const nodeName = nodeOptions[0]?.nodeData?.name || nodeId;
+            const nodeIcon = nodeOptions[0]?.nodeData?.icon;
+            return (
+              <div key={nodeId}>
+                {nodeName !== 'undefined' && <Flex align="center" gap={4} className="rb:px-3! rb:text-[12px] rb:py-1.25! rb:font-medium rb:text-[#5B6167]">
+                  {nodeIcon && <div className={`rb:size-3 rb:bg-cover ${nodeIcon}`} />}
+                  {nodeName}
+                </Flex>}
+                {nodeOptions.map((option) => {
+                  const globalIndex = flatOptions.indexOf(option);
+                  const isExpanded = expandedParent?.key === option.key;
+                  const hasChildren = !!option.children?.length;
+                  return (
+                    <Flex
+                      key={option.key}
+                      ref={(el) => { if (el) itemRefs.current.set(option.key, el); }}
+                      data-selected={selectedIndex === globalIndex}
+                      className="rb:pl-6! rb:pr-3! rb:py-2!"
+                      align="center"
+                      justify="space-between"
+                      style={{
+                        cursor: option.disabled ? 'not-allowed' : 'pointer',
+                        background: (selectedIndex === globalIndex || isExpanded) ? '#f0f8ff' : 'white',
+                        opacity: option.disabled ? 0.5 : 1,
+                      }}
+                      onClick={() => {
+                        if (option.disabled) return;
+                        insertMention(option);
+                      }}
+                      onMouseEnter={() => {
+                        setSelectedIndex(globalIndex);
+                        if (hasChildren) {
+                          const el = itemRefs.current.get(option.key);
+                          if (el && popupRef.current) {
+                            const elRect = el.getBoundingClientRect();
+                            const popupRect = popupRef.current.getBoundingClientRect();
+                            setChildPanelTop(calcChildPanelTop(elRect, popupRect));
+                          }
+                          setExpandedParent(option);
+                        } else {
+                          setExpandedParent(null);
                         }
-                        setExpandedParent(option);
-                      } else {
-                        setExpandedParent(null);
-                      }
-                    }}
-                  >
-                    <Space size={4}>
-                      <span className="rb:text-[#155EEF]">{option.isContext ? '📄' : `{x}`}</span>
-                      <span>{option.label}</span>
-                    </Space>
-                    <Space size={4}>
-                      {option.dataType && <span className="rb:text-[#5B6167]">{option.dataType}</span>}
-                      {hasChildren && <span className="rb:text-[#5B6167] rb:ml-1">›</span>}
-                    </Space>
-                  </Flex>
-                );
-              })}
-            </div>
-          );
-        })}
-      </Flex>
+                      }}
+                    >
+                      {option.label && <Space size={4}>
+                        <span className="rb:text-[#155EEF]">{option.isContext ? '📄' : `{x}`}</span>
+                        <span>{option.label}</span>
+                      </Space>}
+                      <Space size={4}>
+                        {option.dataType && <span className="rb:text-[#5B6167]">{option.dataType}</span>}
+                        {hasChildren && <span className="rb:text-[#5B6167] rb:ml-1">›</span>}
+                      </Space>
+                    </Flex>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </Flex>
       </div>
       {/* Child variables panel - floats to the left */}
       {expandedParent?.children?.length && (