From f7ecbb9de7d2a08daad65aea4bb3814593f0f433 Mon Sep 17 00:00:00 2001 From: HugoCasa Date: Thu, 19 Oct 2023 16:15:18 +0200 Subject: [PATCH] feat: test openai key + improve AI UI (#2465) --- .../src/lib/components/ContentSearch.svelte | 6 +- .../lib/components/InputTransformForm.svelte | 2 +- frontend/src/lib/components/Toast.svelte | 2 +- .../components/common/button/Button.svelte | 6 +- .../lib/components/common/popup/Popup.svelte | 5 +- .../toggleButton-v2/ToggleButton.svelte | 6 +- .../copilot/FlowCopilotStatus.svelte | 3 +- .../lib/components/copilot/ScriptGen.svelte | 159 ++++++++++-------- .../components/copilot/TestOpenaiKey.svelte | 44 +++++ frontend/src/lib/components/copilot/lib.ts | 29 ++++ .../user/(user)/create_workspace/+page.svelte | 33 +++- .../(logged)/workspace_settings/+page.svelte | 32 ++-- 12 files changed, 232 insertions(+), 95 deletions(-) create mode 100644 frontend/src/lib/components/copilot/TestOpenaiKey.svelte diff --git a/frontend/src/lib/components/ContentSearch.svelte b/frontend/src/lib/components/ContentSearch.svelte index 79144abfb2..f8b144f96f 100644 --- a/frontend/src/lib/components/ContentSearch.svelte +++ b/frontend/src/lib/components/ContentSearch.svelte @@ -150,21 +150,24 @@
- + {:else} - + {/if}
-

{message}

+

{message}

{#if errorMessage}

@@ -22,6 +24,7 @@

- +
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte index babd3c7fb5..e5bc62aa88 100644 --- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte +++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte @@ -14,7 +14,8 @@ export let icon: any | undefined = undefined export let disabled: boolean = false export let selectedColor: string = '#3b82f6' - export let small: boolean = false + export let small = false + export let light = false export let iconProps: Record = {} export let showTooltipIcon: boolean = false export let documentationLink: string | undefined = undefined @@ -35,7 +36,8 @@ {disabled} class={twMerge( ' rounded-md transition-all text-xs flex gap-1 flex-row items-center', - small ? 'px-1 py-0.5' : 'px-2 py-1', + small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1', + light ? 'font-medium' : '', $selected === value ? 'bg-surface shadow-md' : 'bg-surface-secondary hover:bg-surface-hover', diff --git a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte index f1e7962105..e5a1427dda 100644 --- a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte +++ b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte @@ -11,6 +11,7 @@ import type { FlowModule } from '$lib/gen' import type { FlowEditorContext } from '../flows/types' import { ExternalLink } from 'lucide-svelte' + import { twMerge } from 'tailwind-merge' export let copilotLoading: boolean export let copilotStatus: string @@ -34,7 +35,7 @@ {/if} @@ -270,50 +284,59 @@ {/if}
{:else if $copilotInfo.exists_openai_resource_path} -
- { - if (key === 'Enter' && funcDesc.length > 0) { +
+ + + + +
+ { + if (key === 'Enter' && funcDesc.length > 0) { + onGenerate(() => close(input || null)) + } + }} + placeholder={mode === 'edit' + ? 'Describe the changes you want' + : 'Describe what the script should do'} + /> + -
- {#if ['postgresql', 'mysql', 'snowflake', 'bigquery', 'graphql'].includes(lang) && dbSchema?.lang === lang} -
-

- Will take into account the DB schema - - In order to better generate the script, we pass the selected DB schema to GPT-4. - -

- {#if dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC)} - - - - - {/if} + }} + disabled={funcDesc.length <= 0} + > + +
- {/if} + + {#if ['postgresql', 'mysql', 'snowflake', 'bigquery', 'graphql'].includes(lang) && dbSchema?.lang === lang} +
+
+

+ Context: {lang === 'graphql' ? 'GraphQL' : 'DB'} schema +

+ + In order to better generate the script, we pass the selected schema to GPT-4. + +
+ {#if dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC)} + + + + + {/if} +
+ {/if}
{:else}

Enable Windmill AI in the + import { sendUserToast } from '$lib/toast' + import Button from '../common/button/Button.svelte' + import { testKey } from './lib' + export let disabled = false + export let apiKey: string | undefined = undefined + let loading = false + + + diff --git a/frontend/src/lib/components/copilot/lib.ts b/frontend/src/lib/components/copilot/lib.ts index fea70bdc7e..09a4f07efd 100644 --- a/frontend/src/lib/components/copilot/lib.ts +++ b/frontend/src/lib/components/copilot/lib.ts @@ -26,6 +26,35 @@ const openaiConfig: CompletionCreateParamsStreaming = { let workspace: string | undefined = undefined let openai: OpenAI | undefined = undefined +export async function testKey({ + apiKey, + abortController, + messages +}: { + apiKey?: string + messages: CreateChatCompletionRequestMessage[] + abortController: AbortController +}) { + if (apiKey) { + const openai = new OpenAI({ + apiKey, + dangerouslyAllowBrowser: true + }) + await openai.chat.completions.create( + { + ...openaiConfig, + messages, + stream: false + }, + { + signal: abortController.signal + } + ) + } else { + await getNonStreamingCompletion(messages, abortController) + } +} + workspaceStore.subscribe(async (value) => { workspace = value const baseURL = `${location.origin}${OpenAPI.BASE}/w/${workspace}/openai/proxy` diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte index 7a67ffc462..908039eeab 100644 --- a/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte @@ -11,6 +11,7 @@ import Tooltip from '$lib/components/Tooltip.svelte' import { onMount } from 'svelte' import { sendUserToast } from '$lib/toast' + import TestOpenaiKey from '$lib/components/copilot/TestOpenaiKey.svelte' const rd = $page.url.searchParams.get('rd') @@ -21,6 +22,7 @@ let errorId = '' let errorUser = '' let openAiKey = '' + let codeCompletionEnabled = true let checking = false $: id = name.toLowerCase().replace(/\s/gi, '-') @@ -69,7 +71,7 @@ }) await WorkspaceService.editCopilotConfig({ workspace: id, - requestBody: { openai_resource_path: path, code_completion_enabled: false } + requestBody: { openai_resource_path: path, code_completion_enabled: codeCompletionEnabled } }) } @@ -150,12 +152,29 @@ {/if} in the docs + + (optional but recommended) + +

+ + +
+ {#if openAiKey} + + {/if} {:else if tab == 'error_handler'} - +
  • path: The path of the script or flow that errored.
    • -
  • email: The email of the user who ran the script or flow that errored.
    • +
  • + email: The email of the user who ran the script or flow that errored. +
  • error: The error details.
  • job_id: The job id.
  • is_flow: Whether the error comes from a flow.
  • workspace_id: The workspace id of the failed script or flow.

    • - The error handler will be executed by the automatically created group g/error_handler. If - your error handler requires variables or resources, you need to add them to the group. + The error handler will be executed by the automatically created group g/error_handler. + If your error handler requires variables or resources, you need to add them to the group.
    @@ -475,14 +481,15 @@
    - {:else if tab == 'openai'}
    @@ -491,7 +498,7 @@ features.
    -
    +
    {#key openaiResourceInitialPath} {/key} +