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 05:40:40 -04:00
parent 21e180182a
commit d027a32ed1
4 changed files with 306 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/workspace/Prompts/PromptEditor.svelte
+58 -45
View File
@@ -2,6 +2,7 @@
import { onMount, tick, getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import type { i18n as i18nType } from 'i18next';
import { goto } from '$app/navigation';
import Textarea from '$lib/components/common/Textarea.svelte';
import { toast } from 'svelte-sonner';
@@ -15,6 +16,7 @@
import Spinner from '$lib/components/common/Spinner.svelte';
import Modal from '$lib/components/common/Modal.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
import {
getPromptHistory,
setProductionPromptVersion,
@@ -382,9 +384,19 @@
{#if edit}
<!-- Edit mode: Read-only view with history -->
<div class="flex flex-col w-full h-full max-h-[100dvh]">
<!-- Header -->
<div class="flex items-start justify-between gap-4 shrink-0">
<div class="flex h-full max-h-[100dvh] w-full flex-col">
<button
class="mb-1 flex h-6 w-fit items-center gap-1 rounded-md px-0.5 text-xs text-gray-400 transition-colors duration-75 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
type="button"
on:click={() => {
goto('/workspace/prompts');
}}
>
<ChevronLeft className="size-3" strokeWidth="2" />
<span>{$i18n.t('Back')}</span>
</button>
<div class="flex shrink-0 items-start justify-between gap-3 pb-2">
<div class="min-w-0 flex-1">
<input
class="w-full bg-transparent text-sm outline-hidden"
@@ -394,49 +406,35 @@
{disabled}
/>
<div class="flex w-full flex-1 items-center gap-0.5 text-xs text-gray-500">
<span>/</span>
<input
class="bg-transparent outline-hidden"
placeholder={$i18n.t('command')}
bind:value={command}
on:input={debouncedSaveMetadata}
{disabled}
/>
<div class="mt-0.5 flex min-w-0 items-center gap-2 text-xs text-gray-500">
<div class="flex min-w-0 flex-1 items-center gap-0.5">
<span>/</span>
<input
class="min-w-0 flex-1 bg-transparent outline-hidden"
placeholder={$i18n.t('command')}
bind:value={command}
on:input={debouncedSaveMetadata}
{disabled}
/>
</div>
</div>
</div>
<div>
<div class="flex items-center gap-2 shrink-0 justify-end">
{#if !disabled}
<button
class="flex shrink-0 items-center rounded-lg bg-gray-50 px-2 py-1 text-xs text-gray-900 ring-1 ring-gray-200 transition hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
on:click={() => (showEditModal = true)}
>
{$i18n.t('Edit')}
</button>
<div class="flex shrink-0 items-center gap-1.5 pr-0.5">
{#if !disabled}
<button
class="flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
on:click={() => (showEditModal = true)}
>
{$i18n.t('Edit')}
</button>
<AccessButton on:click={() => (showAccessControlModal = true)} />
{:else}
<span class="text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
>{$i18n.t('Read Only')}</span
>
{/if}
</div>
<div>
<Tooltip content={$i18n.t('Click to copy ID')}>
<button
class="text-xs text-gray-500 font-mono px-2 py-1 rounded-lg cursor-pointer hover:underline transition"
on:click={() => {
copyToClipboard(prompt.id);
toast.success($i18n.t('ID copied to clipboard'));
}}
>
{prompt.id}
</button>
</Tooltip>
</div>
<AccessButton on:click={() => (showAccessControlModal = true)} />
{:else}
<span class="rounded-lg bg-gray-100 px-2 py-1 text-xs text-gray-500 dark:bg-gray-850">
{$i18n.t('Read Only')}
</span>
{/if}
</div>
</div>
@@ -456,6 +454,18 @@
}}
/>
</div>
<Tooltip content={$i18n.t('Click to copy ID')}>
<button
class="min-w-0 max-w-[14rem] shrink-0 truncate rounded-md px-1 py-0.5 font-mono text-xs text-gray-400 transition hover:text-gray-700 dark:hover:text-gray-300"
on:click={() => {
copyToClipboard(prompt.id);
toast.success($i18n.t('ID copied to clipboard'));
}}
>
{prompt.id}
</button>
</Tooltip>
</div>
<div class="flex flex-1 flex-col gap-3 overflow-hidden pb-4 md:flex-row">
@@ -517,9 +527,12 @@
</button>
</div>
<!-- Scrollable content -->
<div class="h-full overflow-y-auto rounded-lg bg-transparent px-1 py-1">
<pre class="text-xs whitespace-pre-wrap font-mono pr-8">{selectedHistoryEntry?.snapshot
?.content || content}</pre>
<div
class="h-full overflow-y-auto rounded-lg bg-gray-50/60 px-3 py-2 dark:bg-white/[0.03]"
>
<pre
class="whitespace-pre-wrap pr-8 font-mono text-[11px] leading-relaxed">{selectedHistoryEntry
?.snapshot?.content || content}</pre>
</div>
</div>
</div>