Merge branch 'master' into cheeks-fixes

2025-04-15 16:51:48 +01:00 · 2025-04-15 16:51:48 +01:00 · eb0ea6e878
parent c897bb1a91 dea727a6b9
commit eb0ea6e878
7 changed files with 226 additions and 216 deletions
--- a/packages/builder/src/components/common/CodeEditor/AIGen.svelte
+++ b/packages/builder/src/components/common/CodeEditor/AIGen.svelte
@ -1,5 +1,16 @@
 <script lang="ts">
-  import { ActionButton, Icon, notifications } from "@budibase/bbui"
+  import {
+    ActionButton,
+    Icon,
+    notifications,
+    Button,
+    Modal,
+    ModalContent,
+    Body,
+    Link,
+  } from "@budibase/bbui"
+  import { auth, admin, licensing } from "@/stores/portal"
+
  import { createEventDispatcher } from "svelte"
  import { API } from "@/api"
  import type { EnrichedBinding } from "@budibase/types"
@ -8,6 +19,8 @@

  export let bindings: EnrichedBinding[] = []
  export let value: string | null = ""
+  export let expandedOnly: boolean = false
+
  export let parentWidth: number | null = null
  export const dispatch = createEventDispatcher<{
    update: { code: string }
@ -15,28 +28,27 @@
    reject: { code: string | null }
  }>()

-  let buttonContainer: HTMLElement
-  let promptInput: HTMLTextAreaElement
+  let promptInput: HTMLInputElement
  let buttonElement: HTMLButtonElement
  let promptLoading = false
  let suggestedCode: string | null = null
  let previousContents: string | null = null
  let expanded = false
  let containerWidth = "auto"
-  let containerHeight = "40px"
  let promptText = ""
  let animateBorder = false
+  let switchOnAIModal: Modal
+  let addCreditsModal: Modal

