windmill/frontend/src/lib/components/flows/map/FlowStickyNode.svelte

<script lang="ts">
	import type { FlowEditorContext } from '../types'
	import type { FlowDiffManager } from '../flowDiffManager.svelte'
	import { getContext } from 'svelte'
	import { Badge } from '$lib/components/common'
	import { DollarSign, Settings, StickyNote } from 'lucide-svelte'
	import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte'
	import AIButton from '$lib/components/copilot/chat/AIButton.svelte'
	import Popover from '$lib/components/Popover.svelte'
	import Button from '$lib/components/common/button/Button.svelte'
	import { AIBtnClasses } from '$lib/components/copilot/chat/AIButtonStyle'
	import OpenInSessionButton, {
		type OpenInSessionSource
	} from '$lib/components/sessions/OpenInSessionButton.svelte'

	interface Props {
		disableSettings?: boolean
		disableStaticInputs?: boolean
		smallErrorHandler: boolean
		aiChatOpen?: boolean
		showFlowAiButton?: boolean
		toggleAiChat?: () => void
		sessionOpen?: OpenInSessionSource
		noteMode?: boolean
		toggleNoteMode?: () => void
		disableAi?: boolean
		diffManager?: FlowDiffManager
		compact?: boolean
	}

	let {
		disableSettings,
		disableStaticInputs,
		smallErrorHandler,
		aiChatOpen,
		showFlowAiButton,
		toggleAiChat,
		sessionOpen,
		noteMode,
		toggleNoteMode,
		disableAi,
		diffManager,
		compact = false
	}: Props = $props()

	const { selectionManager, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
	const selectedId = $derived(selectionManager.getSelectedId())
</script>

<div class="flex flex-row gap-2 p-1 rounded-md bg-surface">
	{#if !disableSettings}
		<Popover>
			<Button
				unifiedSize="sm"
				wrapperClasses={compact ? undefined : 'min-w-36'}
				startIcon={{ icon: Settings }}
				selected={selectedId?.startsWith('settings')}
				variant="default"
				title="Settings"
				iconOnly={compact && !flowStore.val.value.same_worker}
				onClick={() => selectionManager.selectId('settings')}
			>
				{#if !compact}
					Settings
				{/if}
				{#if flowStore.val.value.same_worker}
					<Badge color="blue" wrapperClass="max-h-[18px]">./shared</Badge>
				{/if}
			</Button>
			{#snippet text()}
				Settings
			{/snippet}
		</Popover>
	{/if}
	<Popover>
		<FlowErrorHandlerItem
			{disableAi}
			small={smallErrorHandler}
			{compact}
			{diffManager}
			on:generateStep
		/>
		{#snippet text()}
			Error Handler
		{/snippet}
	</Popover>
	{#if !disableStaticInputs}
		<Popover>
			<Button
				wrapperClasses="h-full"
				unifiedSize="sm"
				startIcon={{ icon: DollarSign }}
				selected={selectedId === 'constants'}
				variant="default"
				iconOnly
				onClick={() => selectionManager.selectId('constants')}
			/>
			{#snippet text()}
				Environment Variables
			{/snippet}
		</Popover>
	{/if}
	{#if showFlowAiButton}
		<OpenInSessionButton source={sessionOpen} deferToHeader>
			{#snippet fallback()}
				<AIButton
					label="Open AI chat"
					togglePanel={() => {
						toggleAiChat?.()
					}}
					btnClasses={AIBtnClasses(aiChatOpen ? 'selected' : 'default')}
				/>
			{/snippet}
		</OpenInSessionButton>
	{/if}
	<Popover>
		<Button
			onclick={() => toggleNoteMode?.()}
			iconOnly
			variant="default"
			unifiedSize="sm"
			startIcon={{ icon: StickyNote }}
			selected={noteMode}
		></Button>
		{#snippet text()}
			{noteMode ? 'Exit note mode' : 'Add sticky notes'}
		{/snippet}
	</Popover>
</div>