From 91277726cd666276ce4b41a722a142eb539089b8 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 04:35:52 -0400
Subject: [PATCH] refac

---
 .../layout/Sidebar/Folders/FolderModal.svelte |  2 +-
 src/lib/components/workspace/Prompts.svelte   | 31 ++++++++++++-
 .../workspace/Prompts/PromptEditor.svelte     | 45 ++++++++++++++++---
 3 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
index dc7d7057b3..f522b17d23 100644
--- a/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
+++ b/src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
@@ -232,7 +232,7 @@
 						<Knowledge bind:selectedItems={data.files}>
 							<div slot="label">
 								<div class="flex w-full justify-between">
-									<div class=" mb-2 text-xs text-gray-500">
+									<div class=" text-xs text-gray-500">
 										{$i18n.t('Knowledge')}
 									</div>
 								</div>
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index b9b5ab017d..e08d9b3c62 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -21,6 +21,8 @@
 	import Clipboard from '../icons/Clipboard.svelte';
 	import Check from '../icons/Check.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Modal from '../common/Modal.svelte';
+	import PromptEditor from './Prompts/PromptEditor.svelte';
 	import Search from '../icons/Search.svelte';
 	import Spinner from '../common/Spinner.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
@@ -49,6 +51,7 @@
 	let loading = false;
 
 	let showDeleteConfirm = false;
+	let showCreateModal = false;
 	let deletePrompt = null;
 
 	let tagsContainerElement: HTMLDivElement;
@@ -63,7 +66,9 @@
 			{
 				id: 'prompts-new',
 				label: $i18n.t('Create'),
-				href: '/workspace/prompts/create'
+				onClick: () => {
+					showCreateModal = true;
+				}
 			},
 			{
 				id: 'prompts-import',
@@ -155,6 +160,20 @@
 		);
 	};
 
+	const createPromptHandler = async (prompt) => {
+		const res = await createNewPrompt(localStorage.token, prompt).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (res) {
+			toast.success($i18n.t('Prompt created successfully'));
+			showCreateModal = false;
+			page = 1;
+			await getPromptList();
+		}
+	};
+
 	const cloneHandler = async (prompt) => {
 		const clonedPrompt = { ...prompt };
 
@@ -257,6 +276,16 @@
 		</div>
 	</DeleteConfirmDialog>
 
+	<Modal bind:show={showCreateModal} size="md">
+		<PromptEditor
+			modal={true}
+			onSubmit={createPromptHandler}
+			onCancel={() => {
+				showCreateModal = false;
+			}}
+		/>
+	</Modal>
+
 	<input
 		id="prompts-import-input"
 		bind:this={promptsImportInputElement}
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 9d1cc86236..a1c16a5e14 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -34,6 +34,8 @@
 	export let prompt = null;
 	export let clone = false;
 	export let disabled = false;
+	export let modal = false;
+	export let onCancel: Function = () => {};
 
 	const i18n = getContext('i18n');
 
@@ -533,8 +535,27 @@
 	</div>
 {:else}
 	<!-- Create mode: Form -->
-	<div class="w-full max-h-full flex justify-center">
-		<form class="flex flex-col w-full mb-10" on:submit|preventDefault={submitHandler}>
+	<div class="w-full max-h-full">
+		{#if modal}
+			<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
+				<h3 class="text-base font-normal">{$i18n.t('Create Prompt')}</h3>
+				<button
+					class="self-center shrink-0 ml-2"
+					aria-label={$i18n.t('Close')}
+					type="button"
+					on:click={() => {
+						onCancel();
+					}}
+				>
+					<XMark className="size-5" />
+				</button>
+			</div>
+		{/if}
+
+		<form
+			class="flex flex-col w-full {modal ? 'px-5 pb-3' : 'mb-10'}"
+			on:submit|preventDefault={submitHandler}
+		>
 			<div class="mb-2">
 				<Tooltip
 					content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t('Activate this command by typing "/{{COMMAND}}" to chat input.', { COMMAND: command })}`}
@@ -543,7 +564,7 @@
 					<div class="flex flex-col w-full">
 						<div class="flex items-center">
 							<input
-								class="text-2xl w-full bg-transparent outline-hidden"
+								class="{modal ? 'text-base' : 'text-2xl'} w-full bg-transparent outline-hidden"
 								placeholder={$i18n.t('Name')}
 								bind:value={name}
 								required
@@ -606,9 +627,23 @@
 				</div>
 			</div>
 
-			<div class="my-4 flex justify-end pb-20">
+			<div class="flex justify-end {modal ? 'pt-3 gap-2' : 'my-4 pb-20'}">
+				{#if modal}
+					<button
+						class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
+						type="button"
+						on:click={() => {
+							onCancel();
+						}}
+					>
+						{$i18n.t('Cancel')}
+					</button>
+				{/if}
+
 				<button
-					class="text-sm w-full lg:w-fit px-4 py-2 transition rounded-xl bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black flex w-full justify-center"
+					class="{modal
+						? 'px-3.5 py-1.5 text-sm rounded-full w-fit'
+						: 'text-sm w-full lg:w-fit px-4 py-2 rounded-xl'} transition bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black flex justify-center"
 					type="submit"
 					disabled={loading}
 				>