feat: copilot tokens streaming + cancel (windmill-labs#2107)

* feat: copilot tokens streaming + cancel * fix: UI improvements
Nliver · Aug 17, 2023 · 82612c3 · 82612c3
1 parent c817af7
commit 82612c3
Show file tree

Hide file tree

Showing 19 changed files with 1,090 additions and 599 deletions.
diff --git a/backend/windmill-api/src/openai.rs b/backend/windmill-api/src/openai.rs
@@ -145,7 +145,7 @@ async fn proxy(
         request = request.header("OpenAI-Organization", org_id);
     }
 
-    let resp = request.send().await.map_err(to_anyhow)?;
+    let response = request.send().await.map_err(to_anyhow)?;
 
     tx = db.begin().await?;
     audit_log(
@@ -160,13 +160,19 @@ async fn proxy(
     .await?;
     tx.commit().await?;
 
+    if response.error_for_status_ref().is_err() {
+        return Err(Error::OpenAIError(
+            response.text().await.unwrap_or("".to_string()),
+        ));
+    }
+
     let mut headers = HeaderMap::new();
-    for (k, v) in resp.headers().iter() {
+    for (k, v) in response.headers().iter() {
         headers.insert(k, v.clone());
     }
 
-    let status_code = resp.status();
-    let stream = resp.bytes_stream();
+    let status_code = response.status();
+    let stream = response.bytes_stream();
 
     Ok((status_code, headers, StreamBody::new(stream)))
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -96,7 +96,7 @@
 		"lucide-svelte": "^0.246.0",
 		"monaco-graphql": "^1.3.0",
 		"monaco-languageclient": "~6.0.3",
-		"openai": "^4.0.0-beta.4",
+		"openai": "^4.0.0-beta.12",
 		"quill": "^1.3.7",
 		"svelte-autosize": "^1.0.1",
 		"svelte-carousel": "^1.0.25",
@@ -365,4 +365,4 @@
 			]
 		}
 	}
-}
+}
diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte
@@ -11,7 +11,7 @@
 	import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
 	import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
 
-	const SIDE_BY_SIDE_MIN_WIDTH = 650
+	const SIDE_BY_SIDE_MIN_WIDTH = 700
 
 	export let automaticLayout = true
 	export let fixedOverflowWidgets = true
@@ -37,25 +37,27 @@
 		})
 	}
 
-	export function setDiff(
-		original: string,
-		modified: string,
+	export function setupModel(
 		lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'javascript' | 'powershell'
-	): void {
+	) {
 		diffEditor?.setModel({
-			original: meditor.createModel(original, lang),
-			modified: meditor.createModel(modified, lang)
+			original: meditor.createModel('', lang),
+			modified: meditor.createModel('', lang)
 		})
+	}
 
-		if (lang !== 'shell') {
-			diffEditor?.getModifiedEditor().getAction('editor.action.formatDocument')?.run()
-		}
+	export function setOriginal(code: string) {
+		diffEditor?.getModel()?.original?.setValue(code)
 	}
 
 	export function getOriginal(): string {
 		return diffEditor?.getModel()?.original.getValue() ?? ''
 	}
 
+	export function setModified(code: string) {
+		diffEditor?.getModel()?.modified?.setValue(code)
+	}
+
 	export function getModified(): string {
 		return diffEditor?.getModel()?.modified.getValue() ?? ''
 	}

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
@@ -126,9 +126,14 @@
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
-			<div class="mb-2 text-tertiary text-sm bg-gray-50/20">
-				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
-			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
+			<div class="flex flex-row w-full justify-between items-center">
+				<div class="mb-2 text-tertiary text-sm">
+					as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
+				>
+				<slot name="copilot-fix" />
+			</div>
+		{/if}
+		{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 w-full text-sm relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				{#if !disableExpand}
@@ -233,9 +238,8 @@
 					href="data:application/octet-stream;base64,{contentOrRootString(result.file)}">Download</a
 				>
 			</div>
-		{:else if !forceJson && resultKind == 'error' && result?.error}<div
-				class="flex flex-col items-start"
-			>
+		{:else if !forceJson && resultKind == 'error' && result?.error}
+			<div class="flex flex-col items-start">
 				<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
 					>{#if result.error.name || result.error.message}{result.error.name}: {result.error
 							.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span

diff --git a/frontend/src/lib/components/HighlightCode.svelte b/frontend/src/lib/components/HighlightCode.svelte
@@ -4,13 +4,17 @@
 	import typescript from 'svelte-highlight/languages/typescript'
 	import go from 'svelte-highlight/languages/go'
 	import shell from 'svelte-highlight/languages/shell'
+	import graphql from 'svelte-highlight/languages/graphql'
+	import javascript from 'svelte-highlight/languages/javascript'
+	import sql from 'svelte-highlight/languages/sql'
+	import powershell from 'svelte-highlight/languages/powershell'
 	import type { Script } from '$lib/gen'
 
 	export let code: string = ''
-	export let language: Script.language | undefined
+	export let language: Script.language | 'frontend' | undefined
 	export let lines = false
 
-	function getLang(lang: string | undefined) {
+	function getLang(lang: Script.language | 'frontend' | undefined) {
 		switch (lang) {
 			case 'python3':
 				return python
@@ -24,6 +28,20 @@
 				return go
 			case 'bash':
 				return shell
+			case 'frontend':
+				return javascript
+			case 'graphql':
+				return graphql
+			case 'mysql':
+				return sql
+			case 'postgresql':
+				return sql
+			case 'snowflake':
+				return sql
+			case 'bigquery':
+				return sql
+			case 'powershell':
+				return powershell
 			default:
 				return typescript
 		}

diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
@@ -131,15 +131,17 @@
 				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
 					<pre class="overflow-x-auto break-words relative h-full px-2">
 						<DisplayResult workspaceId={testJob?.workspace_id} jobId={testJob?.id} result={testJob.result}>
-						{#if lang && editor && diffEditor && testJob?.result?.error}
-								<ScriptFix
-									error={JSON.stringify(testJob.result.error)}
-									{lang}
-									{editor}
-									{diffEditor}
-								/>
-							{/if}
-					</DisplayResult>
+							<svelte:fragment slot="copilot-fix">
+								{#if lang && editor && diffEditor && testJob?.result?.error}
+									<ScriptFix
+										error={JSON.stringify(testJob.result.error)}
+										{lang}
+										{editor}
+										{diffEditor}
+									/>
+								{/if}
+							</svelte:fragment>
+						</DisplayResult>
 					</pre>
 				{:else}
 					<div class="p-2">