windmill-components 1.473.1 → 1.493.3

package/package/components/copilot/chat/AIChatDisplay.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+import AssistantMessage from './AssistantMessage.svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import { HistoryIcon, Loader2, Plus, X } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+import Popover from '../../meltComponents/Popover.svelte';
+import {} from './core';
+import ContextElementBadge from './ContextElementBadge.svelte';
+import ContextTextarea from './ContextTextarea.svelte';
+import AvailableContextList from './AvailableContextList.svelte';
+import ChatQuickActions from './ChatQuickActions.svelte';
+import ProviderModelSelector from './ProviderModelSelector.svelte';
+export let pastChats;
+export let messages;
+export let instructions;
+export let selectedContext;
+export let availableContext;
+export let hasDiff;
+export let diffMode = false;
+const dispatch = createEventDispatcher();
+const { loading, currentReply } = getContext('AIChatContext');
+export function enableAutomaticScroll() {
+    automaticScroll = true;
+}
+let contextTextareaComponent;
+export function focusInput() {
+    contextTextareaComponent?.focus();
+}
+let automaticScroll = true;
+let scrollEl;
+async function scrollDown() {
+    scrollEl?.scrollTo({
+        top: scrollEl.scrollHeight,
+        behavior: 'smooth'
+    });
+}
+let height = 0;
+$: automaticScroll && height && scrollDown();
+function addContextToSelection(contextElement) {
+    if (!selectedContext.find((c) => c.type === contextElement.type && c.title === contextElement.title) &&
+        availableContext.find((c) => c.type === contextElement.type && c.title === contextElement.title)) {
+        selectedContext = [...selectedContext, contextElement];
+    }
+}
+</script>
+
+<div class="flex flex-col h-full">
+	<div
+		class="flex flex-row items-center justify-between gap-2 p-2 border-b border-gray-200 dark:border-gray-600"
+	>
+		<div class="flex flex-row items-center gap-2">
+			<slot name="header-left" />
+			<p class="text-sm font-semibold">Chat</p>
+		</div>
+		<div class="flex flex-row items-center gap-2">
+			<Popover>
+				<svelte:fragment slot="trigger">
+					<Button
+						on:click={() => {}}
+						title="History"
+						size="md"
+						btnClasses="!p-1"
+						startIcon={{ icon: HistoryIcon }}
+						iconOnly
+						variant="border"
+						color="light"
+						propagateEvent
+					/>
+				</svelte:fragment>
+				<svelte:fragment slot="content" let:close>
+					<div class="p-1 overflow-y-auto max-h-[300px]">
+						{#if pastChats.length === 0}
+							<div class="text-center text-tertiary text-xs">No history</div>
+						{:else}
+							<div class="flex flex-col">
+								{#each pastChats as chat}
+									<button
+										class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
+										on:click={() => {
+											dispatch('loadPastChat', { id: chat.id })
+											close()
+										}}
+									>
+										<div
+											class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
+											title={chat.title}
+										>
+											{chat.title}
+										</div>
+										<Button
+											iconOnly
+											size="xs2"
+											btnClasses="!p-1"
+											color="light"
+											variant="border"
+											startIcon={{ icon: X }}
+											on:click={() => {
+												dispatch('deletePastChat', { id: chat.id })
+											}}
+										/>
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</svelte:fragment>
+			</Popover>
+			<Button
+				title="New chat"
+				on:click={() => {
+					dispatch('saveAndClear')
+				}}
+				size="md"
+				btnClasses="!p-1"
+				startIcon={{ icon: Plus }}
+				iconOnly
+				variant="border"
+				color="light"
+			/>
+			<slot name="header-right" />
+		</div>
+	</div>
+	{#if messages.length > 0}
+		<div
+			class="h-full overflow-y-scroll pt-2"
+			bind:this={scrollEl}
+			on:wheel={(e) => {
+				automaticScroll = false
+			}}
+		>
+			<div class="flex flex-col" bind:clientHeight={height}>
+				{#each messages as message}
+					{#if message.role === 'user' && message.contextElements}
+						<div class="flex flex-row gap-1 mb-1 overflow-scroll no-scrollbar px-2">
+							{#each message.contextElements as element}
+								<ContextElementBadge contextElement={element} />
+							{/each}
+						</div>
+					{/if}
+					<div
+						class={twMerge(
+							'text-sm py-1 mx-2',
+							message.role === 'user' &&
+								'px-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 rounded-lg mb-2',
+							message.role === 'assistant' && 'px-[1px] mb-6'
+						)}
+					>
+						{#if message.role === 'assistant'}
+							<AssistantMessage {message} />
+						{:else}
+							{message.content}
+						{/if}
+					</div>
+				{/each}
+				{#if $loading && !$currentReply}
+					<div class="mb-6 py-1 px-2">
+						<Loader2 class="animate-spin" />
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class:border-t={messages.length > 0}>
+		<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 px-2 no-scrollbar">
+			<Popover>
+				<svelte:fragment slot="trigger">
+					<div
+						class="border rounded-md px-1 py-0.5 font-normal text-tertiary text-xs hover:bg-surface-hover"
+						>@</div
+					>
+				</svelte:fragment>
+				<svelte:fragment slot="content" let:close>
+					<AvailableContextList
+						{availableContext}
+						{selectedContext}
+						onSelect={(element) => {
+							addContextToSelection(element)
+							close()
+						}}
+					/>
+				</svelte:fragment>
+			</Popover>
+			{#each selectedContext as element}
+				<ContextElementBadge
+					contextElement={element}
+					deletable
+					on:delete={() => {
+						selectedContext = selectedContext.filter(
+							(c) => c.type !== element.type || c.title !== element.title
+						)
+					}}
+				/>
+			{/each}
+		</div>
+		<ContextTextarea
+			bind:this={contextTextareaComponent}
+			{instructions}
+			{availableContext}
+			{selectedContext}
+			isFirstMessage={messages.length === 0}
+			on:addContext={(e) => addContextToSelection(e.detail.contextElement)}
+			on:sendRequest={() => dispatch('sendRequest')}
+			on:updateInstructions={(e) => (instructions = e.detail.value)}
+		/>
+		<div
+			class={`flex flex-row ${
+				hasDiff ? 'justify-between' : 'justify-end'
+			} items-center gap-2 px-0.5`}
+		>
+			{#if hasDiff}
+				<ChatQuickActions on:analyzeChanges on:explainChanges on:suggestImprovements {diffMode} />
+			{/if}
+			<ProviderModelSelector />
+		</div>
+	</div>
+</div>

package/package/components/copilot/chat/AIChatDisplay.svelte.d.ts

@@ -0,0 +1,50 @@
+import { type DisplayMessage, type ContextElement } from './core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AiChatDisplay: $$__sveltets_2_IsomorphicComponent<{
+    pastChats: {
+        id: string;
+        title: string;
+    }[];
+    messages: DisplayMessage[];
+    instructions: string;
+    selectedContext: ContextElement[];
+    availableContext: ContextElement[];
+    hasDiff: boolean;
+    diffMode?: boolean;
+    enableAutomaticScroll?: () => void;
+    focusInput?: () => void;
+}, {
+    analyzeChanges: CustomEvent<any>;
+    explainChanges: CustomEvent<any>;
+    suggestImprovements: CustomEvent<any>;
+    sendRequest: CustomEvent<null>;
+    saveAndClear: CustomEvent<null>;
+    deletePastChat: CustomEvent<{
+        id: string;
+    }>;
+    loadPastChat: CustomEvent<{
+        id: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'header-left': {};
+    'header-right': {};
+}, {
+    enableAutomaticScroll: () => void;
+    focusInput: () => void;
+}, string>;
+type AiChatDisplay = InstanceType<typeof AiChatDisplay>;
+export default AiChatDisplay;

package/package/components/copilot/chat/AssistantMessage.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import Markdown from 'svelte-exmarkdown';
+import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+import CodeDisplay from './CodeDisplay.svelte';
+import { setContext } from 'svelte';
+export let message;
+setContext('AssistantMessageContext', {
+    message
+});
+</script>
+
+<div
+	class="prose prose-sm dark:prose-invert w-full max-w-full leading-snug space-y-2 prose-ul:!pl-6"
+>
+	<Markdown
+		md={message.content}
+		plugins={[
+			gfmPlugin(),
+			{
+				renderer: {
+					pre: CodeDisplay
+				}
+			}
+		]}
+	/>
+</div>

package/package/components/copilot/chat/AssistantMessage.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { DisplayMessage } from './core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AssistantMessage: $$__sveltets_2_IsomorphicComponent<{
+    message: DisplayMessage;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AssistantMessage = InstanceType<typeof AssistantMessage>;
+export default AssistantMessage;

package/package/components/copilot/chat/AvailableContextList.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { ContextIconMap } from './core';
+export let availableContext;
+export let selectedContext;
+export let onSelect;
+export let showAllAvailable = false;
+export let stringSearch = '';
+export let selectedIndex = 0;
+$: actualAvailableContext = showAllAvailable
+    ? availableContext.filter((c) => !stringSearch || c.title.toLowerCase().includes(stringSearch.toLowerCase()))
+    : availableContext.filter((c) => !selectedContext.find((sc) => sc.type === c.type && sc.title === c.title) &&
+        (!stringSearch || c.title.toLowerCase().includes(stringSearch.toLowerCase())));
+</script>
+
+<div class="flex flex-col gap-1 text-tertiary text-xs p-1 min-w-24 max-h-48 overflow-y-scroll">
+	{#if actualAvailableContext.length === 0}
+		<div class="text-center text-tertiary text-xs">No available context</div>
+	{:else}
+		{#each actualAvailableContext as element, i}
+			<button
+				class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-row gap-1 items-center font-normal {i ===
+				selectedIndex
+					? 'bg-surface-hover'
+					: ''}"
+				on:click={() => onSelect(element)}
+			>
+				<svelte:component this={ContextIconMap[element.type]} size={16} />
+				{element.title}
+			</button>
+		{/each}
+	{/if}
+</div>

package/package/components/copilot/chat/AvailableContextList.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ContextElement } from './core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AvailableContextList: $$__sveltets_2_IsomorphicComponent<{
+    availableContext: ContextElement[];
+    selectedContext: ContextElement[];
+    onSelect: (element: ContextElement) => void;
+    showAllAvailable?: boolean;
+    stringSearch?: string;
+    selectedIndex?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AvailableContextList = InstanceType<typeof AvailableContextList>;
+export default AvailableContextList;

package/package/components/copilot/chat/ChatQuickActions.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">import { createEventDispatcher } from 'svelte';
+import { SparklesIcon, LightbulbIcon, DiffIcon } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+export let diffMode = false;
+let iconClasses = '!w-3 !h-3 !px-0 !m-0';
+const dispatch = createEventDispatcher();
+$: btnClasses = `!px-1 !py-0.5 !gap-1 ${diffMode
+    ? '!bg-surface dark:!bg-surface border-frost-500 dark:border-frost-500'
+    : '!font-normal'}`;
+</script>
+
+<div class="flex flex-row items-center gap-2 px-2 py-1">
+	<div class="flex flex-row items-center gap-1.5">
+		{#if diffMode}
+			<Button
+				on:click={() => {
+					dispatch('analyzeChanges')
+				}}
+				title="Analyze changes"
+				size="xs"
+				{btnClasses}
+				startIcon={{ icon: SparklesIcon, classes: iconClasses }}
+				variant="border"
+				color="light"
+				propagateEvent
+			>
+				Analyze
+			</Button>
+		{:else}
+			<Button
+				on:click={() => {
+					dispatch('explainChanges')
+				}}
+				title="Explain changes"
+				size="xs3"
+				{btnClasses}
+				startIcon={{ icon: DiffIcon, classes: iconClasses }}
+				variant="border"
+				color="light"
+				propagateEvent
+			>
+				Explain
+			</Button>
+			<Button
+				on:click={() => {
+					dispatch('suggestImprovements')
+				}}
+				title="Suggest improvements"
+				size="xs"
+				{btnClasses}
+				startIcon={{ icon: LightbulbIcon, classes: iconClasses }}
+				variant="border"
+				color="light"
+				propagateEvent
+			>
+				Improve
+			</Button>
+		{/if}
+	</div>
+</div>

package/package/components/copilot/chat/ChatQuickActions.svelte.d.ts

@@ -0,0 +1,24 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChatQuickActions: $$__sveltets_2_IsomorphicComponent<{
+    diffMode?: boolean;
+}, {
+    analyzeChanges: CustomEvent<null>;
+    explainChanges: CustomEvent<null>;
+    suggestImprovements: CustomEvent<null>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ChatQuickActions = InstanceType<typeof ChatQuickActions>;
+export default ChatQuickActions;

package/package/components/copilot/chat/CodeDisplay.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">import { Button } from '../../common';
+import { getAstNode } from 'svelte-exmarkdown';
+import { editor as meditor } from 'monaco-editor';
+import { getContext, untrack } from 'svelte';
+import { Loader2 } from 'lucide-svelte';
+import { initializeVscode } from '../../vscode';
+import HighlightCode from '../../HighlightCode.svelte';
+import { csharp, go, graphql, javascript, php, python, rust, shell, sql, typescript, yaml } from 'svelte-highlight/languages';
+import { scriptLangToEditorLang } from '../../../scripts';
+const astNode = getAstNode();
+const { loading: loadingContext, currentReply, applyCode } = getContext('AIChatContext');
+const { message } = getContext('AssistantMessageContext');
+let codeContext = $derived(message.contextElements?.find((e) => e.type === 'code'));
+function getSmartLang(lang) {
+    switch (lang) {
+        case 'python':
+        case 'python3':
+            return 'python';
+        case 'deno':
+        case 'nativets':
+        case 'bun':
+        case 'bunnative':
+        case 'typescript':
+            return 'typescript';
+        case 'go':
+            return 'go';
+        case 'shell':
+        case 'bash':
+            return 'shell';
+        case 'frontend':
+        case 'javascript':
+            return 'javascript';
+        case 'graphql':
+            return 'graphql';
+        case 'mysql':
+        case 'snowflake':
+        case 'bigquery':
+        case 'oracledb':
+        case 'powershell':
+        case 'postgresql':
+        case 'sql':
+            return 'sql';
+        case 'php':
+            return 'php';
+        case 'rust':
+            return 'rust';
+        case 'csharp':
+            return 'csharp';
+        case 'ansible':
+        case 'yaml':
+            return 'yaml';
+        default:
+            return 'typescript';
+    }
+}
+const SMART_LANG_TO_HIGHLIGHT_LANG = {
+    python: python,
+    typescript: typescript,
+    go: go,
+    shell: shell,
+    javascript: javascript,
+    graphql: graphql,
+    sql: sql,
+    php: php,
+    rust: rust,
+    csharp: csharp,
+    yaml: yaml
+};
+let code = $derived(astNode.current.children?.[0]?.children?.[0]?.value);
+let language = $derived(astNode.current.children?.[0]?.properties?.class?.split('-')[1]);
+let loading = $state(true);
+$effect(() => {
+    // we only want to trigger when astNode offset is updated not currentReply, otherwise as there is some delay on the offset update, loading would be set to false too early
+    const completeReply = untrack(() => $currentReply);
+    if (!$loadingContext || completeReply.length > (astNode.current.position?.end.offset ?? 0)) {
+        loading = false;
+    }
+});
+let diffEl = $state();
+let diffEditor = $state();
+async function setDiffEditor(diffEl) {
+    if (!codeContext) {
+        return;
+    }
+    await initializeVscode();
+    diffEditor = meditor.createDiffEditor(diffEl, {
+        automaticLayout: true,
+        renderSideBySide: false,
+        hideUnchangedRegions: {
+            enabled: true
+        },
+        originalEditable: false,
+        readOnly: true,
+        renderGutterMenu: false,
+        renderOverviewRuler: false,
+        scrollBeyondLastLine: false,
+        overviewRulerLanes: 0,
+        lineNumbersMinChars: 0,
+        lightbulb: {
+            enabled: meditor.ShowLightbulbIconMode.Off
+        },
+        scrollbar: {
+            alwaysConsumeMouseWheel: false
+        }
+    });
+    diffEditor.setModel({
+        original: meditor.createModel(codeContext.content, scriptLangToEditorLang(codeContext.lang)),
+        modified: meditor.createModel(code ?? '', language ? getSmartLang(language) : undefined)
+    });
+    const originalEditor = diffEditor.getOriginalEditor();
+    const modifiedEditor = diffEditor.getModifiedEditor();
+    originalEditor.onDidContentSizeChange((e) => {
+        diffEl.style.height = `${e.contentHeight}px`;
+    });
+    modifiedEditor.onDidContentSizeChange((e) => {
+        diffEl.style.height = `${e.contentHeight}px`;
+    });
+    updateModifiedModel(code ?? '');
+}
+function updateModifiedModel(code) {
+    const modified = diffEditor?.getModifiedEditor();
+    if (!modified)
+        return;
+    const modifiedModel = modified.getModel();
+    if (modifiedModel) {
+        modifiedModel.setValue(code ?? '');
+    }
+}
+$effect(() => updateModifiedModel(code ?? ''));
+$effect(() => {
+    diffEl &&
+        language &&
+        codeContext &&
+        getSmartLang(codeContext.lang) === getSmartLang(language) &&
+        setDiffEditor(diffEl);
+});
+</script>
+
+<div class="flex flex-col gap-0.5 rounded-lg relative not-prose">
+	{#if codeContext}
+		<div class="flex justify-end items-end">
+			<Button
+				color="dark"
+				size="xs2"
+				on:click={() => {
+					applyCode(code ?? '')
+				}}
+			>
+				Apply
+			</Button>
+		</div>
+	{/if}
+
+	<div
+		class="relative w-full border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden"
+	>
+		{#if (loading && !code) || !language}
+			<div class="flex flex-row gap-1 p-2 items-center justify-center">
+				<Loader2 class="w-4 h-4 animate-spin" /> Generating code...
+			</div>
+		{:else if !loading && codeContext && getSmartLang(codeContext.lang) === getSmartLang(language)}
+			<div bind:this={diffEl} class="w-full h-full"></div>
+		{:else}
+			<HighlightCode
+				class="p-1"
+				code={code ?? ''}
+				highlightLanguage={SMART_LANG_TO_HIGHLIGHT_LANG[getSmartLang(language)]}
+				language={undefined}
+			/>
+		{/if}
+	</div>
+</div>

package/package/components/copilot/chat/CodeDisplay.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CodeDisplay: import("svelte").Component<Record<string, never>, {}, "">;
+type CodeDisplay = ReturnType<typeof CodeDisplay>;
+export default CodeDisplay;