windmill-components 1.558.3 → 1.596.0

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -16,20 +16,20 @@ async function loadResources(workspace) {
 <script lang="ts">import { goto } from '../../navigation';
 import Button from '../common/button/Button.svelte';
 import CalendarPicker from '../common/calendarPicker/CalendarPicker.svelte';
-import { AuditService, ResourceService, UserService, ScriptService, FlowService, AppService } from '../../gen';
+import { AuditService, ResourceService, UserService, ScriptService, FlowService, AppService, CancelError } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
 import { ChevronDown, Loader2, RefreshCcw } from 'lucide-svelte';
-import { onDestroy, tick, untrack } from 'svelte';
+import { onDestroy, untrack } from 'svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import Select from '../select/Select.svelte';
 import { usePromise } from '../../svelte5Utils.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
+import { CancelablePromiseUtils } from '../../cancelable-promise-utils';
+import { sendUserToast } from '../../toast';
 let usernames = $state();
 let resources = usePromise(() => loadResources($workspaceStore), { loadInit: false });
-let loading = $state(false);
-let page = undefined;
-let { logs = $bindable(undefined), username = $bindable('all'), pageIndex = $bindable(1), hasMore = $bindable(false), before = $bindable(undefined), after = $bindable(undefined), perPage = $bindable(100), operation = $bindable(), resource = $bindable(), actionKind = $bindable(undefined), scope = $bindable(undefined) } = $props();
+let { logs = $bindable(undefined), username = $bindable('all'), pageIndex = $bindable(1), hasMore = $bindable(false), before = $bindable(undefined), after = $bindable(undefined), perPage = $bindable(100), operation = $bindable(), resource = $bindable(), actionKind = $bindable(undefined), scope = $bindable(undefined), loading = $bindable(false) } = $props();
 $effect.pre(() => {
     if (logs == undefined) {
         logs = [];
@@ -44,35 +44,40 @@ $effect.pre(() => {
         actionKind = 'all';
     }
 });
-async function loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) {
+function loadLogs() {
     loading = true;
-    if (username == 'all') {
-        username = undefined;
-    }
-    if (operation == 'all' || operation == '') {
-        operation = undefined;
-    }
-    // @ts-ignore
-    if (actionKind == 'all' || actionKind == '') {
-        actionKind = undefined;
-    }
-    if (resource == 'all' || resource == '') {
-        resource = undefined;
-    }
-    logs = await AuditService.listAuditLogs({
+    let username_ = username == 'all' ? undefined : username;
+    let operation_ = operation == 'all' || operation == '' ? undefined : operation;
+    let actionKind_ = actionKind == 'all' ? undefined : actionKind;
+    let resource_ = resource == 'all' || resource == '' ? undefined : resource;
+    let _promise = AuditService.listAuditLogs({
         workspace: scope === 'instance' ? 'global' : $workspaceStore,
-        page,
+        page: pageIndex,
         perPage,
         before,
         after,
-        username,
-        operation,
-        resource,
-        actionKind,
+        username: username_,
+        operation: operation_,
+        resource: resource_,
+        actionKind: actionKind_,
         allWorkspaces: scope === 'all_workspaces'
     });
-    hasMore = logs.length > 0 && logs.length === perPage;
-    loading = false;
+    let promise = CancelablePromiseUtils.map(_promise, (value) => {
+        logs = value;
+        hasMore = !logs || (logs.length > 0 && logs.length === perPage);
+        loading = false;
+    });
+    promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
+        sendUserToast('Loading audit logs is taking longer than expected...', true, perPage > 25
+            ? [{ label: 'Reduce to 25 items per page', callback: () => (perPage = 25) }]
+            : []);
+    });
+    promise = CancelablePromiseUtils.catchErr(promise, (e) => {
+        if (e instanceof CancelError)
+            return CancelablePromiseUtils.pure(undefined);
+        return CancelablePromiseUtils.err(e);
+    });
+    return promise;
 }
 async function loadUsers() {
     usernames =
@@ -80,16 +85,7 @@ async function loadUsers() {
             ? await UserService.listUsernames({ workspace: $workspaceStore })
             : [$userStore?.username ?? ''];
 }
-let initialLoad = true;
-function refreshLogs() {
-    loadUsers();
-    resources.refresh();
-    loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope);
-    tick().then(() => {
-        initialLoad = false;
-    });
-}
-function updateLogs() {
+function updateQueryParams() {
     const queryParams = [];
     function addQueryParam(key, value) {
         if (value !== undefined && value !== null && value !== '' && value !== 'all') {
@@ -97,7 +93,7 @@ function updateLogs() {
         }
     }
     addQueryParam('username', username);
-    addQueryParam('page', page);
+    addQueryParam('page', pageIndex);
     addQueryParam('perPage', perPage);
     addQueryParam('before', before);
     addQueryParam('after', after);
@@ -110,22 +106,6 @@ function updateLogs() {
     }
     const query = '?' + queryParams.join('&');
     goto(query, { replaceState: true, keepFocus: true });
-    loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope);
-}
-function updateQueryParams() {
-    if (initialLoad) {
-        return;
-    }
-    page = 1;
-    pageIndex = 1;
-    updateLogs();
-}
-function updatePageQueryParams(pageIndex) {
-    if (initialLoad) {
-        return;
-    }
-    page = pageIndex;
-    updateLogs();
 }
 window.addEventListener('popstate', handlePopState);
 function handlePopState() {
@@ -236,26 +216,29 @@ const operations = {
     WORKSPACES_UNARCHIVE: 'workspaces.unarchive',
     WORKSPACES_DELETE: 'workspaces.delete'
 };
-let refresh = $state(1);
-$effect(() => {
-    $workspaceStore && refresh && untrack(() => refreshLogs());
-});
+let refresh = $state(0);
+let lastRefresh = $state(-1);
 // observe all the variables that should trigger an update
 $effect(() => {
     ;
-    [username, perPage, before, after, operation, resource, actionKind, scope];
-    updateQueryParams();
-});
-// observe the pageIndex variable that should trigger an update
-$effect(() => {
-    updatePageQueryParams(pageIndex);
+    [refresh, username, perPage, before, after, operation, resource, actionKind, scope, pageIndex];
+    return untrack(() => {
+        if (refresh !== lastRefresh) {
+            loadUsers();
+            resources.refresh();
+            lastRefresh = refresh;
+        }
+        updateQueryParams();
+        let promise = loadLogs();
+        return () => promise?.cancel();
+    });
 });
 </script>
 
-<div class="flex flex-col items-center gap-6 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
+<div class="flex flex-col items-center gap-10 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
 	{#if $workspaceStore == 'admins'}
 		<div class="flex gap-1 relative w-full">
-			<span class="text-xs absolute -top-4">Scope</span>
+			<span class="text-xs absolute font-semibold text-emphasis -top-4">Scope</span>
 			<ToggleButtonGroup
 				selected={scope ?? 'admins'}
 				on:selected={({ detail }) => {
@@ -286,7 +269,7 @@ $effect(() => {
 		</div>
 	{/if}
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">From</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">From</span>
 		<input type="text" value={after ?? 'From'} disabled />
 		<CalendarPicker
 			clearable
@@ -302,7 +285,7 @@ $effect(() => {
 		/>
 	</div>
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">To</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">To</span>
 		<input type="text" value={before ?? 'To'} disabled />
 		<CalendarPicker
 			clearable
@@ -319,61 +302,75 @@ $effect(() => {
 	</div>
 
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Username</span>
-		<select bind:value={username}>
-			{#if usernames}
-				{#if $userStore?.is_admin || $userStore?.is_super_admin}
-					<option selected>all</option>
-				{/if}
-				{#each usernames as e}
-					{#if e == username || $userStore?.is_admin || $userStore?.is_super_admin}
-						<option>{e}</option>
-					{:else}
-						<option disabled>{e}</option>
-					{/if}
-				{/each}
-			{/if}
-		</select>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Username</span>
+		<Select
+			bind:value={username}
+			class="w-full"
+			disablePortal
+			RightIcon={ChevronDown}
+			items={usernames
+				? [
+						...($userStore?.is_admin || $userStore?.is_super_admin
+							? [{ value: 'all', label: 'all' }]
+							: []),
+						...usernames.map((e) => ({
+							value: e,
+							label: e,
+							disabled: e !== username && !$userStore?.is_admin && !$userStore?.is_super_admin
+						}))
+					]
+				: []}
+		/>
 	</div>
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Resource</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Resource</span>
 
 		<Select
+			disablePortal
 			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
 			bind:value={resource}
 			items={safeSelectItems(['all', ...(resources.value ?? [])])}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
+			class="w-full"
 		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Operation</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Operation</span>
 
 		<Select
+			disablePortal
 			bind:value={operation}
 			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
+			class="w-full"
 		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Action</span>
+		<span class="text-xs absolute font-semibold text-emphasis -top-4">Action</span>
 
-		<select class="!truncate" bind:value={actionKind}>
-			<option selected value="all">all</option>
-			{#each ['Create', 'Update', 'Delete', 'Execute'] as e}
-				<option value={e.toLocaleLowerCase()}>{e}</option>
-			{/each}
-		</select>
+		<Select
+			class="w-full"
+			bind:value={actionKind}
+			disablePortal
+			RightIcon={ChevronDown}
+			items={[
+				{ value: 'all', label: 'all' },
+				{ value: 'create', label: 'Create' },
+				{ value: 'update', label: 'Update' },
+				{ value: 'delete', label: 'Delete' },
+				{ value: 'execute', label: 'Execute' }
+			]}
+		/>
 	</div>
 
 	<div class="flex flex-row gap-1">
 		<Button
-			variant="contained"
-			color="light"
+			variant="subtle"
 			on:click={() => {
 				after = undefined
 				before = undefined
@@ -385,17 +382,16 @@ $effect(() => {
 				resource = 'all'
 				scope = undefined
 			}}
-			size="xs"
+			unifiedSize="md"
 		>
 			Clear filters
 		</Button>
 		<Button
-			variant="contained"
-			color="dark"
+			variant="accent"
 			on:click={() => {
 				refresh++
 			}}
-			size="xs"
+			unifiedSize="md"
 		>
 			<div class="flex flex-row gap-1 items-center">
 				{#if loading}

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts

@@ -12,7 +12,8 @@ interface Props {
     resource?: string | undefined;
     actionKind?: ActionKind | 'all';
     scope?: undefined | 'all_workspaces' | 'instance';
+    loading?: boolean;
 }
-declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "logs" | "before" | "after" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "scope">;
+declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "logs" | "before" | "after" | "loading" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "scope">;
 type AuditLogsFilters = ReturnType<typeof AuditLogsFilters>;
 export default AuditLogsFilters;

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -2,10 +2,10 @@
 import { displayDate } from '../../utils';
 import { onMount, tick } from 'svelte';
 import Button from '../common/button/Button.svelte';
-import { ListFilter, ChevronLeft, ChevronRight } from 'lucide-svelte';
+import { ChevronLeft, ChevronRight, ListFilterPlus, Loader2 } from 'lucide-svelte';
 import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
 import { twMerge } from 'tailwind-merge';
-let { logs = [], pageIndex = $bindable(1), perPage = $bindable(100), hasMore = $bindable(true), actionKind = $bindable(), operation = $bindable(), selectedId = undefined, usernameFilter = $bindable(), resourceFilter = $bindable(), showWorkspace = false, onselect } = $props();
+let { logs = [], pageIndex = $bindable(1), perPage = $bindable(100), hasMore = $bindable(true), actionKind = $bindable(), operation = $bindable(), selectedId = undefined, usernameFilter = $bindable(), resourceFilter = $bindable(), showWorkspace = false, onselect, loading } = $props();
 function groupLogsByDay(logs) {
     const groupedLogs = {};
     if (!logs)
@@ -72,6 +72,7 @@ function kindToBadgeColor(kind) {
     }
     return 'gray';
 }
+let height = $derived(tableHeight - headerHeight - footerHeight);
 </script>
 
 <svelte:window onresize={() => computeHeight()} />
@@ -79,26 +80,41 @@ function kindToBadgeColor(kind) {
 <div class="divide-y min-w-[640px] h-full" id="audit-logs-table-wrapper">
 	<div bind:clientHeight={headerHeight}>
 		<div
-			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-xs font-semibold"
+			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-2xs font-normal text-primary"
 		>
 			<div class="w-1/12">ID</div>
-			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Timestamp</div>
-			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Username</div>
+			<div class={showWorkspace ? 'w-2/12' : 'w-3/12'}>Timestamp</div>
+			<div class={showWorkspace ? 'w-2/12' : 'w-3/12'}>Username</div>
 			{#if showWorkspace}
 				<div class="w-2/12">Workspace</div>
 			{/if}
-			<div class={showWorkspace ? "w-2/12" : "w-3/12"}>Operation</div>
+			<div class={showWorkspace ? 'w-2/12' : 'w-3/12'}>Operation</div>
 			<div class="w-2/12">Resource</div>
 		</div>
 	</div>
-	{#if logs?.length == 0}
-		<div class="text-xs text-secondary p-8"> No logs found for the selected filters. </div>
+
+	{#if loading}
+		<div style="height: {height}px;" class="flex justify-center items-center">
+			<Loader2 class="animate-spin" />
+		</div>
+	{:else if !logs?.length}
+		<div
+			class="text-xs text-secondary p-8 flex justify-center items-center"
+			style="height: {height}px;"
+		>
+			No logs found for the selected filters.
+		</div>
 	{:else}
 		<VirtualList
 			width="100%"
-			height={tableHeight - headerHeight - footerHeight}
+			{height}
 			itemCount={flatLogs?.length ?? 0}
-			itemSize={42}
+			itemSize={(index) => {
+				if (flatLogs?.[index]?.type === 'date') {
+					return 33
+				}
+				return 42
+			}}
 			overscanCount={20}
 			{stickyIndices}
 			scrollToAlignment="center"
@@ -111,7 +127,9 @@ function kindToBadgeColor(kind) {
 
 						{#if logOrDate}
 							{#if logOrDate?.type === 'date'}
-								<div class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-5">
+								<div
+									class="bg-surface-secondary py-2 border-b font-normal text-primary text-xs pl-5"
+								>
 									{logOrDate.date}
 								</div>
 							{:else}
@@ -120,6 +138,7 @@ function kindToBadgeColor(kind) {
 								<div
 									class={twMerge(
 										'flex flex-row items-center h-full w-full px-2 py-1 hover:bg-surface-hover cursor-pointer',
+										'text-primary text-xs',
 										logOrDate.log.id === selectedId ? 'bg-blue-50 dark:bg-blue-900/50' : ''
 									)}
 									role="button"
@@ -131,10 +150,10 @@ function kindToBadgeColor(kind) {
 									<div class="w-1/12 text-xs truncate">
 										{logOrDate.log.id}
 									</div>
-									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
+									<div class={showWorkspace ? 'w-2/12 text-xs' : 'w-3/12 text-xs'}>
 										{displayDate(logOrDate.log.timestamp)}
 									</div>
-									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
+									<div class={showWorkspace ? 'w-2/12 text-xs' : 'w-3/12 text-xs'}>
 										<div class="flex flex-row gap-2 items-center">
 											<div class="whitespace-nowrap overflow-x-auto no-scrollbar max-w-60">
 												{logOrDate.log.username}
@@ -143,10 +162,10 @@ function kindToBadgeColor(kind) {
 												{/if}
 											</div>
 											<Button
-												color="light"
-												size="xs2"
+												variant="subtle"
+												unifiedSize="sm"
 												iconOnly
-												startIcon={{ icon: ListFilter }}
+												startIcon={{ icon: ListFilterPlus }}
 												on:click={() => {
 													usernameFilter = logOrDate.log.username
 												}}
@@ -160,10 +179,11 @@ function kindToBadgeColor(kind) {
 											</div>
 										</div>
 									{/if}
-									<div class={showWorkspace ? "w-2/12 text-xs" : "w-3/12 text-xs"}>
+									<div class={showWorkspace ? 'w-2/12 text-xs' : 'w-3/12 text-xs'}>
 										<div class="flex flex-row gap-1">
 											<Badge
-												on:click={() => {
+												clickable
+												onclick={() => {
 													actionKind = logOrDate.log.action_kind.toLocaleLowerCase()
 												}}
 												color={kindToBadgeColor(logOrDate.log.action_kind)}
@@ -171,7 +191,8 @@ function kindToBadgeColor(kind) {
 												{logOrDate.log.action_kind}
 											</Badge>
 											<Badge
-												on:click={() => {
+												clickable
+												onclick={() => {
 													operation = logOrDate.log.operation
 												}}
 											>
@@ -185,10 +206,10 @@ function kindToBadgeColor(kind) {
 												{logOrDate.log.resource}
 											</div>
 											<Button
-												color="light"
-												size="xs2"
+												variant="subtle"
+												unifiedSize="sm"
 												iconOnly
-												startIcon={{ icon: ListFilter }}
+												startIcon={{ icon: ListFilterPlus }}
 												on:click={() => {
 													resourceFilter = logOrDate.log.resource
 												}}
@@ -213,11 +234,14 @@ function kindToBadgeColor(kind) {
 		</VirtualList>
 	{/if}
 	<!-- Pagination footer - always visible -->
-	<div class="flex flex-row justify-between items-center p-2 bg-surface-primary border-t">
+	<div
+		class="flex flex-row justify-between items-center p-2 bg-surface-primary border-t"
+		style:height={`${footerHeight}px`}
+	>
 		<div class="flex flex-row gap-2 items-center">
 			<Button
-				color="light"
-				size="xs2"
+				variant="subtle"
+				unifiedSize="sm"
 				startIcon={{ icon: ChevronLeft }}
 				on:click={() => {
 					pageIndex = (pageIndex ?? 1) - 1
@@ -228,8 +252,8 @@ function kindToBadgeColor(kind) {
 			</Button>
 			<span class="text-xs text-secondary px-2">Page {pageIndex}</span>
 			<Button
-				color="light"
-				size="xs2"
+				variant="subtle"
+				unifiedSize="sm"
 				endIcon={{ icon: ChevronRight }}
 				on:click={() => {
 					pageIndex = (pageIndex ?? 1) + 1
@@ -241,10 +265,7 @@ function kindToBadgeColor(kind) {
 		</div>
 		<div class="flex flex-row gap-2 items-center">
 			<span class="text-xs text-secondary">Per page:</span>
-			<select
-				bind:value={perPage}
-				class="text-xs bg-transparent border border-gray-300 dark:border-gray-600 rounded px-2 py-1"
-			>
+			<select bind:value={perPage} class="text-xs border rounded-md px-2 py-1">
 				<option value={25}>25</option>
 				<option value={100}>100</option>
 				<option value={1000}>1000</option>

package/package/components/auditLogs/AuditLogsTable.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     usernameFilter?: string | undefined;
     resourceFilter?: string | undefined;
     showWorkspace?: boolean;
+    loading?: boolean;
     onselect?: (id: number) => void;
 }
 declare const AuditLogsTable: import("svelte").Component<Props, {}, "operation" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "usernameFilter" | "resourceFilter">;

package/package/components/auditLogs/AuditLogsTimeline.svelte

@@ -435,7 +435,7 @@ const chartOptions = $derived(() => ({
 }));
 </script>
 
-<div class="p-4 bg-surface mb-4 h-full">
+<div class="p-4 bg-surface mb-4 h-full text-xs">
 	{#if logs.length === 0}
 		<div class="text-center py-8 text-secondary"> No audit logs to display </div>
 	{:else if !groupedData || groupedData.status === 'loading'}

package/package/components/chat/ChatInput.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { Button } from '../common';
+import { ArrowUp, Square } from 'lucide-svelte';
+import autosize from '../../autosize';
+import { createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+let { value = $bindable(), placeholder = 'Type your message here...', disabled = false, onSend, onKeydown = undefined, customCss = undefined, bindTextarea = $bindable(undefined), showCancelButton = false, onCancel = undefined, cancelTitle = 'Cancel execution', sendTitle = 'Send message' } = $props();
+function handleKeydown(e) {
+    onKeydown?.(e);
+}
+</script>
+
+<div
+	class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-600 bg-surface-input px-3 py-2 {customCss
+		?.container?.class ?? ''}"
+	style={customCss?.container?.style}
+>
+	<textarea
+		bind:this={bindTextarea}
+		bind:value
+		use:autosize
+		onkeydown={handleKeydown}
+		onpointerdown={stopPropagation(bubble('pointerdown'))}
+		{placeholder}
+		class="flex-1 min-h-[24px] max-h-32 resize-none !border-0 text-sm placeholder-gray-400 !outline-none !ring-0 p-0 !shadow-none focus:!border-0 focus:!outline-none focus:!ring-0 focus:!shadow-none {customCss
+			?.input?.class ?? ''}"
+		style={customCss?.input?.style}
+		rows={3}
+	></textarea>
+	{#if showCancelButton && onCancel}
+		<Button
+			color="red"
+			size="xs2"
+			btnClasses="!rounded-full !p-1.5 {customCss?.button?.class ?? ''}"
+			style={customCss?.button?.style}
+			startIcon={{ icon: Square }}
+			on:click={onCancel}
+			iconOnly
+			title={cancelTitle}
+		/>
+	{:else}
+		<Button
+			color="blue"
+			size="xs2"
+			btnClasses="!rounded-full !p-1.5 {customCss?.button?.class ?? ''}"
+			style={customCss?.button?.style}
+			startIcon={{ icon: ArrowUp }}
+			disabled={!value.trim() || disabled}
+			on:click={onSend}
+			iconOnly
+			title={sendTitle}
+		/>
+	{/if}
+</div>

package/package/components/chat/ChatInput.svelte.d.ts

@@ -0,0 +1,29 @@
+interface Props {
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onSend: () => void;
+    onKeydown?: (e: KeyboardEvent) => void;
+    customCss?: {
+        container?: {
+            class?: string;
+            style?: string;
+        };
+        input?: {
+            class?: string;
+            style?: string;
+        };
+        button?: {
+            class?: string;
+            style?: string;
+        };
+    };
+    bindTextarea?: HTMLTextAreaElement;
+    showCancelButton?: boolean;
+    onCancel?: () => void;
+    cancelTitle?: string;
+    sendTitle?: string;
+}
+declare const ChatInput: import("svelte").Component<Props, {}, "value" | "bindTextarea">;
+type ChatInput = ReturnType<typeof ChatInput>;
+export default ChatInput;