MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

further ux updates

This commit is contained in:
Peter Clement 2025-04-15 11:39:54 +01:00
parent 76ff5eb9d6
commit d39f41decb
1 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
packages/builder/src/components/common/CodeEditor/AIGen.svelte
View File

@ -6,7 +6,11 @@
Button, Button,
Modal, Modal,
ModalContent, ModalContent,
Body,
Link,
} from "@budibase/bbui" } from "@budibase/bbui"
import { auth, admin } from "@/stores/portal"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { API } from "@/api" import { API } from "@/api"
import type { EnrichedBinding } from "@budibase/types" import type { EnrichedBinding } from "@budibase/types"
@ -30,12 +34,13 @@
let containerWidth = "auto" let containerWidth = "auto"
let promptText = "" let promptText = ""
let animateBorder = false let animateBorder = false
let aiEnabled = true let aiEnabled = false
let hasAICredits = true let creditsExceeded = false // TODO: Make this computed when quota is implemented
let showSwitchOnAIModal = false let switchOnAIModal: Modal
let showAddCreditsModal = false let addCreditsModal: Modal
let switchOnAIModal: Modal | null = null
let addCreditsModal: Modal | null = null $: accountPortalAccess = $auth?.user?.accountPortalAccess
$: accountPortal = $admin.accountPortalUrl
async function generateJs(prompt: string) { async function generateJs(prompt: string) {
if (!prompt.trim()) return if (!prompt.trim()) return
@ -86,7 +91,7 @@
if (!expanded) { if (!expanded) {
expanded = true expanded = true
animateBorder = true animateBorder = true
// Calculate width based on size of CodeEditor parent // Calculate width based on size of parent
containerWidth = parentWidth containerWidth = parentWidth
? `${Math.min(Math.max(parentWidth * 0.8, 300), 600)}px` ? `${Math.min(Math.max(parentWidth * 0.8, 300), 600)}px`
: "300px" : "300px"
@ -114,6 +119,8 @@
} }
</script> </script>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="ai-gen-container" style="--container-width: {containerWidth}"> <div class="ai-gen-container" style="--container-width: {containerWidth}">
{#if suggestedCode !== null} {#if suggestedCode !== null}
<div class="floating-actions"> <div class="floating-actions">
@ -137,7 +144,10 @@
src={BBAI} src={BBAI}
alt="AI" alt="AI"
class="ai-icon" class="ai-icon"
class:disabled={(!aiEnabled || !hasAICredits) && expanded} on:click={e => {
e.stopPropagation()
toggleExpand()
}}
/> />
{#if expanded} {#if expanded}
<input <input
@ -147,7 +157,7 @@
class="prompt-input" class="prompt-input"
placeholder="Generate Javascript..." placeholder="Generate Javascript..."
on:keydown={handleKeyPress} on:keydown={handleKeyPress}
disabled={suggestedCode !== null || !aiEnabled || !hasAICredits} disabled={suggestedCode !== null || !aiEnabled || creditsExceeded}
readonly={suggestedCode !== null} readonly={suggestedCode !== null}
/> />
{:else} {:else}
@ -159,29 +169,40 @@
{#if expanded} {#if expanded}
<div class="action-buttons"> <div class="action-buttons">
{#if !aiEnabled} {#if !aiEnabled}
<Button cta size="S" on:click={() => switchOnAIModal?.show()}> <Button cta size="S" on:click={() => switchOnAIModal.show()}>
Switch on AI Switch on AI
</Button> </Button>
<Modal bind:this={switchOnAIModal}> <Modal bind:this={switchOnAIModal}>
<ModalContent <ModalContent title="Switch on AI" showConfirmButton={false}>
title="Switch on AI" <div class="enable-ai">
confirmText="Enable" <p>To enable BB AI:</p>
onConfirm={() => (showSwitchOnAIModal = false)} <ul>
> <li>
Enable AI features for your workspace. Add your Budibase license key:
<Link href={accountPortal}>Budibase account portal</Link>
</li>
<li>
Go to the portal settings page, click AI and switch on BB AI
</li>
</ul>
</div>
</ModalContent> </ModalContent>
</Modal> </Modal>
{:else if !hasAICredits} {:else if creditsExceeded}
<Button cta size="S" on:click={() => addCreditsModal?.show()}> <Button cta size="S" on:click={() => addCreditsModal.show()}>
Add AI credits Add AI credits
</Button> </Button>
<Modal bind:this={addCreditsModal}> <Modal bind:this={addCreditsModal}>
<ModalContent <ModalContent title="Add AI credits" showConfirmButton={false}>
title="Add AI credits" <Body size="S">
confirmText="Add credits" {#if accountPortalAccess}
onConfirm={() => (showAddCreditsModal = false)} <Link href={"https://budibase.com/contact/"}
> >Contact sales</Link
Purchase more AI credits to continue using AI features. > to unlock additional BB AI credits
{:else}
Contact your account holder to unlock additional BB AI credits
{/if}
</Body>
</ModalContent> </ModalContent>
</Modal> </Modal>
{:else} {:else}
@ -196,16 +217,6 @@
on:click={() => generateJs(promptText)} on:click={() => generateJs(promptText)}
/> />
{/if} {/if}
<Icon
hoverable
size="S"
name="Close"
hoverColor="#6E56FF"
on:click={e => {
e.stopPropagation()
if (!suggestedCode && !promptLoading) toggleExpand()
}}
/>
</div> </div>
{/if} {/if}
</button> </button>
@ -334,6 +345,7 @@
height: 18px; height: 18px;
margin-right: 8px; margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer;
} }
.ai-gen-text { .ai-gen-text {
@ -384,10 +396,4 @@
color: var(--spectrum-global-color-gray-500); color: var(--spectrum-global-color-gray-500);
cursor: not-allowed; cursor: not-allowed;
} }
.ai-icon.disabled {
filter: grayscale(1) brightness(1.5);
opacity: 0.5;
cursor: not-allowed;
}
</style> </style>