Merge branch 'feat/snippet-fe' into deploy/dev

web/app/components/snippets/hooks/__tests__/use-create-snippet-from-selection.spec.tsx

@@ -219,4 +219,57 @@ describe('useCreateSnippetFromSelection', () => {
       [SNIPPET_INPUT_FIELD_NODE_ID, 'workflow_id'],
     ])
   })
+
+  it('should keep #context# prompt placeholders when creating a snippet from workflow selection', () => {
+    const selectedNodes = [
+      createNode('llm', {
+        type: BlockEnum.LLM,
+        context: {
+          enabled: true,
+          variable_selector: ['code', 'result'],
+        },
+        prompt: '{{#context#}} {{#code.summary#}}',
+      }),
+    ]
+    const onClose = vi.fn()
+
+    const { result } = renderHook(() => useCreateSnippetFromSelection({
+      edges: [],
+      selectedNodes,
+      onClose,
+    }))
+
+    act(() => {
+      result.current.handleOpenCreateSnippet()
+    })
+
+    const dialogProps = (result.current.createSnippetDialog as ReactElement<DialogProps>).props
+    const nodeData = dialogProps.selectedGraph?.nodes[0]?.data as {
+      context?: {
+        enabled: boolean
+        variable_selector: string[]
+      }
+      prompt?: string
+    }
+
+    expect(dialogProps.inputFields).toEqual([
+      {
+        label: 'result',
+        variable: 'result',
+        type: PipelineInputVarType.textInput,
+        required: true,
+      },
+      {
+        label: 'summary',
+        variable: 'summary',
+        type: PipelineInputVarType.textInput,
+        required: true,
+      },
+    ])
+    expect(nodeData.context).toEqual({
+      enabled: true,
+      variable_selector: [SNIPPET_INPUT_FIELD_NODE_ID, 'result'],
+    })
+    expect(nodeData.prompt).toBe(`{{#context#}} {{#${SNIPPET_INPUT_FIELD_NODE_ID}.summary#}}`)
+  })
 })

web/app/components/snippets/hooks/use-create-snippet-from-selection.tsx

@@ -36,6 +36,11 @@ const isValueSelectorList = (value: unknown[]) => {
   return value.length > 0 && value.every(isValueSelector)
 }
 
+const isContextPlaceholderSelector = (selector: ValueSelector) => {
+  return (selector.length === 1 && selector[0] === 'context')
+    || selector.at(-1) === '#context#'
+}
+
 const getCenteredViewport = (nodes: Node[]) => {
   if (!nodes.length)
     return DEFAULT_SNIPPET_VIEWPORT
@@ -66,7 +71,7 @@ const collectSelectorsFromText = (value: string, selectors: ValueSelector[]) =>
       continue
 
     const selector = variablePath.split('.').filter(Boolean)
-    if (selector.length > 0)
+    if (selector.length > 0 && !isContextPlaceholderSelector(selector))
       selectors.push(selector)
   }
 }
@@ -113,6 +118,9 @@ const isExternalVariableSelector = (
   if (nodeId.startsWith('$'))
     return false
 
+  if (isContextPlaceholderSelector(selector))
+    return false
+
   if (selectedNodeIds.has(nodeId))
     return false