windmill-components 1.122.0 → 1.138.2

package/package/components/codeGen/ScriptFix.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SupportedLanguage } from '../../common';
+import type Editor from '../Editor.svelte';
+import type DiffEditor from '../DiffEditor.svelte';
+declare const __propDef: {
+    props: {
+        lang: SupportedLanguage;
+        editor: Editor | undefined;
+        diffEditor: DiffEditor | undefined;
+        error: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptFixProps = typeof __propDef.props;
+export type ScriptFixEvents = typeof __propDef.events;
+export type ScriptFixSlots = typeof __propDef.slots;
+export default class ScriptFix extends SvelteComponentTyped<ScriptFixProps, ScriptFixEvents, ScriptFixSlots> {
+}
+export {};

package/package/components/codeGen/ScriptGen.svelte

@@ -0,0 +1,218 @@
+<script>import { Button } from '../common';
+import { SUPPORTED_LANGUAGES, editScript, generateScript } from './lib';
+import { sendUserToast } from '../../toast';
+import { faCheck, faClose, faMagicWandSparkles } from '@fortawesome/free-solid-svg-icons';
+import Popup from '../common/popup/Popup.svelte';
+import { Icon } from 'svelte-awesome';
+import { dbSchema, existsOpenaiResourcePath } from '../../stores';
+import { scriptLangToEditorLang } from '../../scripts';
+import Tooltip from '../Tooltip.svelte';
+// props
+export let iconOnly = false;
+export let lang;
+export let editor;
+export let diffEditor;
+export let inlineScript = false;
+// state
+let funcDesc = '';
+let genLoading = false;
+let openaiAvailable = undefined;
+let button;
+let input;
+let generatedCode = '';
+let selection;
+let isEdit = false;
+async function onGenerate() {
+    if (funcDesc.length <= 0) {
+        return;
+    }
+    try {
+        genLoading = true;
+        if (isEdit && selection) {
+            const selectedCode = editor?.getSelectedLines() || '';
+            const originalCode = editor?.getCode() || '';
+            const result = await editScript({
+                language: lang,
+                description: funcDesc,
+                selectedCode,
+                dbSchema: lang === 'postgresql' ? $dbSchema : undefined
+            });
+            generatedCode = originalCode.replace(selectedCode, result.code + '\n');
+        }
+        else {
+            const result = await generateScript({
+                language: lang,
+                description: funcDesc,
+                dbSchema: lang === 'postgresql' ? $dbSchema : undefined
+            });
+            generatedCode = result.code;
+        }
+        funcDesc = '';
+    }
+    catch (err) {
+        sendUserToast('Failed to generate code', true);
+        console.error(err);
+    }
+    finally {
+        genLoading = false;
+    }
+}
+function acceptDiff() {
+    editor?.setCode(diffEditor?.getModified() || '');
+    editor?.format();
+    generatedCode = '';
+}
+function rejectDiff() {
+    generatedCode = '';
+}
+function checkIfOpenaiAvailable(lang, existsOpenaiResourcePath) {
+    openaiAvailable = existsOpenaiResourcePath && SUPPORTED_LANGUAGES.has(lang);
+}
+function showDiff() {
+    diffEditor?.setDiff(editor?.getCode() || '', generatedCode, lang === 'frontend' ? 'javascript' : scriptLangToEditorLang(lang));
+    diffEditor?.show();
+    editor?.hide();
+}
+function hideDiff() {
+    editor?.show();
+    diffEditor?.hide();
+}
+function setSelectionHandler() {
+    editor?.onDidChangeCursorSelection((e) => {
+        selection = e.selection;
+    });
+}
+$: checkIfOpenaiAvailable(lang, $existsOpenaiResourcePath);
+$: input?.focus();
+$: lang && (generatedCode = '');
+$: generatedCode && showDiff();
+$: !generatedCode && hideDiff();
+$: editor && setSelectionHandler();
+$: selection && (isEdit = !selection.isEmpty());
+</script>
+
+{#if openaiAvailable}
+	{#if generatedCode}
+		{#if inlineScript}
+			<div class="flex gap-1">
+				<Button
+					title="Discard generated code"
+					btnClasses="!font-medium px-2 w-7"
+					size="xs"
+					color="red"
+					on:click={rejectDiff}
+					variant="contained"
+				>
+					<Icon data={faClose} />
+				</Button><Button
+					title="Accept generated code"
+					btnClasses="!font-medium px-2 w-7"
+					size="xs"
+					color="green"
+					on:click={acceptDiff}
+				>
+					<Icon data={faCheck} /></Button
+				>
+			</div>
+		{:else}
+			<div class="flex gap-1 px-2">
+				<Button
+					title="Discard generated code"
+					btnClasses="!font-medium px-2"
+					size="xs"
+					color="red"
+					on:click={rejectDiff}
+					variant="contained"
+					startIcon={{ icon: faClose }}
+					{iconOnly}
+				>
+					Discard
+				</Button><Button
+					title="Accept generated code"
+					btnClasses="!font-medium px-2"
+					size="xs"
+					color="green"
+					on:click={acceptDiff}
+					startIcon={{ icon: faCheck }}
+					{iconOnly}
+				>
+					Accept
+				</Button>
+			</div>
+		{/if}
+	{/if}
+	{#if !generatedCode}
+		<Popup floatingConfig={{ placement: 'bottom-end', strategy: 'absolute' }} let:close>
+			<svelte:fragment slot="button">
+				{#if inlineScript}
+					<Button
+						size="lg"
+						bind:element={button}
+						color="light"
+						btnClasses="!px-2 !bg-surface-secondary hover:!bg-surface-hover"
+						loading={genLoading}
+						nonCaptureEvent={true}
+					>
+						<Icon scale={0.8} data={faMagicWandSparkles} />
+					</Button>
+				{:else}
+					<Button
+						title="Generate code from prompt"
+						btnClasses="!font-medium text-secondary"
+						size="xs"
+						color="light"
+						spacingSize="md"
+						bind:element={button}
+						startIcon={{ icon: faMagicWandSparkles }}
+						{iconOnly}
+						loading={genLoading}
+						nonCaptureEvent={true}
+					>
+						{isEdit ? 'AI Edit' : 'AI Gen'}
+					</Button>
+				{/if}
+			</svelte:fragment>
+			<label class="block text-primary w-96">
+				<div class="flex w-full">
+					<input
+						type="text"
+						bind:this={input}
+						bind:value={funcDesc}
+						class="!w-auto grow"
+						on:keypress={({ key }) => {
+							if (key === 'Enter' && funcDesc.length > 0) {
+								close(input || null)
+								onGenerate()
+							}
+						}}
+						placeholder={isEdit
+							? 'Describe the changes you want'
+							: 'Describe what the script should do'}
+					/>
+					<Button
+						size="xs"
+						color="blue"
+						buttonType="button"
+						btnClasses="!p-1 !w-[38px] !ml-2"
+						aria-label="Generate"
+						on:click={() => {
+							close(input || null)
+							onGenerate()
+						}}
+						disabled={funcDesc.length <= 0}
+					>
+						<Icon data={faMagicWandSparkles} />
+					</Button>
+				</div>
+				{#if lang === 'postgresql' && $dbSchema}
+					<p class="text-sm mt-2">
+						Will take into account the DB schema
+						<Tooltip>
+							In order to better generate the script, we pass the selected DB schema to GPT-4.
+						</Tooltip>
+					</p>
+				{/if}
+			</label>
+		</Popup>
+	{/if}
+{/if}

package/package/components/codeGen/ScriptGen.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SupportedLanguage } from '../../common';
+import type Editor from '../Editor.svelte';
+import type DiffEditor from '../DiffEditor.svelte';
+import type SimpleEditor from '../SimpleEditor.svelte';
+declare const __propDef: {
+    props: {
+        iconOnly?: boolean | undefined;
+        lang: SupportedLanguage | 'frontend';
+        editor: Editor | SimpleEditor | undefined;
+        diffEditor: DiffEditor | undefined;
+        inlineScript?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptGenProps = typeof __propDef.props;
+export type ScriptGenEvents = typeof __propDef.events;
+export type ScriptGenSlots = typeof __propDef.slots;
+export default class ScriptGen extends SvelteComponentTyped<ScriptGenProps, ScriptGenEvents, ScriptGenSlots> {
+}
+export {};

package/package/components/codeGen/index.d.ts

@@ -0,0 +1 @@
+export { default as ScriptGen } from './ScriptGen.svelte';

package/package/components/codeGen/index.js

@@ -0,0 +1 @@
+export { default as ScriptGen } from './ScriptGen.svelte';

package/package/components/codeGen/lib.d.ts

@@ -0,0 +1,28 @@
+import { Script } from '../../gen';
+export declare const SUPPORTED_LANGUAGES: Set<string>;
+interface BaseOptions {
+    language: Script.language | 'frontend';
+    dbSchema?: object;
+}
+interface ScriptGenerationOptions extends BaseOptions {
+    description: string;
+    dbSchema?: object;
+}
+interface EditScriptOptions extends ScriptGenerationOptions {
+    selectedCode: string;
+}
+interface FixScriptOpions extends BaseOptions {
+    code: string;
+    error: string;
+}
+export declare function generateScript(scriptOptions: ScriptGenerationOptions): Promise<{
+    code: string;
+}>;
+export declare function editScript(scriptOptions: EditScriptOptions): Promise<{
+    code: string;
+}>;
+export declare function fixScript(scriptOptions: FixScriptOpions): Promise<{
+    code: string;
+    explanation: string;
+}>;
+export {};

package/package/components/codeGen/lib.js

@@ -0,0 +1,217 @@
+import { OpenAI } from 'openai';
+import { OpenAPI } from '../../gen/core/OpenAPI';
+import { ResourceService, Script, WorkspaceService } from '../../gen';
+import { existsOpenaiResourcePath, workspaceStore } from '../../stores';
+import { formatResourceTypes } from './utils';
+import { EDIT_CONFIG, FIX_CONFIG, GEN_CONFIG } from './prompts';
+const WARNING_MSG = 'WARNING: this code was generated by OpenAI, it might not be accurate. Use at your own risk.';
+const COMMENT_TYPES = {
+    [Script.language.PYTHON3]: '#',
+    [Script.language.DENO]: '//',
+    [Script.language.GO]: '//',
+    [Script.language.BASH]: '#',
+    [Script.language.POSTGRESQL]: '--',
+    [Script.language.MYSQL]: '--',
+    [Script.language.NATIVETS]: '//',
+    [Script.language.BUN]: '//',
+    frontend: '//'
+};
+export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts));
+let workspace = undefined;
+workspaceStore.subscribe(async (value) => {
+    workspace = value;
+    if (workspace) {
+        try {
+            existsOpenaiResourcePath.set(await WorkspaceService.existsOpenaiResourcePath({ workspace }));
+        }
+        catch (err) {
+            existsOpenaiResourcePath.set(false);
+            console.error('Could not get if OpenAI resource exists');
+        }
+    }
+});
+async function addResourceTypes(scriptOptions, workspace, prompt) {
+    if (['deno', 'bun', 'nativets'].includes(scriptOptions.language)) {
+        const resourceTypes = await ResourceService.listResourceType({ workspace });
+        const resourceTypesText = formatResourceTypes(resourceTypes, 'typescript');
+        prompt = prompt.replace('{resourceTypes}', resourceTypesText);
+    }
+    else if (scriptOptions.language === 'python3') {
+        const resourceTypes = await ResourceService.listResourceType({ workspace });
+        const resourceTypesText = formatResourceTypes(resourceTypes, 'python3');
+        prompt = prompt.replace('{resourceTypes}', resourceTypesText);
+    }
+    return prompt;
+}
+function addDBSChema(scriptOptions, prompt) {
+    if (['mysql', 'postgresql'].includes(scriptOptions.language) && scriptOptions.dbSchema) {
+        const { dbSchema } = scriptOptions;
+        const smallerSchema = {};
+        for (const schemaKey in dbSchema) {
+            for (const tableKey in dbSchema[schemaKey]) {
+                smallerSchema[tableKey] = [];
+                for (const colKey in dbSchema[schemaKey][tableKey]) {
+                    const col = dbSchema[schemaKey][tableKey][colKey];
+                    const p = [colKey, col.type, col.required];
+                    if (col.default) {
+                        p.push(col.default);
+                    }
+                    smallerSchema[tableKey].push(p);
+                }
+            }
+        }
+        prompt =
+            prompt +
+                "\nHere's the database schema, each column is in the format [name, type, required, default?]: " +
+                JSON.stringify(smallerSchema);
+    }
+    return prompt;
+}
+export async function generateScript(scriptOptions) {
+    if (!workspace) {
+        throw new Error('No workspace selected');
+    }
+    const baseURL = `${location.origin}${OpenAPI.BASE}/w/${workspace}/openai/proxy`;
+    const openai = new OpenAI({
+        baseURL,
+        apiKey: 'fakekey',
+        defaultHeaders: {
+            Authorization: ''
+        }
+    });
+    let prompt = GEN_CONFIG.prompts[scriptOptions.language].prompt.replace('{description}', scriptOptions.description);
+    prompt = await addResourceTypes(scriptOptions, workspace, prompt);
+    prompt = addDBSChema(scriptOptions, prompt);
+    const completion = await openai.chat.completions.create({
+        model: 'gpt-4',
+        max_tokens: 2048,
+        messages: [
+            {
+                role: 'system',
+                content: GEN_CONFIG.system
+            },
+            {
+                role: 'user',
+                content: prompt
+            }
+        ]
+    });
+    const result = completion.choices[0]?.message?.content;
+    if (!result) {
+        throw new Error('No result from OpenAI');
+    }
+    const match = result.match(/```[a-zA-z]+\n([\s\S]*?)\n```/);
+    if (!match || match.length < 2) {
+        throw new Error('No code block found');
+    }
+    const code = match[1];
+    if (scriptOptions.language == Script.language.GO) {
+        const warning = COMMENT_TYPES[scriptOptions.language] + ' ' + WARNING_MSG + '\n';
+        return { code: code.trim().replace('package inner\n', 'package inner\n' + warning) };
+    }
+    else if (scriptOptions.language == Script.language.BASH) {
+        return {
+            code: '# shellcheck shell=bash\n' +
+                COMMENT_TYPES[scriptOptions.language] +
+                ' ' +
+                WARNING_MSG +
+                '\n\n' +
+                code.trim()
+        };
+    }
+    else {
+        return {
+            code: COMMENT_TYPES[scriptOptions.language] + ' ' + WARNING_MSG + '\n\n' + code.trim()
+        };
+    }
+}
+export async function editScript(scriptOptions) {
+    if (!workspace) {
+        throw new Error('No workspace selected');
+    }
+    const baseURL = `${location.origin}${OpenAPI.BASE}/w/${workspace}/openai/proxy`;
+    const openai = new OpenAI({
+        baseURL,
+        apiKey: 'fakekey',
+        defaultHeaders: {
+            Authorization: ''
+        }
+    });
+    let prompt = EDIT_CONFIG.prompts[scriptOptions.language].prompt
+        .replace('{code}', scriptOptions.selectedCode)
+        .replace('{description}', scriptOptions.description);
+    prompt = await addResourceTypes(scriptOptions, workspace, prompt);
+    prompt = addDBSChema(scriptOptions, prompt);
+    const completion = await openai.chat.completions.create({
+        model: 'gpt-4',
+        max_tokens: 2048,
+        messages: [
+            {
+                role: 'system',
+                content: EDIT_CONFIG.system
+            },
+            {
+                role: 'user',
+                content: prompt
+            }
+        ],
+        temperature: 0.5
+    });
+    const result = completion.choices[0]?.message?.content;
+    if (!result) {
+        throw new Error('No result from OpenAI');
+    }
+    const match = result.match(/```[a-zA-z]+\n([\s\S]*?)\n```/);
+    if (!match || match.length < 2) {
+        throw new Error('No code block found');
+    }
+    const code = match[1];
+    return { code };
+}
+export async function fixScript(scriptOptions) {
+    if (!workspace) {
+        throw new Error('No workspace selected');
+    }
+    const baseURL = `${location.origin}${OpenAPI.BASE}/w/${workspace}/openai/proxy`;
+    const openai = new OpenAI({
+        baseURL,
+        apiKey: 'fakekey',
+        defaultHeaders: {
+            Authorization: ''
+        }
+    });
+    let prompt = FIX_CONFIG.prompts[scriptOptions.language].prompt
+        .replace('{code}', scriptOptions.code)
+        .replace('{error}', scriptOptions.error);
+    prompt = await addResourceTypes(scriptOptions, workspace, prompt);
+    prompt = addDBSChema(scriptOptions, prompt);
+    const completion = await openai.chat.completions.create({
+        model: 'gpt-4',
+        max_tokens: 2048,
+        messages: [
+            {
+                role: 'system',
+                content: FIX_CONFIG.system
+            },
+            {
+                role: 'user',
+                content: prompt
+            }
+        ]
+    });
+    const result = completion.choices[0]?.message?.content;
+    if (!result) {
+        throw new Error('No result from OpenAI');
+    }
+    const match = result.match(/```[a-zA-z]+\n([\s\S]*?)\n```/);
+    if (!match || match.length < 2) {
+        throw new Error('No code block found');
+    }
+    const explanationMatch = result.match(/explanation: "(.+)"/i);
+    let explanation = '';
+    if (explanationMatch && explanationMatch.length > 1) {
+        explanation = explanationMatch[1];
+    }
+    const code = match[1];
+    return { code, explanation };
+}

package/package/components/codeGen/prompts/edit.yaml

@@ -0,0 +1,94 @@
+system: |-
+  You write code as instructed by the user. Only output code. Wrap the code like that: 
+  ```language
+  {code}
+  ```
+  Put explanations directly in the code as comments.
+prompts:
+  python3:
+    prompt: |-
+      Here's my python3 code: 
+      ```python
+      {code}
+      ```
+      Additional information: We have to export a "main" function and specify the parameter types but do not call it.
+      You have access to the following resource types, if you need them, you have to define the TypedDict exactly as specified (class name has to be IN LOWERCASE) and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the TypedDict name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      My instructions: {description}
+  deno:
+    prompt: |-
+      Here's my typescript code in a deno running environement: 
+      ```typescript
+      {code}
+      ```
+      Additional information: We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      My instructions: {description}
+  go:
+    prompt: |-
+      Here's my go code: 
+      ```go
+      {code}
+      ```
+      Additional information: We have to export a "main" function. Import the packages you need. The return type of the function has to be ({return_type}, error). The file package has to be "inner"
+      My instructions: {description}
+  bash:
+    prompt: |-
+      Here's my bash code: 
+      ```shell
+      {code}
+      ```
+      Additional information: Do not include "#!/bin/bash". Arguments are always string and can only be obtained with "var1="$1"", "var2="$2"", etc... You do not need to check if the arguments are present.
+      My instructions: {description}
+  postgresql:
+    prompt: |-
+      Here's my PostgreSQL code: 
+      ```sql
+      {code}
+      ```
+      Additional information: Arguments can be obtained directly in the statement with `$1::{type}`, `$2::{type}`, etc... Name the parameters by adding comments before the command like that: `-- $1 name1` or `-- $2 name = default` (one per row, do not include the type)
+      My instructions: {description}
+  mysql:
+    prompt: |-
+      Here's my MySQL code: 
+      ```sql
+      {code}
+      ```
+      Additional information: Arguments can be obtained directly in the statement with ?. Name the parameters by adding comments before the command like that: -- ? name1 ({type}) (one per row)
+      My instructions: {description}
+  nativets:
+    prompt: |-
+      Here's my typescript code: 
+      ```typescript
+      {code}
+      ```
+      Additional information: We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
+      You should use fetch and are not allowed to import any libraries.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      My instructions: {description}
+  bun:
+    prompt: |-
+      Here's my typescript code in a node.js running environment: 
+      ```typescript
+      {code}
+      ```
+      Additional information: We have to export a "main" function like this: "export async function main(...)" and specify the parameter types but do not call it.
+      You have access to the following resource types, if you need them, you have to define the type exactly as specified and add them as parameters: {resourceTypes}
+      Only use the ones you need. If the type name conflicts with the imported object, rename the imported object NOT THE TYPE.
+      My instructions: {description}
+  frontend:
+    prompt: |-
+      Here's my client-side javascript code: 
+      ```typescript
+      {code}
+      ```
+      Additional information: You can access the context object with the ctx global variable. 
+      The app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'
+      You can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)
+      Use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)
+      Use the recompute function to recompute a component: recompute(id: string)
+      Use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)
+      The setValue function is meant to set or force the value of a component: setValue(id: string, value: any).
+      My instructions: {description}