windmill-components 1.613.5 → 1.623.2

package/package/components/common/table/Row.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">import Star from '../../Star.svelte';
-import { createEventDispatcher } from 'svelte';
 import RowIcon from './RowIcon.svelte';
 import { BellOff } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { goto } from '../../../navigation';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-const dispatch = createEventDispatcher();
-let { marked, starred, selected = false, disabled = false, canFavorite = true, isSelectable = false, alignWithSelectable = false, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', summary = undefined, path, href = undefined, workspaceId, depth = 0, badges, actions, customSummary, onSelect = () => { } } = $props();
+let { marked, starred, selected = false, disabled = false, canFavorite = true, isSelectable = false, alignWithSelectable = false, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', summary = undefined, path, href = undefined, workspaceId, depth = 0, badges, actions, customSummary, onSelect = () => { }, onStarred = (newStarred) => { } } = $props();
 let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 </script>
 
@@ -28,7 +26,6 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		depth > 0 ? '!rounded-none' : '',
 		disabled ? 'opacity-25' : 'hover:bg-surface-hover',
 		selected ? 'bg-surface-accent-selected' : ''
-
 	)}
 	style={depth > 0 ? `padding-left: ${depth * 32}px;` : ''}
 >
@@ -39,11 +36,14 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 	{/if}
 
 	{#if href}
-		<a {href} class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4">
+		<a
+			{href}
+			class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4"
+		>
 			{@render rowContent()}
 		</a>
 	{:else}
-			{@render rowContent()}
+		{@render rowContent()}
 	{/if}
 
 	{#if errorHandlerMuted}
@@ -56,17 +56,9 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		</div>
 	{/if}
 
-	{#if canFavorite && kind !== 'resource' && kind !== 'variable'}
+	{#if canFavorite && kind !== 'resource' && kind !== 'variable' && kind !== 'resource_type'}
 		<div class="center-center h-full text-xs font-semibold text-secondary w-9">
-			<Star
-				{kind}
-				{path}
-				{starred}
-				workspace_id={workspaceId}
-				on:starred={() => {
-					dispatch('change')
-				}}
-			/>
+			<Star {kind} {path} {starred} workspace_id={workspaceId} {onStarred} />
 		</div>
 	{:else}
 		<div class="w-9"></div>
@@ -85,12 +77,10 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		<div class="text-emphasis flex-wrap text-left text-xs font-semibold">
 			{#if customSummary}
 				{@render customSummary?.()}
+			{:else if marked}
+				{@html marked}
 			{:else}
-				{#if marked}
-					{@html marked}
-				{:else}
-					{!summary || summary.length == 0 ? displayPath : summary}
-				{/if}
+				{!summary || summary.length == 0 ? displayPath : summary}
 			{/if}
 		</div>
 		<div class="text-hint text-3xs truncate text-left font-normal">

package/package/components/common/table/Row.svelte.d.ts

@@ -9,7 +9,7 @@ interface Props {
     errorHandlerMuted?: boolean;
     aiId?: string | undefined;
     aiDescription?: string | undefined;
-    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable';
+    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type';
     summary?: string | undefined;
     path: string;
     href?: string;
@@ -21,24 +21,8 @@ interface Props {
     onSelect?: (e: Event & {
         currentTarget: EventTarget & HTMLInputElement;
     }) => void;
+    onStarred?: (starred: boolean) => void;
 }
-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 Row: $$__sveltets_2_IsomorphicComponent<Props, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Row = InstanceType<typeof Row>;
+declare const Row: import("svelte").Component<Props, {}, "">;
+type Row = ReturnType<typeof Row>;
 export default Row;

package/package/components/common/table/RowIcon.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import BarsStaggered from '../../icons/BarsStaggered.svelte';
-import { Boxes, Code2, DollarSign, LayoutDashboard } from 'lucide-svelte';
+import { Boxes, Code2, DollarSign, Folder, LayoutDashboard } from 'lucide-svelte';
 export let kind;
 </script>
 
-<div class="flex justify-center items-center">
+<div class="flex justify-center items-center" title={kind}>
 	{#if kind === 'flow'}
 		<BarsStaggered size={16} class="text-teal-500" />
 	{:else if kind === 'app' || kind === 'raw_app'}
@@ -14,6 +14,10 @@ export let kind;
 		<DollarSign size={16} class="text-gray-400" />
 	{:else if kind === 'resource'}
 		<Boxes size={16} class="text-gray-400" />
+	{:else if kind === 'resource_type'}
+		<div style="width: 16px; height: 16px;" class="bg-gray-100 rounded-full" ></div>
+	{:else if kind === 'folder'}
+		<Folder size={16} class="text-gray-400" />
 	{:else}
 		<div class="w-[16px]"></div>
 	{/if}

package/package/components/common/table/RowIcon.svelte.d.ts

@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RowIcon: $$__sveltets_2_IsomorphicComponent<{
-    kind: "script" | "flow" | "app" | "raw_app" | "resource" | "variable";
+    kind: "script" | "flow" | "app" | "raw_app" | "resource" | "variable" | "resource_type" | "folder";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/common/table/ScriptRow.svelte

@@ -68,7 +68,10 @@ let versionsDrawerOpen = $state(false);
 	{starred}
 	{errorHandlerMuted}
 	workspaceId={$workspaceStore ?? ''}
-	on:change
+	onStarred={(newStarred) => {
+		starred = newStarred
+		dispatch('change')
+	}}
 	canFavorite={!script.draft_only}
 	{depth}
 >

package/package/components/copilot/autocomplete/Autocompletor.d.ts

@@ -4,7 +4,7 @@ import type { MonacoLanguageClient } from 'monaco-languageclient';
 export declare class Autocompletor {
     #private;
     constructor(editor: meditor.IStandaloneCodeEditor, scriptLang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json');
-    static isProviderModelSupported(providerModel: AIProviderModel | undefined): boolean | undefined;
+    static isProviderModelSupported(providerModel: AIProviderModel | undefined): boolean;
     dispose(): void;
     setLanguageClient(client: MonacoLanguageClient): void;
 }

package/package/components/copilot/autocomplete/Autocompletor.js

@@ -4,6 +4,7 @@ import { LRUCache } from 'lru-cache';
 import { autocompleteRequest } from './request';
 import { FIM_MAX_TOKENS, getModelContextWindow } from '../lib';
 import { setGlobalCSS } from '../shared';
+import { supportsAutocomplete } from '../utils';
 import { get } from 'svelte/store';
 import { copilotInfo } from '../../../aiStore';
 import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
@@ -143,10 +144,9 @@ export class Autocompletor {
         });
     }
     static isProviderModelSupported(providerModel) {
-        return (providerModel &&
-            providerModel.provider === 'mistral' &&
-            providerModel.model.startsWith('codestral-') &&
-            !providerModel.model.startsWith('codestral-embed'));
+        if (!providerModel)
+            return false;
+        return supportsAutocomplete(providerModel.model);
     }
     dispose() {
         this.#completionDisposable.dispose();

package/package/components/copilot/autocomplete/request.js

@@ -11,19 +11,23 @@ function comment(commentSymbol, text) {
         .join('\n');
 }
 export async function autocompleteRequest(context, abortController) {
-    let commentSymbol = getCommentSymbol(context.scriptLang);
-    let contextLines = comment(commentSymbol, 'You are a code completion assistant. You are given three important contexts (<LANGUAGE CONTEXT>, <DIAGNOSTICS>, <LIBRARY METHODS>) to help you complete the code.\n');
-    contextLines += comment(commentSymbol, 'LANGUAGE CONTEXT:\n');
-    contextLines += comment(commentSymbol, getLangContext(context.scriptLang) + '\n');
-    contextLines += comment(commentSymbol, 'DIAGNOSTICS:\n');
-    contextLines += comment(commentSymbol, context.markers.map((m) => m.message).join('\n') + '\n');
-    contextLines += comment(commentSymbol, 'LIBRARY METHODS:\n');
-    contextLines += comment(commentSymbol, context.libraries + '\n');
-    context.prefix = contextLines + '\n' + context.prefix;
     const providerModel = get(copilotInfo).codeCompletionModel;
     if (!providerModel) {
         throw new Error('No code completion model selected');
     }
+    // Only add context lines for Mistral (native FIM) - other providers use chat completion
+    // too much context degrades significantly the quality of the completion
+    if (providerModel.provider === 'mistral') {
+        let commentSymbol = getCommentSymbol(context.scriptLang);
+        let contextLines = comment(commentSymbol, 'You are a code completion assistant. You are given three important contexts (<LANGUAGE CONTEXT>, <DIAGNOSTICS>, <LIBRARY METHODS>) to help you complete the code.\n');
+        contextLines += comment(commentSymbol, 'LANGUAGE CONTEXT:\n');
+        contextLines += comment(commentSymbol, getLangContext(context.scriptLang) + '\n');
+        contextLines += comment(commentSymbol, 'DIAGNOSTICS:\n');
+        contextLines += comment(commentSymbol, context.markers.map((m) => m.message).join('\n') + '\n');
+        contextLines += comment(commentSymbol, 'LIBRARY METHODS:\n');
+        contextLines += comment(commentSymbol, context.libraries + '\n');
+        context.prefix = contextLines + '\n' + context.prefix;
+    }
     try {
         const completion = await getFimCompletion(context.prefix, context.suffix, providerModel, abortController);
         return completion;

package/package/components/copilot/chat/script/core.js

@@ -355,10 +355,11 @@ export function createDbSchemaTool() {
                 workspace: workspace,
                 path: args.resourcePath
             });
-            const newDbSchemas = {};
-            await getDbSchemas(resource.resource_type, args.resourcePath, workspace, newDbSchemas, (error) => {
-                console.error(error);
-            });
+            const newDbSchemas = {
+                [args.resourcePath]: await getDbSchemas(resource.resource_type, args.resourcePath, workspace, (error) => {
+                    console.error(error);
+                })
+            };
             dbSchemas.update((schemas) => ({ ...schemas, ...newDbSchemas }));
             const dbs = get(dbSchemas);
             const db = dbs[args.resourcePath];

package/package/components/copilot/lib.js

@@ -271,7 +271,6 @@ function prepareMessages(aiProvider, messages) {
 }
 const DEFAULT_COMPLETION_CONFIG = {
     model: '',
-    seed: 42,
     messages: []
 };
 export const PROVIDER_COMPLETION_CONFIG_MAP = {
@@ -282,14 +281,8 @@ export const PROVIDER_COMPLETION_CONFIG_MAP = {
     togetherai: DEFAULT_COMPLETION_CONFIG,
     deepseek: DEFAULT_COMPLETION_CONFIG,
     customai: DEFAULT_COMPLETION_CONFIG,
-    googleai: {
-        ...DEFAULT_COMPLETION_CONFIG,
-        seed: undefined // not supported by gemini
-    },
-    mistral: {
-        ...DEFAULT_COMPLETION_CONFIG,
-        seed: undefined
-    },
+    googleai: DEFAULT_COMPLETION_CONFIG,
+    mistral: DEFAULT_COMPLETION_CONFIG,
     anthropic: DEFAULT_COMPLETION_CONFIG,
     aws_bedrock: DEFAULT_COMPLETION_CONFIG
 };

package/package/components/copilot/utils.d.ts

@@ -6,3 +6,8 @@ export declare function pythonCompile(schema: Schema): string;
 export declare function phpCompile(schema: Schema): string;
 export declare function formatResourceTypes(resourceTypes: ResourceType[], lang: 'python3' | 'typescript' | 'php'): string;
 export declare function yamlStringifyExceptKeys(obj: any, keys: string[]): string;
+/**
+ * Checks if a model supports FIM (Fill-in-the-Middle) autocomplete.
+ * Currently only Codestral models (non-embedding) support this.
+ */
+export declare function supportsAutocomplete(model: string): boolean;

package/package/components/copilot/utils.js

@@ -159,3 +159,11 @@ export function yamlStringifyExceptKeys(obj, keys) {
         }
     });
 }
+/**
+ * Checks if a model supports FIM (Fill-in-the-Middle) autocomplete.
+ * Currently only Codestral models (non-embedding) support this.
+ */
+export function supportsAutocomplete(model) {
+    const lower = model.toLowerCase();
+    return lower.includes('codestral') && !lower.includes('embed');
+}

package/package/components/dbOps.d.ts

@@ -66,7 +66,7 @@ export type IDbSchemaOps = {
     onFetchTableEditorDefinition: (params: {
         table: string;
         schema?: string;
-        getColDefs: () => Promise<TableMetadata>;
+        colDefs: TableMetadata;
     }) => Promise<TableEditorValues>;
 };
 export declare function dbSchemaOpsWithPreviewScripts({ workspace, input }: {

package/package/components/dbOps.js

@@ -132,8 +132,8 @@ export function dbSchemaOpsWithPreviewScripts({ workspace, input }) {
                 requestBody: { args: { ...dbArg }, language, content: dropSchemaQuery }
             });
         },
-        onFetchTableEditorDefinition: async ({ table, schema, getColDefs }) => {
-            let { foreignKeys, pk_constraint_name, colDefs } = await fetchTableRelationalKeys(input, dbType, table, schema, workspace, dbArg, language, getColDefs);
+        onFetchTableEditorDefinition: async ({ table, schema, colDefs }) => {
+            let { foreignKeys, pk_constraint_name } = await fetchTableRelationalKeys(input, dbType, table, schema, workspace, dbArg, language);
             return buildTableEditorValues({
                 tableName: table,
                 metadata: colDefs,

package/package/components/details/DetailPageHeader.svelte

@@ -5,23 +5,37 @@ import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
 import { createEventDispatcher, getContext, tick } from 'svelte';
 import { Calendar } from 'lucide-svelte';
+import { emptyString } from '../../utils';
 const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
-let { mainButtons = [], menuItems = [], title, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), children, trigger_badges } = $props();
+let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), children, trigger_badges } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="border-b p-2 shadow-md">
+<div class="border-b p-1">
 	<div class="mx-auto">
-		<div class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center">
-			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
+		<div
+			class="flex w-full flex-wrap md:flex-nowrap justify-end gap-x-2 gap-y-4 items-center min-h-10"
+		>
+			<div class="grow px-4 inline-flex items-center gap-4 min-w-0">
 				<div
 					class={twMerge(
-						'text-lg min-w-24 font-semibold text-emphasis truncate',
+						'min-w-24 text-emphasis truncate flex flex-col gap-0',
 						$userStore?.operator ? 'pl-10' : ''
 					)}
 				>
-					{title}
-				</div>{#if tag}
+					<span
+						class={twMerge(
+							'text-sm min-w-24 text-emphasis font-semibold truncate',
+							$userStore?.operator ? 'pl-10' : ''
+						)}
+					>
+						{emptyString(summary) ? (path ?? '') : summary}
+					</span>
+					{#if !emptyString(summary)}
+						<span class="text-2xs text-secondary">{path}</span>
+					{/if}
+				</div>
+				{#if tag}
 					<Badge>tag: {tag}</Badge>
 				{/if}
 				{@render children?.()}

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -13,7 +13,8 @@ type MainButton = {
 interface Props {
     mainButtons?: MainButton[];
     menuItems?: MenuItemButton[];
-    title: string;
+    summary?: string;
+    path?: string;
     tag: string | undefined;
     errorHandlerKind: 'flow' | 'script';
     scriptOrFlowPath: string;

package/package/components/details/DetailPageLayout.svelte

@@ -2,13 +2,14 @@
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
 import FlowViewerInner from '../FlowViewerInner.svelte';
-let { isOperator = false, flow_json = undefined, selected = $bindable(), forceSmallScreen = false, isChatMode = false, header, form, scriptRender: script, save_inputs, flow_step, triggers } = $props();
+let { isOperator = false, flow_json = undefined, selected = $bindable(), forceSmallScreen = false, isChatMode = false, header, form, scriptRender: script, save_inputs, flow_step, triggers, flow_graph } = $props();
 let mobileTab = $state('form');
 let clientWidth = $state(window.innerWidth);
 const script_render = $derived(script);
 const save_inputs_render = $derived(save_inputs);
 const flow_step_render = $derived(flow_step);
 const triggers_render = $derived(triggers);
+const flow_graph_render = $derived(flow_graph);
 const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 </script>
 
@@ -49,6 +50,9 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 					{#if !isChatMode}
 						<Tab value="saved_inputs" label="Inputs" />
 					{/if}
+					{#if isChatMode && flow_json}
+						<Tab value="flow" label="Flow graph" />
+					{/if}
 					{#if !isOperator}
 						<Tab value="triggers" label="Triggers" />
 					{/if}
@@ -70,6 +74,11 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 							<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
 								{@render triggers?.()}
 							</TabContent>
+							{#if isChatMode && flow_json}
+								<TabContent value="flow" class="flex flex-col flex-1 h-full">
+									{@render flow_graph_render?.()}
+								</TabContent>
+							{/if}
 							{#if flow_json}
 								<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
 									<FlowViewerInner flow={flow_json} />

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     save_inputs?: import('svelte').Snippet;
     flow_step?: import('svelte').Snippet;
     triggers?: import('svelte').Snippet;
+    flow_graph?: import('svelte').Snippet;
 }
 declare const DetailPageLayout: import("svelte").Component<Props, {}, "selected">;
 type DetailPageLayout = ReturnType<typeof DetailPageLayout>;

package/package/components/flows/conversations/FlowConversationsSidebar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">import { Button } from '../../common';
-import { MessageCircle, Plus, Trash2, PanelLeftClose, PanelLeftOpen, Loader2 } from 'lucide-svelte';
+import { MessageCircle, Plus, Trash2, PanelLeftClose, PanelLeftOpen } from 'lucide-svelte';
 import {} from '../../../gen';
 import CountBadge from '../../common/badge/CountBadge.svelte';
 import InfiniteList from '../../InfiniteList.svelte';
 import { twMerge } from 'tailwind-merge';
 import { FlowChatManager } from './FlowChatManager.svelte';
+import { fade } from 'svelte/transition';
 let { manager } = $props();
 function getConversationTitle(conversation) {
     return conversation.title || `Conversation ${conversation.created_at.slice(0, 10)}`;
@@ -12,35 +13,37 @@ function getConversationTitle(conversation) {
 </script>
 
 <div
-	class="flex flex-col h-full bg-surface border-r border-gray-200 dark:border-gray-700 transition-all duration-300 {manager.isSidebarExpanded
+	class="flex flex-col h-full bg-surface border-r transition-all duration-300 {manager.isSidebarExpanded
 		? 'w-60'
-		: 'w-16'}"
+		: 'w-[44px]'}"
 >
 	<!-- Header -->
-	<div class="flex-shrink-0 p-2 border-b border-gray-200 dark:border-gray-700">
-		<div class="flex flex-col gap-2">
+	<div class="flex-shrink-0 border-b">
+		<div class="flex flex-col gap-2 p-1">
 			<Button
-				size="sm"
-				color="light"
-				startIcon={{ icon: manager.isSidebarExpanded ? PanelLeftClose : PanelLeftOpen }}
-				onclick={() => (manager.isSidebarExpanded = !manager.isSidebarExpanded)}
+				unifiedSize="md"
+				variant="subtle"
+				startIcon={{
+					icon: manager.isSidebarExpanded ? PanelLeftClose : PanelLeftOpen,
+					classes: 'ml-[2px]'
+				}}
+				onClick={() => (manager.isSidebarExpanded = !manager.isSidebarExpanded)}
 				iconOnly={!manager.isSidebarExpanded}
-				btnClasses={manager.isSidebarExpanded ? '!justify-start' : ''}
-				label="Conversations"
+				btnClasses={'justify-start transition-all duration-150'}
+				title="Conversations"
 			>
-				Conversations
+				<div transition:fade={{ duration: 100 }}> Conversations </div>
 			</Button>
 			<Button
-				size="sm"
-				color="light"
-				startIcon={{ icon: Plus }}
-				onclick={() => manager.createConversation({ clearMessages: true })}
+				unifiedSize="md"
+				variant="subtle"
+				startIcon={{ icon: Plus, classes: 'ml-[2px]' }}
+				onClick={() => manager.createConversation({ clearMessages: true })}
 				title="Start new conversation"
 				iconOnly={!manager.isSidebarExpanded}
-				btnClasses={manager.isSidebarExpanded ? '!justify-start' : ''}
-				label="New chat"
+				btnClasses={'justify-start transition-all duration-150 whitespace-nowrap'}
 			>
-				New chat
+				<div transition:fade={{ duration: 100 }}> New chat </div>
 			</Button>
 		</div>
 	</div>
@@ -48,71 +51,79 @@ function getConversationTitle(conversation) {
 	<!-- Conversations List -->
 	{#if !manager.isSidebarExpanded}
 		<!-- Collapsed state - show single chat icon with badge -->
-		<div class="p-2 flex flex-col items-center mt-2">
-			<button
-				class="relative w-[23px] h-[23px] rounded-md center-center hover:bg-surface-hover transition-all duration-100 text-secondary hover:text-primary group"
-				onclick={() => (manager.isSidebarExpanded = true)}
+		<div class="p-1">
+			<Button
+				unifiedSize="md"
+				startIcon={{ icon: MessageCircle }}
+				onClick={() => (manager.isSidebarExpanded = true)}
 				title="{manager.conversations.length} conversation{manager.conversations.length !== 1
 					? 's'
 					: ''}"
+				variant="subtle"
+				btnClasses="w-fit px-2 relative"
 			>
-				<MessageCircle size={16} />
-				<CountBadge count={manager.conversations.length} small={true} alwaysVisible={true} />
-			</button>
+				<CountBadge
+					count={manager.conversations.length}
+					small
+					alwaysVisible={true}
+					class="right-[3px] top-[3px]"
+				/>
+			</Button>
 		</div>
 	{/if}
 
 	<!-- Always mount InfiniteList, but hide it when collapsed -->
-	<div class="flex-1 overflow-hidden" class:hidden={!manager.isSidebarExpanded}>
+	<div
+		class="flex-1 overflow-hidden transition-all duration-150 p-1"
+		class:hidden={!manager.isSidebarExpanded}
+	>
 		<InfiniteList
 			bind:this={manager.conversationListComponent}
 			bind:items={manager.conversations}
 			selectedItemId={manager.selectedConversationId}
 			noBorder={true}
 			rounded={false}
+			preventXOverflow={true}
 		>
-			{#snippet children({ item: conversation, hover })}
-				<div
-					class={twMerge(
-						'w-full p-1',
-						manager.selectedConversationId === conversation.id
-							? 'bg-blue-200/30 text-blue-500 dark:bg-blue-600/30 text-blue-400'
-							: ''
-					)}
-				>
-					<Button
-						color="transparent"
-						size="xs"
-						onclick={() => manager.selectConversation(conversation.id, conversation.isDraft)}
-					>
-						<span class="flex-1 text-left text-sm font-medium text-primary truncate">
-							{getConversationTitle(conversation)}
-						</span>
-						<button
-							class="ml-2 p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-red-500 transition-all {hover ||
-							manager.deletingConversationId === conversation.id
-								? 'opacity-100'
-								: 'opacity-0'}"
-							disabled={manager.deletingConversationId === conversation.id}
-							onclick={(e) => {
-								e.stopPropagation()
-								if (conversation.isDraft) {
-									// just remove first conversation as it is the draft
-									manager.conversations = [...manager.conversations.slice(1)]
-								} else {
-									manager.conversationListComponent?.deleteItem(conversation.id)
-								}
-							}}
-							title="Delete conversation"
+			{#snippet customRow({ item: conversation, hover })}
+				{#if manager.isSidebarExpanded}
+					<div class={twMerge('w-full pb-1')} transition:fade={{ duration: 100, delay: 30 }}>
+						<Button
+							unifiedSize="md"
+							variant="subtle"
+							onClick={() => manager.selectConversation(conversation.id, conversation.isDraft)}
+							selected={manager.selectedConversationId === conversation.id}
+							btnClasses="transition-all duration-150 group"
 						>
-							{#if manager.deletingConversationId === conversation.id}
-								<Loader2 size={14} class="animate-spin" />
-							{:else}
-								<Trash2 size={14} />
-							{/if}
-						</button>
-					</Button>
-				</div>
+							<span class="flex-1 text-left truncate">
+								{getConversationTitle(conversation)}
+							</span>
+							<Button
+								wrapperClasses={twMerge(
+									'ml-2 transition-all duration-100  opacity-0 group-hover:opacity-100',
+									manager.deletingConversationId === conversation.id ? 'opacity-100' : ' '
+								)}
+								disabled={manager.deletingConversationId === conversation.id}
+								onClick={(e) => {
+									e?.stopPropagation()
+									if (conversation.isDraft) {
+										// just remove first conversation as it is the draft
+										manager.conversations = [...manager.conversations.slice(1)]
+									} else {
+										manager.conversationListComponent?.deleteItem(conversation.id)
+									}
+								}}
+								title="Delete conversation"
+								destructive
+								unifiedSize="xs"
+								variant="subtle"
+								loading={manager.deletingConversationId === conversation.id}
+								iconOnly
+								startIcon={{ icon: Trash2 }}
+							/>
+						</Button>
+					</div>
+				{/if}
 			{/snippet}
 
 			{#snippet empty()}
@@ -122,13 +133,4 @@ function getConversationTitle(conversation) {
 			{/snippet}
 		</InfiniteList>
 	</div>
-
-	{#if manager.isSidebarExpanded}
-		<!-- Footer -->
-		<div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
-			<p class="text-xs text-primary">
-				{manager.conversations.length} conversation{manager.conversations.length !== 1 ? 's' : ''}
-			</p>
-		</div>
-	{/if}
 </div>

package/package/components/flows/propPicker/OutputPickerInner.svelte.d.ts

@@ -44,7 +44,7 @@ interface Props {
 }
 declare const OutputPickerInner: import("svelte").Component<Props, {
     setJobPreview: () => void;
-    getPreview: () => "mock" | "job" | undefined;
+    getPreview: () => "job" | "mock" | undefined;
     getHistoryOpen: () => boolean;
     getSelectedJob: () => OutputViewerJob;
 }, "mock" | "isLoading">;