-  function adjustContainerHeight() {
-    if (promptInput && buttonElement) {
-      promptInput.style.height = "0px"
-      const newHeight = Math.min(promptInput.scrollHeight, 100)
-      promptInput.style.height = `${newHeight}px`
-      containerHeight = `${Math.max(40, newHeight + 20)}px`
+  $: accountPortalAccess = $auth?.user?.accountPortalAccess
+  $: accountPortal = $admin.accountPortalUrl
+  $: aiEnabled = $auth?.user?.llm
+  $: expanded = expandedOnly ? true : expanded
+  $: creditsExceeded = $licensing.aiCreditsExceeded
+  $: disabled = suggestedCode !== null || !aiEnabled || creditsExceeded
+  $: if (expandedOnly) {
+    containerWidth = calculateExpandedWidth()
  }
-  }
-
-  $: if (promptInput && promptText) adjustContainerHeight()

  async function generateJs(prompt: string) {
    if (!prompt.trim()) return
@ -85,22 +97,23 @@
  function resetExpand() {
    expanded = false
    containerWidth = "auto"
-    containerHeight = "40px"
    promptText = ""
    suggestedCode = null
    previousContents = null
    animateBorder = false
  }

+  function calculateExpandedWidth() {
+    return parentWidth
+      ? `${Math.min(Math.max(parentWidth * 0.8, 300), 600)}px`
+      : "300px"
+  }
+
  function toggleExpand() {
    if (!expanded) {
      expanded = true
      animateBorder = true
-      // Calculate width based on size of CodeEditor parent
-      containerWidth = parentWidth
-        ? `${Math.min(Math.max(parentWidth * 0.8, 300), 600)}px`
-        : "300px"
-      containerHeight = "40px"
+      containerWidth = calculateExpandedWidth()
      setTimeout(() => {
        promptInput?.focus()
      }, 250)
@ -125,11 +138,9 @@
  }
 </script>

-<div
-  class="ai-gen-container"
-  style="--container-width: {containerWidth}; --container-height: {containerHeight}"
-  bind:this={buttonContainer}
->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="ai-gen-container" style="--container-width: {containerWidth}">
  {#if suggestedCode !== null}
    <div class="floating-actions">
      <ActionButton size="S" icon="CheckmarkCircle" on:click={acceptSuggestion}>
@ -140,7 +151,6 @@
      </ActionButton>
    </div>
  {/if}
-
  <button
    bind:this={buttonElement}
    class="spectrum-ActionButton fade"
@ -149,18 +159,28 @@
    on:click={!expanded ? toggleExpand : undefined}
  >
    <div class="button-content-wrapper">
-      <img src={BBAI} alt="AI" class="ai-icon" />
+      <img
+        src={BBAI}
+        alt="AI"
+        class="ai-icon"
+        class:disabled={expanded && disabled}
+        on:click={!expandedOnly
+          ? e => {
+              e.stopPropagation()
+              toggleExpand()
+            }
+          : undefined}
+      />
      {#if expanded}
-        <textarea
+        <input
+          type="text"
          bind:this={promptInput}
          bind:value={promptText}
          class="prompt-input"
          placeholder="Generate Javascript..."
          on:keydown={handleKeyPress}
-          on:input={adjustContainerHeight}
-          disabled={suggestedCode !== null}
+          {disabled}
          readonly={suggestedCode !== null}
-          rows="1"
        />
      {:else}
        <span class="spectrum-ActionButton-label ai-gen-text">
@ -168,9 +188,46 @@
        </span>
      {/if}
    </div>
-
    {#if expanded}
      <div class="action-buttons">
+        {#if !aiEnabled}
+          <Button cta size="S" on:click={() => switchOnAIModal.show()}>
+            Switch on AI
+          </Button>
+          <Modal bind:this={switchOnAIModal}>
+            <ModalContent title="Switch on AI" showConfirmButton={false}>
+              <div class="enable-ai">
+                <p>To enable BB AI:</p>
+                <ul>
+                  <li>
+                    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>
+          </Modal>
+        {:else if creditsExceeded}
+          <Button cta size="S" on:click={() => addCreditsModal.show()}>
+            Add AI credits
+          </Button>
+          <Modal bind:this={addCreditsModal}>
+            <ModalContent title="Add AI credits" showConfirmButton={false}>
+              <Body size="S">
+                {#if accountPortalAccess}
+                  <Link href={"https://budibase.com/contact/"}
+                    >Contact sales</Link
+                  > to unlock additional BB AI credits
+                {:else}
+                  Contact your account holder to unlock additional BB AI credits
+                {/if}
+              </Body>
+            </ModalContent>
+          </Modal>
+        {:else}
          <Icon
            color={promptLoading
              ? "#6E56FF"
@ -181,16 +238,7 @@
            name={promptLoading ? "StopCircle" : "PlayCircle"}
            on:click={() => generateJs(promptText)}
          />
-        <Icon
-          hoverable
-          size="S"
-          name="Close"
-          hoverColor="#6E56FF"
-          on:click={e => {
-            e.stopPropagation()
-            if (!suggestedCode && !promptLoading) toggleExpand()
-          }}
-        />
+        {/if}
      </div>
    {/if}
  </button>
@ -198,13 +246,12 @@

 <style>
  .ai-gen-container {
+    height: 40px;
    --container-width: auto;
-    --container-height: 40px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: var(--container-width);
-    height: var(--container-height);
    display: flex;
    overflow: visible;
  }
@ -238,7 +285,7 @@
    background: linear-gradient(
      125deg,
      transparent -10%,
-      #6e56ff 5%,
+      #6e56ff 2%,
      #9f8fff 15%,
      #9f8fff 25%,
      transparent 35%,
@ -320,6 +367,7 @@
    height: 18px;
    margin-right: 8px;
    flex-shrink: 0;
+    cursor: var(--ai-icon-cursor, pointer);
  }

  .ai-gen-text {
@ -335,18 +383,16 @@
    border: none;
    background: transparent;
    outline: none;
-    font-size: var(--font-size-s);
    font-family: var(--font-sans);
    color: var(--spectrum-alias-text-color);
    min-width: 0;
    resize: none;
    overflow: hidden;
-    line-height: 1.2;
-    min-height: 10px !important;
  }

  .prompt-input::placeholder {
    color: var(--spectrum-global-color-gray-600);
+    font-family: var(--font-sans);
  }

  .action-buttons {
@ -354,6 +400,7 @@
    gap: var(--spacing-s);
    z-index: 4;
    flex-shrink: 0;
+    margin-right: var(--spacing-s);
  }

  .button-content-wrapper {
@ -366,4 +413,15 @@
    min-width: 0;
    margin-right: var(--spacing-s);
  }
+
+  .prompt-input:disabled,
+  .prompt-input[readonly] {
+    color: var(--spectrum-global-color-gray-500);
+    cursor: not-allowed;
+  }
+
+  .ai-icon.disabled {
+    filter: grayscale(1) brightness(1.5);
+    opacity: 0.5;
+  }
 </style>
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@ -469,6 +469,7 @@

 {#if aiGenEnabled}
  <AIGen
+    expandedOnly={true}
    {bindings}
    {value}
    parentWidth={editorWidth}
--- a/packages/builder/src/stores/portal/licensing.ts
+++ b/packages/builder/src/stores/portal/licensing.ts
@ -56,7 +56,9 @@ interface LicensingState {
  // user limits
  userCount?: number
  userLimit?: number
+  aiCreditsLimit?: number
  userLimitReached: boolean
+  aiCreditsExceeded: boolean
  errUserLimit: boolean
 }

@ -102,6 +104,8 @@ class LicensingStore extends BudiStore<LicensingState> {
      userLimit: undefined,
      userLimitReached: false,
      errUserLimit: false,
+      // AI Limits
+      aiCreditsExceeded: false,
    })
  }

@ -119,6 +123,16 @@ class LicensingStore extends BudiStore<LicensingState> {
    return userCount > userLimit
  }

+  aiCreditsExceeded(
+    aiCredits: number,
+    aiCreditsLimit = get(this.store).aiCreditsLimit
+  ) {
+    if (aiCreditsLimit === UNLIMITED || aiCreditsLimit === undefined) {
+      return false
+    }
+    return aiCredits > aiCreditsLimit
+  }
+
  async isCloud() {
    let adminStore = get(admin)
    if (!adminStore.loaded) {
@ -291,9 +305,15 @@ class LicensingStore extends BudiStore<LicensingState> {

    const userQuota = license.quotas.usage.static.users
    const userLimit = userQuota.value
+    const aiCreditsQuota = license.quotas.usage.monthly.budibaseAICredits
+    const aiCreditsLimit = aiCreditsQuota.value
    const userCount = usage.usageQuota.users
    const userLimitReached = this.usersLimitReached(userCount, userLimit)
    const userLimitExceeded = this.usersLimitExceeded(userCount, userLimit)
+    const aiCreditsExceeded = this.aiCreditsExceeded(
+      usage.monthly.current.budibaseAICredits,
+      aiCreditsLimit
+    )
    const isCloudAccount = await this.isCloud()
    const errUserLimit =
      isCloudAccount &&
@ -315,6 +335,8 @@ class LicensingStore extends BudiStore<LicensingState> {
        userLimit,
        userLimitReached,
        errUserLimit,
+        aiCreditsLimit,
+        aiCreditsExceeded,
      }
    })
  }
--- a/packages/pro
+++ b/packages/pro
@ -1 +1 @@
-Subproject commit 8bcb90edac3d44c48eaecf526cedc82418035438
+Subproject commit f27612865cd5f689b75b8f4e148293dff3b77bc4
--- a/packages/server/src/api/routes/tests/ai.spec.ts
+++ b/packages/server/src/api/routes/tests/ai.spec.ts
@ -13,8 +13,6 @@ import {
 } from "@budibase/types"
 import { context } from "@budibase/backend-core"
 import { mocks } from "@budibase/backend-core/tests"
-import { MockLLMResponseFn } from "../../../tests/utilities/mocks/ai"
-import { mockAnthropicResponse } from "../../../tests/utilities/mocks/ai/anthropic"
 import { quotas } from "@budibase/pro"

 function dedent(str: string) {
@ -30,7 +28,6 @@ type SetupFn = (
 interface TestSetup {
  name: string
  setup: SetupFn
-  mockLLMResponse: MockLLMResponseFn
 }

 function budibaseAI(): SetupFn {
@ -89,25 +86,14 @@ const allProviders: TestSetup[] = [
        OPENAI_API_KEY: "test-key",
      })
    },
-    mockLLMResponse: mockChatGPTResponse,
  },
  {
    name: "OpenAI API key with custom config",
    setup: customAIConfig({ provider: "OpenAI", defaultModel: "gpt-4o-mini" }),
-    mockLLMResponse: mockChatGPTResponse,
-  },
-  {
-    name: "Anthropic API key with custom config",
-    setup: customAIConfig({
-      provider: "Anthropic",
-      defaultModel: "claude-3-5-sonnet-20240620",
-    }),
-    mockLLMResponse: mockAnthropicResponse,
  },
  {
    name: "BudibaseAI",
    setup: budibaseAI(),
-    mockLLMResponse: mockChatGPTResponse,
  },
 ]

@ -126,9 +112,7 @@ describe("AI", () => {
    nock.cleanAll()
  })

-  describe.each(allProviders)(
-    "provider: $name",
-    ({ setup, mockLLMResponse }: TestSetup) => {
+  describe.each(allProviders)("provider: $name", ({ setup }: TestSetup) => {
    let cleanup: () => Promise<void> | void
    beforeAll(async () => {
      cleanup = await setup(config)
@ -154,14 +138,14 @@ describe("AI", () => {
      })

      it("handles correct plain code response", async () => {
-          mockLLMResponse(`return 42`)
+        mockChatGPTResponse(`return 42`)

        const { code } = await config.api.ai.generateJs({ prompt: "test" })
        expect(code).toBe("return 42")
      })

      it("handles correct markdown code response", async () => {
-          mockLLMResponse(
+        mockChatGPTResponse(
          dedent(`
                \`\`\`js
                return 42
@ -174,7 +158,7 @@ describe("AI", () => {
      })

      it("handles multiple markdown code blocks returned", async () => {
-          mockLLMResponse(
+        mockChatGPTResponse(
          dedent(`
                This:

@ -196,13 +180,13 @@ describe("AI", () => {

      // TODO: handle when this happens
      it.skip("handles no code response", async () => {
-          mockLLMResponse("I'm sorry, you're quite right, etc.")
+        mockChatGPTResponse("I'm sorry, you're quite right, etc.")
        const { code } = await config.api.ai.generateJs({ prompt: "test" })
        expect(code).toBe("")
      })

      it("handles LLM errors", async () => {
-          mockLLMResponse(() => {
+        mockChatGPTResponse(() => {
          throw new Error("LLM error")
        })
        await config.api.ai.generateJs({ prompt: "test" }, { status: 500 })
@ -211,7 +195,7 @@ describe("AI", () => {

    describe("POST /api/ai/cron", () => {
      it("handles correct cron response", async () => {
-          mockLLMResponse("0 0 * * *")
+        mockChatGPTResponse("0 0 * * *")

        const { message } = await config.api.ai.generateCron({
          prompt: "test",
@ -220,7 +204,7 @@ describe("AI", () => {
      })

      it("handles expected LLM error", async () => {
-          mockLLMResponse("Error generating cron: skill issue")
+        mockChatGPTResponse("Error generating cron: skill issue")

        await config.api.ai.generateCron(
          {
@ -231,7 +215,7 @@ describe("AI", () => {
      })

      it("handles unexpected LLM error", async () => {
-          mockLLMResponse(() => {
+        mockChatGPTResponse(() => {
          throw new Error("LLM error")
        })

@ -243,8 +227,7 @@ describe("AI", () => {
        )
      })
    })
-    }
-  )
+  })
 })

 describe("BudibaseAI", () => {
--- a/packages/server/src/tests/utilities/mocks/ai/anthropic.ts
+++ b/packages/server/src/tests/utilities/mocks/ai/anthropic.ts
@ -1,48 +0,0 @@
-import AnthropicClient from "@anthropic-ai/sdk"
-import nock from "nock"
-import { MockLLMResponseFn, MockLLMResponseOpts } from "."
-
-let chatID = 1
-const SPACE_REGEX = /\s+/g
-
-export const mockAnthropicResponse: MockLLMResponseFn = (
-  answer: string | ((prompt: string) => string),
-  opts?: MockLLMResponseOpts
-) => {
-  return nock(opts?.host || "https://api.anthropic.com")
-    .post("/v1/messages")
-    .reply((uri: string, body: nock.Body) => {
-      const req = body as AnthropicClient.MessageCreateParamsNonStreaming
-      const prompt = req.messages[0].content
-      if (typeof prompt !== "string") {
-        throw new Error("Anthropic mock only supports string prompts")
-      }
-
-      let content
-      if (typeof answer === "function") {
-        try {
-          content = answer(prompt)
-        } catch (e) {
-          return [500, "Internal Server Error"]
-        }
-      } else {
-        content = answer
-      }
-
-      const resp: AnthropicClient.Messages.Message = {
-        id: `${chatID++}`,
-        type: "message",
-        role: "assistant",
-        model: req.model,
-        stop_reason: "end_turn",
-        usage: {
-          input_tokens: prompt.split(SPACE_REGEX).length,
-          output_tokens: content.split(SPACE_REGEX).length,
-        },
-        stop_sequence: null,
-        content: [{ type: "text", text: content }],
-      }
-      return [200, resp]
-    })
-    .persist()
-}
--- a/packages/types/src/documents/global/config.ts
+++ b/packages/types/src/documents/global/config.ts
@ -111,13 +111,7 @@ export interface SCIMInnerConfig {

 export interface SCIMConfig extends Config<SCIMInnerConfig> {}

-export type AIProvider =
-  | "OpenAI"
-  | "Anthropic"
-  | "AzureOpenAI"
-  | "TogetherAI"
-  | "Custom"
-  | "BudibaseAI"
+export type AIProvider = "OpenAI" | "AzureOpenAI" | "BudibaseAI"

 export interface ProviderConfig {
  provider: AIProvider