From 7753c44ef15981049851bd52a5de985229d7e2ca Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 6 May 2025 11:17:58 +0100 Subject: [PATCH 1/4] Fix issue where clicking icon was clearing ai prompt --- .../builder/src/components/common/CodeEditor/AIGen.svelte | 7 +++---- packages/builder/src/components/common/ai/AIInput.svelte | 8 +++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/components/common/CodeEditor/AIGen.svelte b/packages/builder/src/components/common/CodeEditor/AIGen.svelte index 1e2593bb62..0b98b76c88 100644 --- a/packages/builder/src/components/common/CodeEditor/AIGen.svelte +++ b/packages/builder/src/components/common/CodeEditor/AIGen.svelte @@ -26,11 +26,10 @@ const thresholdExpansionWidth = 350 - $: expanded = + $: isExpandedOnly = expandedOnly || (parentWidth !== null && parentWidth > thresholdExpansionWidth) - ? true - : expanded + $: expanded = isExpandedOnly || expanded async function generateJs(prompt: string) { promptText = "" @@ -108,7 +107,7 @@ bind:expanded bind:value={inputValue} readonly={!!suggestedCode} - {expandedOnly} + expandedOnly={isExpandedOnly} /> diff --git a/packages/builder/src/components/common/ai/AIInput.svelte b/packages/builder/src/components/common/ai/AIInput.svelte index 3d1a2e25c2..51f758fa55 100644 --- a/packages/builder/src/components/common/ai/AIInput.svelte +++ b/packages/builder/src/components/common/ai/AIInput.svelte @@ -13,7 +13,6 @@ export let value: string = "" export const submit = onPromptSubmit - $: expanded = expandedOnly || expanded const dispatch = createEventDispatcher() let promptInput: HTMLInputElement @@ -22,6 +21,7 @@ let switchOnAIModal: Modal let addCreditsModal: Modal + $: expanded = expandedOnly || expanded $: accountPortalAccess = $auth?.user?.accountPortalAccess $: accountPortal = $admin.accountPortalUrl $: aiEnabled = $auth?.user?.llm @@ -93,8 +93,10 @@ class:loading={promptLoading} class:disabled={expanded && disabled} on:click={e => { - e.stopPropagation() - toggleExpand() + if (!expandedOnly) { + e.stopPropagation() + toggleExpand() + } }} /> {#if expanded} From e746595ea4582f19cf07df38ec11b8043b145a8e Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 6 May 2025 11:23:32 +0100 Subject: [PATCH 2/4] rename vars --- .../src/components/common/CodeEditor/AIGen.svelte | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/components/common/CodeEditor/AIGen.svelte b/packages/builder/src/components/common/CodeEditor/AIGen.svelte index 0b98b76c88..93b63d7cb3 100644 --- a/packages/builder/src/components/common/CodeEditor/AIGen.svelte +++ b/packages/builder/src/components/common/CodeEditor/AIGen.svelte @@ -10,8 +10,8 @@ export let bindings: EnrichedBinding[] = [] export let value: string | null = "" export let expandedOnly: boolean = false - export let parentWidth: number | null = null + const dispatch = createEventDispatcher<{ update: { code: string } accept: void @@ -26,10 +26,11 @@ const thresholdExpansionWidth = 350 - $: isExpandedOnly = + $: expandedOnly = expandedOnly || (parentWidth !== null && parentWidth > thresholdExpansionWidth) - $: expanded = isExpandedOnly || expanded + + $: expanded = expandedOnly || expanded async function generateJs(prompt: string) { promptText = "" @@ -107,7 +108,7 @@ bind:expanded bind:value={inputValue} readonly={!!suggestedCode} - expandedOnly={isExpandedOnly} + {expandedOnly} /> From a430ae024a3dbec9f616846d86bdd4f5555324db Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 6 May 2025 12:58:30 +0100 Subject: [PATCH 3/4] disable hover state --- packages/builder/src/components/common/ai/AIInput.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/builder/src/components/common/ai/AIInput.svelte b/packages/builder/src/components/common/ai/AIInput.svelte index 51f758fa55..fc28aa20c9 100644 --- a/packages/builder/src/components/common/ai/AIInput.svelte +++ b/packages/builder/src/components/common/ai/AIInput.svelte @@ -92,6 +92,7 @@ class="ai-icon" class:loading={promptLoading} class:disabled={expanded && disabled} + class:no-toggle={expandedOnly} on:click={e => { if (!expandedOnly) { e.stopPropagation() @@ -292,6 +293,10 @@ z-index: 2; } + .ai-icon.no-toggle { + cursor: default; + } + .ai-gen-text { white-space: nowrap; overflow: hidden; From 0964e0229900803eb5ad17f7b72b670ea3489d7d Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 6 May 2025 13:05:47 +0100 Subject: [PATCH 4/4] make expandedOnly prop clearer --- .../builder/src/components/common/CodeEditor/AIGen.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/components/common/CodeEditor/AIGen.svelte b/packages/builder/src/components/common/CodeEditor/AIGen.svelte index 93b63d7cb3..84edc6cbdf 100644 --- a/packages/builder/src/components/common/CodeEditor/AIGen.svelte +++ b/packages/builder/src/components/common/CodeEditor/AIGen.svelte @@ -26,11 +26,11 @@ const thresholdExpansionWidth = 350 - $: expandedOnly = + $: shouldAlwaysBeExpanded = expandedOnly || (parentWidth !== null && parentWidth > thresholdExpansionWidth) - $: expanded = expandedOnly || expanded + $: expanded = shouldAlwaysBeExpanded || expanded async function generateJs(prompt: string) { promptText = "" @@ -108,7 +108,7 @@ bind:expanded bind:value={inputValue} readonly={!!suggestedCode} - {expandedOnly} + expandedOnly={shouldAlwaysBeExpanded} />