Turn copilot into node

frontend/src/lib/components/flows/map/FlowCopilotButton.svelte

@@ -15,7 +15,7 @@
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
 </script>
 
-<div class={twMerge('absolute left-1/2 transform -translate-x-1/2 z-10', className)}>
+<div class={twMerge('', className)}>
 	<Popover>
 		<div class={openNoCopilot ? 'z-10' : ''}>
 			<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -37,7 +37,7 @@
 	import { Alert, Drawer } from '../common'
 	import Button from '../common/button/Button.svelte'
 	import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte'
-
+	import CopilotNode from './renderers/nodes/CopilotNode.svelte'
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
 	export let failureModule: FlowModule | undefined = undefined
@@ -223,7 +223,8 @@
 		branchOneStart: BranchOneStart,
 		branchOneEnd: BranchAllEndNode,
 		noBranch: NoBranchNode,
-		trigger: TriggersNode
+		trigger: TriggersNode,
+		copilot: CopilotNode
 	} as any
 
 	const edgeTypes = {

frontend/src/lib/components/graph/graphBuilder.ts

@@ -158,6 +158,23 @@ export default function graphBuilder(
 			}
 		}
 
+		const copilotNode: Node = {
+			id: 'Copilot',
+			position: { x: -1, y: -1 },
+			type: 'copilot',
+			data: {}
+		}
+		nodes.push(copilotNode)
+		if (!!preprocessorModule) {
+			addEdge('Copilot', preprocessorModule.id, {
+				type: 'hiddenedge'
+			})
+		} else {
+			addEdge('Copilot', 'Input', {
+				type: 'hiddenedge'
+			})
+		}
+
 		if (extra.path) {
 			const triggerNode: Node = {
 				id: 'Trigger',
@@ -173,16 +190,9 @@ export default function graphBuilder(
 			}
 
 			nodes.push(triggerNode)
-
-			if (!!preprocessorModule) {
-				addEdge('Trigger', preprocessorModule.id, {
-					type: 'hiddenedge'
-				})
-			} else {
-				addEdge('Trigger', 'Input', {
-					type: 'hiddenedge'
-				})
-			}
+			addEdge('Trigger', 'Copilot', {
+				type: 'hiddenedge'
+			})
 		}
 
 		const resultNode: Node = {

frontend/src/lib/components/graph/renderers/nodes/CopilotNode.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import NodeWrapper from './NodeWrapper.svelte'
+	import FlowCopilotButton from '$lib/components/flows/map/FlowCopilotButton.svelte'
+	import { NODE } from '../../util'
+</script>
+
+<NodeWrapper wrapperClass="shadow-none">
+	<div style={`width: ${NODE.width}px;`}>
+		<FlowCopilotButton />
+	</div>
+</NodeWrapper>

frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte

@@ -8,7 +8,6 @@
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import { twMerge } from 'tailwind-merge'
-	import FlowCopilotButton from '$lib/components/flows/map/FlowCopilotButton.svelte'
 
 	export let data: {
 		insertable: boolean
@@ -24,9 +23,6 @@
 </script>
 
 <NodeWrapper let:darkMode>
-	{#if data.insertable && !data.disableAi && !data.hasPreprocessor}
-		<FlowCopilotButton className="-top-[4.25rem]" />
-	{/if}
 	{#if data.insertable && !data.hasPreprocessor}
 		<div class="absolute -top-8 left-1/2 transform -translate-x-1/2 z-10">
 			<button

frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte

@@ -74,7 +74,7 @@
 </script>
 
 {#if isEditor}
-	<div style={`width: ${NODE.width}px; margin-top: -24px;`}>
+	<div style={`width: ${NODE.width}px;`}>
 		<div class="flex flex-row mx-auto w-min">
 			<button
 				class="flex flex-row gap-2 px-2 border p-1 rounded-md bg-surface shadow-md items-center {$selectedId?.startsWith(