Files
windmill/frontend/src/lib/components/flows/content/GenAiQuick.svelte
T
GuilhemandClaude Opus 5 aa91619bb6 fix: flow step picker layout and single hover/keyboard highlight (#10488)
* fix: keep flow step picker rows on one line and highlight only one

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: restore hover on standalone picker rows and drop phantom ai slots

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: drop inert picker resize and align hub rows with workspace rows

The step picker popover carried `!resize` but computes `overflow: visible`, so CSS
`resize` never applied and the handle did nothing. Dropping it also pins the inner
height at 464px, keeping `displayPath` off everywhere except the content-sized
trigger picker.

Hub rows there rendered summary and path inside a fixed 28px button; give them the
same `h-auto min-h-7 py-1` the workspace rows got. Guard `hover:bg-transparent` on
`onHover` in both pickers so all three agree, and drop the unconditional `title` on
TopLevelNode, which put a native tooltip on every kind button.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* fix: keep GenAiQuick's CSS hover when it is not wired into the shared index

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-05 09:28:13 +02:00

45 lines
1.0 KiB
Svelte

<script lang="ts">
import { createBubbler } from 'svelte/legacy'
const bubble = createBubbler()
import { Wand2 } from 'lucide-svelte'
import { createEventDispatcher } from 'svelte'
interface Props {
funcDesc: string
selected: boolean
lang: string
onHover?: () => void
}
let { funcDesc, selected, lang, onHover = undefined }: Props = $props()
const dispatch = createEventDispatcher()
const onKeyDown = (e: KeyboardEvent) => {
if (selected && e.key === 'Enter') {
e.preventDefault()
dispatch('click')
}
}
</script>
<svelte:window onkeydown={onKeyDown} />
<button
class="px-3 py-2 gap-2 w-full text-left flex flex-row items-center transition-all rounded-md {selected
? 'bg-surface-hover'
: onHover
? ''
: 'hover:bg-surface-hover'}"
onclick={bubble('click')}
onmousemove={() => onHover?.()}
>
<Wand2 size={14} class="text-ai" />
<span class="grow truncate text-left text-2xs text-primary font-normal">
Generate "{funcDesc}" in {lang}
</span>
{#if selected}
<kbd class="!text-xs">&crarr;</kbd>
{/if}
</button>