From e949dbae004f95db0ef6534bee7385319dd6f8cb Mon Sep 17 00:00:00 2001
From: HugoCasa <hugo@casademont.ch>
Date: Mon, 31 Jul 2023 16:52:31 +0200
Subject: [PATCH] feat: unveil windmill AI (#1972)

---
 .../lib/components/codeGen/ScriptGen.svelte   | 176 +++++++++---------
 .../(logged)/workspace_settings/+page.svelte  |  34 ++--
 2 files changed, 106 insertions(+), 104 deletions(-)

diff --git a/frontend/src/lib/components/codeGen/ScriptGen.svelte b/frontend/src/lib/components/codeGen/ScriptGen.svelte
index ac23acb7af..0847523143 100644
--- a/frontend/src/lib/components/codeGen/ScriptGen.svelte
+++ b/frontend/src/lib/components/codeGen/ScriptGen.svelte
@@ -115,94 +115,93 @@
 	$: 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 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 !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">
+{/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">
+			{#if openaiAvailable}
+				<div class="flex w-96">
 					<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)
@@ -236,7 +235,12 @@
 						</Tooltip>
 					</p>
 				{/if}
-			</label>
-		</Popup>
-	{/if}
+			{:else}
+				<p class="text-sm"
+					>Enable Windmill AI in the <a href="/workspace_settings?tab=openai">workspace settings.</a
+					></p
+				>
+			{/if}
+		</label>
+	</Popup>
 {/if}
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 71880742dc..715c628dd9 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -301,11 +301,7 @@
 				</Tab>
 
 				<Tab size="md" value="openai">
-					<div class="flex gap-2 items-center my-1"
-						>Windmill AI <span class="text-white px-2 py-1 rounded-full text-xs bg-red-500"
-							>Beta</span
-						></div
-					>
+					<div class="flex gap-2 items-center my-1">Windmill AI</div>
 				</Tab>
 			</Tabs>
 		</div>
@@ -772,8 +768,7 @@
 			{/if}
 			<h3 class="mt-5 text-secondary">
 				Script or flow to run on /windmill command
-				<Tooltip
-				documentationLink="https://www.windmill.dev/docs/integrations/slack">
+				<Tooltip documentationLink="https://www.windmill.dev/docs/integrations/slack">
 					The script or flow to be triggered when the `/windmill` command is invoked.
 				</Tooltip>
 			</h3>
@@ -785,20 +780,24 @@
 				{initialPath}
 				on:select={editSlackCommand}
 			/>
-			<br/>
+			<br />
 			<div class="text-tertiary text-sm">
-				Pick a script or flow meant to be triggered when the `/windmill` command is invoked. Upon connection, templates for a <a href="https://hub.windmill.dev/scripts/slack/1405/">script</a> and <a href="https://hub.windmill.dev/flows/28/">flow</a> are available.
-				
-				<br/><br/>
-				
+				Pick a script or flow meant to be triggered when the `/windmill` command is invoked. Upon
+				connection, templates for a <a href="https://hub.windmill.dev/scripts/slack/1405/">script</a
+				>
+				and <a href="https://hub.windmill.dev/flows/28/">flow</a> are available.
+
+				<br /><br />
+
 				The script or flow chosen is passed the parameters `response_url: string` and `text: string`
 				respectively the url to reply directly to the trigger and the text of the command.
 
-				<br/><br/>
+				<br /><br />
 
-				The script or flow is permissioned as group "slack" that will be automatically created after connection to Slack.
+				The script or flow is permissioned as group "slack" that will be automatically created after
+				connection to Slack.
 
-				<br/><br/>
+				<br /><br />
 
 				See more on <a href="https://www.windmill.dev/docs/integrations/slack">documentation</a>.
 			</div>
@@ -923,9 +922,8 @@
 		{:else if tab == 'openai'}
 			<PageHeader title="Windmill AI" primary={false} />
 			<div class="mt-2">
-				<Alert type="info" title="Experimental feature">
-					Select an OpenAI resource to unlock Windmill AI features! <br /> Windmill AI currently only
-					supports OpenAI's GPT-4.
+				<Alert type="info" title="Select an OpenAI resource to unlock Windmill AI features!">
+					Windmill AI currently only supports OpenAI's GPT-4.
 				</Alert>
 			</div>
 			<div class="mt-5">