bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-17 00:54:13 -04:00
parent 27d7eafcd9
commit ce44b90eae
7 changed files with 686 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/automations/AutomationEditor.svelte
+203 -326
View File
@@ -4,73 +4,53 @@
import { goto } from '$app/navigation';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import type i18nType from '$lib/i18n';
import { WEBUI_NAME, mobile, showSidebar } from '$lib/stores';
import { WEBUI_NAME } from '$lib/stores';
import {
updateAutomationById,
getAutomationById,
toggleAutomationById,
runAutomationById,
deleteAutomationById,
getAutomationRuns,
type AutomationForm,
type AutomationResponse,
type AutomationRunModel
} from '$lib/apis/automations';
import AutomationModal from '$lib/components/AutomationModal.svelte';
import AutomationItemHeaderActions from '$lib/components/automations/AutomationItemHeaderActions.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
import SidebarIcon from '$lib/components/icons/Sidebar.svelte';
import ArrowRight from '$lib/components/icons/ArrowRight.svelte';
import ScheduleDropdown from '$lib/components/automations/ScheduleDropdown.svelte';
import ModelDropdown from '$lib/components/automations/ModelDropdown.svelte';
dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
const i18n = getContext('i18n');
const i18n: typeof i18nType = getContext('i18n');
const automationsLayout: any = getContext('automationsLayout');
export let automation: AutomationResponse;
let name = '';
let prompt = '';
let model_id = '';
let is_active = true;
let is_active = automation.is_active;
let loading = false;
let saving = false;
let showDeleteConfirm = false;
let showEditModal = false;
let runs: AutomationRunModel[] = [];
let runsLoading = false;
let hasMoreRuns = true;
let runsPage = 0;
let isDirty = false;
let scheduleDropdown: ScheduleDropdown;
const formatRunTime = (ts: number): string => {
const now = Date.now();
const diff = now - ts / 1_000_000;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
const weeks = Math.floor(days / 7);
const years = Math.floor(days / 365);
if (years > 0) return $i18n.t('{{COUNT}}y', { COUNT: years, context: 'time_ago' });
if (weeks > 0) return $i18n.t('{{COUNT}}w', { COUNT: weeks, context: 'time_ago' });
if (days > 0) return $i18n.t('{{COUNT}}d', { COUNT: days, context: 'time_ago' });
if (hours > 0) return $i18n.t('{{COUNT}}h', { COUNT: hours, context: 'time_ago' });
if (minutes > 0) return $i18n.t('{{COUNT}}m', { COUNT: minutes, context: 'time_ago' });
return $i18n.t('1m', { context: 'time_ago' });
const formatTime = (ts: number | null): string => {
if (!ts) return '-';
return new Date(ts / 1_000_000).toLocaleString(undefined, {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
};
const formatNextRun = (ts: number | null): string => {
@@ -80,36 +60,57 @@
return d.format('L LT');
};
const saveHandler = async () => {
if (!name.trim() || !prompt.trim() || !model_id.trim()) {
toast.error($i18n.t('Name, prompt, and model are required'));
return;
}
saving = true;
try {
const form: AutomationForm = {
name: name.trim(),
data: {
prompt: prompt.trim(),
model_id: model_id.trim(),
rrule: scheduleDropdown.buildRrule()
},
is_active
};
const updated = await updateAutomationById(localStorage.token, automation.id, form);
if (updated) {
automation = updated;
isDirty = false;
toast.success($i18n.t('Automation updated'));
const formatSchedule = (rrule: string): string => {
if (rrule.includes('COUNT=1')) {
const match = rrule.match(/DTSTART:(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})/);
if (match) {
const d = new Date(`${match[1]}-${match[2]}-${match[3]}T${match[4]}:${match[5]}`);
return `${$i18n.t('Once')} · ${d.toLocaleDateString(undefined, {
month: 'short',
day: 'numeric'
})} ${d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}`;
}
} catch (e: any) {
toast.error(e?.detail ?? `${e}` ?? 'Failed to save');
} finally {
saving = false;
return $i18n.t('Once');
}
const parts: Record<string, string> = {};
rrule
.replace('RRULE:', '')
.split(';')
.forEach((part) => {
const [key, value] = part.split('=');
if (key && value) parts[key] = value;
});
const freq = parts.FREQ || '';
const hour = parseInt(parts.BYHOUR || '0');
const minute = (parts.BYMINUTE || '0').padStart(2, '0');
const interval = parseInt(parts.INTERVAL || '1');
const ampm = hour >= 12 ? 'PM' : 'AM';
const hour12 = hour % 12 || 12;
const time = `${hour12}:${minute} ${ampm}`;
if (freq === 'MINUTELY')
return interval === 1
? $i18n.t('Every minute')
: $i18n.t('Every {{count}} minutes', { count: interval });
if (freq === 'HOURLY')
return interval === 1
? $i18n.t('Hourly')
: $i18n.t('Every {{count}} hours', { count: interval });
if (freq === 'DAILY') return `${$i18n.t('Daily at')} ${time}`;
if (freq === 'WEEKLY')
return parts.BYDAY
? `${parts.BYDAY} ${$i18n.t('at')} ${time}`
: `${$i18n.t('Weekly at')} ${time}`;
if (freq === 'MONTHLY')
return `${$i18n.t('Monthly')} ${parts.BYMONTHDAY ?? '1'} ${$i18n.t('at')} ${time}`;
return rrule;
};
const toggleHandler = async () => {
const previousState = automation.is_active;
const res = await toggleAutomationById(localStorage.token, automation.id).catch((err) => {
toast.error(`${err}`);
return null;
@@ -117,6 +118,8 @@
if (res) {
is_active = res.is_active;
automation = res;
} else {
is_active = previousState;
}
};
@@ -133,6 +136,19 @@
loading = false;
};
const editSavedHandler = async () => {
const updated = await getAutomationById(localStorage.token, automation.id).catch((err) => {
toast.error(`${err}`);
return null;
});
if (updated) {
automation = updated;
is_active = updated.is_active;
await loadRuns();
}
};
const deleteHandler = async () => {
const res = await deleteAutomationById(localStorage.token, automation.id).catch((err) => {
toast.error(`${err}`);
@@ -173,10 +189,6 @@
runsLoading = false;
};
const markDirty = () => {
isDirty = true;
};
const onScroll = (e: Event) => {
const target = e.target as HTMLElement;
if (target.scrollTop + target.clientHeight >= target.scrollHeight - 50) {
@@ -187,21 +199,29 @@
};
onMount(async () => {
name = automation.name;
prompt = automation.data.prompt;
model_id = automation.data.model_id;
is_active = automation.is_active;
if (scheduleDropdown) {
scheduleDropdown.parseRrule(automation.data.rrule);
}
await loadRuns();
});
$: if (automation) {
automationsLayout?.setHeader({
itemName: automation.name,
actions: AutomationItemHeaderActions,
actionProps: {
isActive: is_active,
loading,
toggleHandler,
runNowHandler,
editHandler: () => (showEditModal = true),
deleteHandler: () => (showDeleteConfirm = true)
}
});
}
</script>
<svelte:head>
<title>{name || $i18n.t('Automation')} • {$WEBUI_NAME}</title>
<title>{automation.name || $i18n.t('Automation')} • {$WEBUI_NAME}</title>
</svelte:head>
<DeleteConfirmDialog
@@ -214,267 +234,124 @@
</div>
</DeleteConfirmDialog>
<div
class="flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
? 'md:max-w-[calc(100%-var(--sidebar-width))]'
: ''} max-w-full"
>
<div class="flex-1 max-h-full flex flex-col pt-3 pb-1 px-3 md:px-[18px]">
<!-- Header Segment (Shrink-0 so it doesn't compress) -->
<div class="flex items-start justify-between gap-4 shrink-0 mb-0.5">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-0.5 md:gap-1.5 mb-1.5">
{#if $mobile}
<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
<button
id="sidebar-toggle-button"
class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
on:click={() => {
showSidebar.set(!$showSidebar);
}}
type="button"
>
<div class="self-center p-1.5">
<SidebarIcon className="size-4" />
</div>
</button>
</Tooltip>
{/if}
<Tooltip content={$i18n.t('Back')}>
<button
class="text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition"
aria-label={$i18n.t('Back')}
on:click={() => goto('/automations')}
type="button"
>
<ChevronLeft strokeWidth="2.5" />
</button>
</Tooltip>
<input
class="text-2xl w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Automation Name')}
bind:value={name}
on:input={markDirty}
/>
</div>
</div>
<AutomationModal bind:show={showEditModal} {automation} on:save={editSavedHandler} />
<div class="flex items-center gap-2 shrink-0">
<Tooltip content={$i18n.t('Delete')}>
<button
class="p-2 rounded-full bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-gray-500 hover:text-black dark:hover:text-white transition"
on:click={() => (showDeleteConfirm = true)}
type="button"
>
<GarbageBin />
</button>
</Tooltip>
{#if isDirty}
<button
class="px-3 py-1 text-sm bg-black text-white dark:bg-white dark:text-black rounded-full hover:opacity-90 transition flex items-center gap-1.5"
on:click={saveHandler}
disabled={saving}
type="button"
>
{$i18n.t('Save')}
{#if saving}
<Spinner className="size-3" />
{/if}
</button>
{/if}
<button
class="px-2.5 py-1 text-sm border border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-850 transition rounded-full flex items-center gap-1.5"
on:click={runNowHandler}
type="button"
disabled={loading}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-3.5"
>
<path
d="M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.344-5.891a1.5 1.5 0 0 0 0-2.538L6.3 2.841Z"
/>
</svg>
<div class="hidden md:block">{$i18n.t('Run now')}</div>
{#if loading}
<Spinner className="size-3" />
{/if}
</button>
</div>
<div class="h-full overflow-y-auto scrollbar-hidden">
<div class="pb-1 px-1">
<div class="flex h-7 items-center px-3">
<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
{$i18n.t('Status')}
</span>
<span
class="flex min-w-0 items-center gap-1.5 text-xs {is_active
? 'text-emerald-700 dark:text-emerald-400'
: 'text-gray-600 dark:text-gray-400'}"
>
<svg class="size-1.5 shrink-0" viewBox="0 0 6 6" fill="currentColor" aria-hidden="true">
<circle cx="3" cy="3" r="3" />
</svg>
{is_active ? $i18n.t('Active') : $i18n.t('Paused')}
</span>
</div>
<!-- Content Segment: Independent Scrolling Columns based on PromptEditor -->
<div class="flex flex-col md:flex-row gap-4 flex-1 overflow-hidden pb-2 px-1">
<!-- Main Input Column -->
<div class="flex-1 flex flex-col min-h-0 overflow-hidden">
<div class="flex items-center justify-between mb-2 shrink-0 px-1">
<div class="text-gray-500 text-xs">{$i18n.t('Instructions')}</div>
</div>
<div class="relative flex-1 min-h-0">
<div
class="bg-gray-50 dark:bg-gray-900 rounded-2xl p-4 border border-gray-100/50 dark:border-gray-850/50 h-full"
>
<textarea
class="w-full h-full text-sm bg-transparent outline-hidden resize-none placeholder:text-gray-300 dark:placeholder:text-gray-700"
bind:value={prompt}
on:input={markDirty}
placeholder={$i18n.t('Enter the prompt instructions for this automation...')}
/>
</div>
</div>
</div>
<div class="flex h-7 items-center px-3">
<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
{$i18n.t('Schedule')}
</span>
<span class="min-w-0 truncate text-xs text-gray-700 dark:text-gray-300">
{formatSchedule(automation.data.rrule)}
</span>
</div>
<!-- Sidebar Configuration Column -->
<div class="hidden md:flex w-full md:w-66 shrink-0 overflow-y-auto px-1 flex-col gap-5">
<div class="flex h-7 items-center px-3">
<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
{$i18n.t('Model')}
</span>
<span class="min-w-0 truncate text-xs text-gray-700 dark:text-gray-300">
{automation.data.model_id}
</span>
</div>
<div class="flex h-7 items-center px-3">
<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
{$i18n.t('Next run')}
</span>
<span class="min-w-0 truncate text-xs text-gray-700 dark:text-gray-300">
{formatNextRun(automation.next_runs?.[0] ?? automation.next_run_at)}
</span>
</div>
<div class="flex h-7 items-center px-3">
<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
{$i18n.t('Last run')}
</span>
<span class="min-w-0 truncate text-xs text-gray-700 dark:text-gray-300">
{automation.last_run_at ? formatNextRun(automation.last_run_at) : $i18n.t('Never')}
</span>
</div>
</div>
<hr class="h-px my-1.5 border-0 bg-gray-100 dark:bg-gray-850" />
<div class="px-4 py-2">
<div class="mb-2 text-[11px] text-gray-400 dark:text-gray-500">{$i18n.t('Prompt')}</div>
<div
class="whitespace-pre-wrap font-mono text-xs leading-relaxed text-gray-700 dark:text-gray-300"
>
{automation.data.prompt}
</div>
</div>
<hr class="h-px my-1.5 border-0 bg-gray-100 dark:bg-gray-850" />
<div class="px-4 py-2">
<div class="mb-1 text-[11px] text-gray-400 dark:text-gray-500">{$i18n.t('Runs')}</div>
<div class="overflow-y-auto scrollbar-hidden" on:scroll={onScroll}>
{#if runsLoading && runs.length === 0}
<div class="flex justify-center py-8">
<Spinner className="size-4" />
</div>
{:else if runs.length === 0}
<div class="py-2 text-[11px] text-gray-400 dark:text-gray-600">
{$i18n.t('No runs yet')}
</div>
{:else}
<div>
<div class="text-gray-500 text-xs mb-3">{$i18n.t('Configuration')}</div>
<div class="space-y-1">
<!-- Schedule -->
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Repeats')}</span>
<ScheduleDropdown
bind:this={scheduleDropdown}
side="bottom"
align="end"
onChange={markDirty}
/>
</div>
<!-- Model -->
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Model')}</span>
<ModelDropdown bind:model_id side="bottom" align="end" onChange={markDirty} />
</div>
</div>
</div>
<!-- Status section -->
<div>
<div class="text-gray-500 text-xs mb-3">{$i18n.t('Status')}</div>
<div class="space-y-2.5">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400">{$i18n.t('State')}</span>
{#each runs as run}
<div class="flex h-7 items-center gap-2 text-xs">
<span
class="flex items-center gap-1.5 text-xs {is_active
? 'text-emerald-700 dark:text-emerald-400'
: 'text-gray-600 dark:text-gray-400'}"
>
<span
class="inline-block size-1.5 rounded-full {is_active
? 'bg-emerald-500'
: 'bg-gray-400'}"
></span>
{is_active ? $i18n.t('Active') : $i18n.t('Paused')}
</span>
class="h-1.5 w-1.5 shrink-0 rounded-full {run.status === 'success'
? 'bg-emerald-500'
: 'bg-red-400'}"
></span>
<span class="text-gray-500 dark:text-gray-400">{formatTime(run.created_at)}</span>
{#if run.chat_id}
<button
class="group flex items-center gap-1 text-[0.6875rem] text-gray-400"
on:click={() => {
goto(`/c/${run.chat_id}`);
}}
type="button"
>
<span class="group-hover:underline">{$i18n.t('View chat')}</span>
<ArrowRight className="size-2.5" strokeWidth="2" />
</button>
{/if}
{#if run.error}
<span class="truncate text-[0.6875rem] text-red-400" title={run.error}>
{run.error}
</span>
{/if}
</div>
{/each}
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Next run')}</span>
<span class=" text-gray-700 dark:text-gray-300"
>{formatNextRun(automation.next_runs?.[0] ?? automation.next_run_at)}</span
>
{#if runsLoading && runs.length > 0}
<div class="flex justify-center py-4">
<Spinner className="size-4" />
</div>
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400">{$i18n.t('Last ran')}</span>
<span class=" text-gray-700 dark:text-gray-300"
>{automation.last_run_at
? formatNextRun(automation.last_run_at)
: $i18n.t('Never')}</span
>
</div>
</div>
{/if}
</div>
<div class="flex-1 flex flex-col min-h-0 -mx-1">
<div class="text-gray-500 text-xs mb-2 mx-1 shrink-0">
{$i18n.t('Execution Logs')}
</div>
<div class="flex-1 overflow-y-auto scrollbar-hidden w-full" on:scroll={onScroll}>
{#if runsLoading && runs.length === 0}
<div class="flex justify-center py-4">
<Spinner className="size-4" />
</div>
{:else if runs.length === 0}
<div class="text-xs text-gray-400 py-4 tabular-nums">
{$i18n.t('No execution logs available yet')}
</div>
{:else}
<div class="space-y-0.5 w-full">
{#each runs as run (run.id)}
<button
class="w-full text-left flex items-center gap-2.5 px-2.5 py-1.5 rounded-xl hover:bg-gray-100/80 dark:hover:bg-gray-850/80 transition-colors {run.chat_id
? 'cursor-pointer'
: 'cursor-default'}"
on:click={() => {
if (run.chat_id) goto(`/c/${run.chat_id}`);
}}
type="button"
>
<div class="shrink-0 flex items-center justify-center">
{#if run.status === 'success'}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-3 text-emerald-500"
><path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
clip-rule="evenodd"
/></svg
>
{:else if run.status === 'error'}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-3 text-red-500"
><path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
clip-rule="evenodd"
/></svg
>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="size-3 text-blue-500"
><path
d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
/></svg
>
{/if}
</div>
<div class="flex-1 min-w-0">
<div class="text-xs text-gray-800 dark:text-gray-200 truncate">
{automation.name}
</div>
</div>
<span class="shrink-0 text-[10px] text-gray-500 font-mono"
>{formatRunTime(run.created_at)}</span
>
</button>
{/each}
{#if runsLoading && runs.length > 0}
<div class="flex justify-center py-4">
<Spinner className="size-4" />
</div>
{/if}
</div>
{/if}
</div>
</div>
</div>
{/if}
</div>
</div>
</div>
src/lib/components/automations/AutomationItemHeaderActions.svelte
+70
View File
@@ -0,0 +1,70 @@
<script lang="ts">
import { getContext } from 'svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import Switch from '$lib/components/common/Switch.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import Play from '$lib/components/icons/Play.svelte';
import type i18nType from '$lib/i18n';
const i18n: typeof i18nType = getContext('i18n');
export let isActive = true;
export let loading = false;
export let toggleHandler = () => {};
export let runNowHandler = () => {};
export let editHandler = () => {};
export let deleteHandler = () => {};
</script>
<div class="ml-auto flex shrink-0 items-center">
<Tooltip content={isActive ? $i18n.t('Active') : $i18n.t('Paused')}>
<div class="flex h-7 items-center px-1 mr-1">
<Switch
state={isActive}
on:change={toggleHandler}
ariaLabel={isActive ? $i18n.t('Active') : $i18n.t('Paused')}
/>
</div>
</Tooltip>
<Tooltip content={$i18n.t('Run now')}>
<button
class="flex size-7 items-center justify-center text-gray-400 transition disabled:opacity-60"
on:click={runNowHandler}
type="button"
disabled={loading}
aria-label={$i18n.t('Run now')}
>
{#if loading}
<Spinner className="size-3" />
{:else}
<Play className="size-3.5" strokeWidth="1.5" />
{/if}
</button>
</Tooltip>
<Tooltip content={$i18n.t('Edit')}>
<button
class="flex size-7 items-center justify-center text-gray-400 transition"
on:click={editHandler}
type="button"
aria-label={$i18n.t('Edit')}
>
<Pencil className="size-3.5" strokeWidth="1.7" />
</button>
</Tooltip>
<Tooltip content={$i18n.t('Delete')}>
<button
class="flex size-7 items-center justify-center text-gray-400 transition"
on:click={deleteHandler}
type="button"
aria-label={$i18n.t('Delete')}
>
<GarbageBin className="size-3.5" />
</button>
</Tooltip>
</div>
src/lib/components/automations/AutomationListHeaderActions.svelte
+9
View File
@@ -0,0 +1,9 @@
<script lang="ts">
import SplitCreateButton from '$lib/components/common/SplitCreateButton.svelte';
export let actions: any[] = [];
</script>
<div class="ml-auto flex items-center gap-1">
<SplitCreateButton {actions} />
</div>
src/lib/components/icons/Play.svelte
+20
View File
@@ -0,0 +1,20 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
class={className}
>
<path
d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z"
/>
</svg>