refac

src/lib/components/workspace/Knowledge.svelte

@@ -46,6 +46,9 @@
 		};
 	};
 
+	export let showCreateOnMount = false;
+	export let createModalCloseHref = '';
+
 	let loaded = false;
 	let showDeleteConfirm = false;
 	let showCreateModal = false;
@@ -162,6 +165,14 @@
 		}
 	};
 
+	const closeCreateModal = async () => {
+		showCreateModal = false;
+
+		if (createModalCloseHref) {
+			await goto(createModalCloseHref);
+		}
+	};
+
 	const exportHandler = async (item: KnowledgeListItem) => {
 		try {
 			const blob = await exportKnowledgeById(localStorage.token, item.id);
@@ -185,6 +196,10 @@
 		viewOption = localStorage?.workspaceViewOption || '';
 		sourceOption = localStorage?.workspaceKnowledgeSourceOption || '';
 		loaded = true;
+
+		if (showCreateOnMount) {
+			showCreateModal = true;
+		}
 	});
 </script>
 
@@ -202,11 +217,15 @@
 		}}
 	/>
 
-	<Modal bind:show={showCreateModal} size="sm">
+	<Modal
+		bind:show={showCreateModal}
+		size="full"
+		className="!w-[calc(100vw-2rem)] sm:!w-[calc(100vw-3rem)] lg:!w-[calc(100vw-4rem)] !max-w-[80rem] h-[min(54rem,calc(100dvh-4rem))] max-h-[calc(100dvh-4rem)] flex flex-col bg-white dark:bg-gray-900 rounded-4xl"
+	>
 		<CreateKnowledgeBase
 			modal={true}
 			onBack={() => {
-				showCreateModal = false;
+				closeCreateModal();
 			}}
 		/>
 	</Modal>

src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte

@@ -51,7 +51,7 @@
 	};
 </script>
 
-<div class="w-full max-h-full">
+<div class="w-full max-h-full {modal ? 'h-full flex flex-col' : ''}">
 	{#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 a knowledge base')}</h3>
@@ -92,20 +92,20 @@
 	{/if}
 
 	<form
-		class="flex flex-col {modal ? 'px-5 pb-3' : 'max-w-lg mx-auto mt-10 mb-10'}"
+		class="flex flex-col {modal ? 'px-5 pb-3 flex-1 min-h-0' : 'max-w-lg mx-auto mt-10 mb-10'}"
 		on:submit|preventDefault={() => {
 			submitHandler();
 		}}
 	>
-		<div class=" w-full flex flex-col justify-center">
+		<div class="w-full flex flex-col {modal ? 'flex-1 min-h-0' : 'justify-center'}">
 			{#if !modal}
 				<div class=" text-2xl font-normal mb-2.5">
 					{$i18n.t('Create a knowledge base')}
 				</div>
 			{/if}
 
-			<div class="w-full flex flex-col gap-2.5">
-				<div class="w-full">
+			<div class="w-full flex flex-col gap-2.5 {modal ? 'flex-1 min-h-0' : ''}">
+				<div class="w-full shrink-0">
 					<div class=" text-sm mb-2">{$i18n.t('What are you working on?')}</div>
 
 					<div class="w-full mt-1">
@@ -119,12 +119,14 @@
 					</div>
 				</div>
 
-				<div>
+				<div class={modal ? 'flex-1 min-h-0 flex flex-col' : ''}>
 					<div class="text-sm mb-2">{$i18n.t('What are you trying to achieve?')}</div>
 
-					<div class=" w-full mt-1">
+					<div class="w-full mt-1 {modal ? 'flex-1 min-h-0 flex' : ''}">
 						<textarea
-							class="w-full resize-none rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+							class="w-full {modal
+								? 'flex-1 min-h-0'
+								: ''} resize-none rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
 							rows="4"
 							bind:value={description}
 							placeholder={$i18n.t('Describe your knowledge base and objectives')}
@@ -135,7 +137,7 @@
 			</div>
 		</div>
 
-		<div class="mt-2">
+		<div class="mt-2 shrink-0">
 			<AccessControl
 				bind:accessGrants
 				accessRoles={['read', 'write']}
@@ -146,7 +148,7 @@
 			/>
 		</div>
 
-		<div class="flex justify-end {modal ? 'pt-3 gap-2' : 'mt-2'}">
+		<div class="flex justify-end {modal ? 'pt-3 gap-2 shrink-0' : 'mt-2'}">
 			{#if modal}
 				<button
 					class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"

src/lib/components/workspace/Knowledge/KnowledgeBase.svelte

@@ -65,7 +65,7 @@
 	import ConfirmDialog from '../../common/ConfirmDialog.svelte';
 	import Drawer from '$lib/components/common/Drawer.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
-	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import AccessButton from '$lib/components/common/AccessButton.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
 	import Search from '$lib/components/icons/Search.svelte';
 	import FilesOverlay from '$lib/components/chat/MessageInput/FilesOverlay.svelte';
@@ -1264,19 +1264,11 @@
 
 						{#if knowledge?.write_access}
 							<div class="self-center shrink-0">
-								<button
-									class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
-									type="button"
+								<AccessButton
 									on:click={() => {
 										showAccessControlModal = true;
 									}}
-								>
-									<LockClosed strokeWidth="2.5" className="size-3.5" />
-
-									<div class="text-sm font-normal shrink-0">
-										{$i18n.t('Access')}
-									</div>
-								</button>
+								/>
 							</div>
 						{:else}
 							<div class="text-xs shrink-0 text-gray-500">

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -32,7 +32,7 @@
 	import TerminalSelector from './TerminalSelector.svelte';
 	import TTSVoiceInput from './TTSVoiceInput.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
-	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import AccessButton from '$lib/components/common/AccessButton.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -587,19 +587,11 @@
 											required
 										/>
 
-										<button
-											class="flex h-7 shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 text-xs text-gray-700 transition hover:bg-gray-100 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]"
-											type="button"
+										<AccessButton
 											on:click={() => {
 												showAccessControlModal = true;
 											}}
-										>
-											<LockClosed strokeWidth="2.5" className="size-3.5 shrink-0" />
-
-											<div class="font-normal shrink-0">
-												{$i18n.t('Access')}
-											</div>
-										</button>
+										/>
 									</div>
 
 									<input

src/lib/components/workspace/Prompts.svelte

@@ -48,6 +48,9 @@
 		is_production?: boolean;
 	};
 
+	export let showCreateOnMount = false;
+	export let createModalCloseHref = '';
+
 	let shiftKey = false;
 
 	const i18n = getContext<Writable<i18nType>>('i18n');
@@ -188,6 +191,15 @@
 		showCreateModal = true;
 	};
 
+	const closeCreateModal = async () => {
+		showCreateModal = false;
+		createPrompt = null;
+
+		if (createModalCloseHref) {
+			await goto(createModalCloseHref);
+		}
+	};
+
 	const createPromptHandler = async (prompt: PromptDraft) => {
 		const res = await createNewPrompt(localStorage.token, prompt).catch((error) => {
 			toast.error(`${error}`);
@@ -196,10 +208,9 @@
 
 		if (res) {
 			toast.success($i18n.t('Prompt created successfully'));
-			showCreateModal = false;
-			createPrompt = null;
 			page = 1;
 			await getPromptList();
+			await closeCreateModal();
 		}
 	};
 
@@ -274,6 +285,8 @@
 			const prompt = JSON.parse(sessionStorage.prompt);
 			sessionStorage.removeItem('prompt');
 			openCreateModal(toPromptDraft(prompt));
+		} else if (showCreateOnMount) {
+			openCreateModal();
 		}
 
 		const onKeyDown = (event: KeyboardEvent) => {
@@ -329,7 +342,11 @@
 		</div>
 	</DeleteConfirmDialog>
 
-	<Modal bind:show={showCreateModal} size="md">
+	<Modal
+		bind:show={showCreateModal}
+		size="full"
+		className="!w-[calc(100vw-2rem)] sm:!w-[calc(100vw-3rem)] lg:!w-[calc(100vw-4rem)] !max-w-[80rem] h-[min(54rem,calc(100dvh-4rem))] max-h-[calc(100dvh-4rem)] flex flex-col bg-white dark:bg-gray-900 rounded-4xl"
+	>
 		{#key createPrompt}
 			<PromptEditor
 				modal={true}
@@ -337,8 +354,7 @@
 				clone={createPrompt !== null}
 				onSubmit={createPromptHandler}
 				onCancel={() => {
-					showCreateModal = false;
-					createPrompt = null;
+					closeCreateModal();
 				}}
 			/>
 		{/key}

src/lib/components/workspace/Prompts/PromptEditor.svelte

@@ -6,7 +6,7 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import { toast } from 'svelte-sonner';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import AccessButton from '$lib/components/common/AccessButton.svelte';
 	import Clipboard from '$lib/components/icons/Clipboard.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
@@ -416,13 +416,7 @@
 							{$i18n.t('Edit')}
 						</button>
 
-						<button
-							class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2.5 py-1 rounded-full flex gap-1.5 items-center text-sm border border-gray-100 dark:border-gray-800"
-							on:click={() => (showAccessControlModal = true)}
-						>
-							<LockClosed strokeWidth="2.5" className="size-3.5" />
-							{$i18n.t('Access')}
-						</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
@@ -537,7 +531,7 @@
 	</div>
 {:else}
 	<!-- Create mode: Form -->
-	<div class="w-full max-h-full">
+	<div class="w-full max-h-full {modal ? 'h-full flex flex-col' : ''}">
 		{#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>
@@ -555,10 +549,10 @@
 		{/if}
 
 		<form
-			class="flex flex-col w-full {modal ? 'px-5 pb-3' : 'mb-10'}"
+			class="flex flex-col w-full {modal ? 'px-5 pb-3 flex-1 min-h-0' : 'mb-10'}"
 			on:submit|preventDefault={submitHandler}
 		>
-			<div class="mb-2">
+			<div class="mb-2 shrink-0">
 				<Tooltip
 					content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t('Activate this command by typing "/{{COMMAND}}" to chat input.', { COMMAND: command })}`}
 					placement="bottom-start"
@@ -572,16 +566,9 @@
 								required
 							/>
 							<div class="self-center shrink-0">
-								<button
-									class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
-									type="button"
-									on:click={() => (showAccessControlModal = true)}
-								>
-									<LockClosed strokeWidth="2.5" className="size-3.5" />
-									<div class="text-sm font-normal shrink-0">{$i18n.t('Access')}</div>
-								</button>
+								<AccessButton on:click={() => (showAccessControlModal = true)} />
+							</div>
 							</div>
-						</div>
 						<div class="flex gap-0.5 items-center text-xs text-gray-500">
 							<div>/</div>
 							<input
@@ -609,16 +596,25 @@
 				</Tooltip>
 			</div>
 
-			<div class="my-2">
+			<div class={modal ? 'my-2 flex-1 min-h-0 flex flex-col' : 'my-2'}>
 				<div class="text-gray-500 text-xs">{$i18n.t('Prompt Content')}</div>
-				<div class="mt-1">
-					<Textarea
-						className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
-						placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
-						bind:value={content}
-						rows={6}
-						required
-					/>
+				<div class={modal ? 'mt-1 flex-1 min-h-0 flex flex-col' : 'mt-1'}>
+					{#if modal}
+						<textarea
+							class="text-sm w-full flex-1 min-h-0 bg-transparent outline-hidden resize-none"
+							placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
+							bind:value={content}
+							required
+						></textarea>
+					{:else}
+						<Textarea
+							className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
+							placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
+							bind:value={content}
+							rows={6}
+							required
+						/>
+					{/if}
 					<div class="text-xs text-gray-400 dark:text-gray-500">
 						ⓘ {$i18n.t('Use')}
 						<span class="font-normal text-gray-600 dark:text-gray-300"
@@ -629,7 +625,7 @@
 				</div>
 			</div>
 
-			<div class="flex justify-end {modal ? 'pt-3 gap-2' : 'my-4 pb-20'}">
+			<div class="flex justify-end {modal ? 'pt-3 gap-2 shrink-0' : '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"

src/lib/components/workspace/Skills/SkillEditor.svelte

@@ -4,7 +4,7 @@
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import { toast } from 'svelte-sonner';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import AccessButton from '$lib/components/common/AccessButton.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
 	import { user } from '$lib/stores';
@@ -134,17 +134,7 @@
 
 						<div class="self-center shrink-0">
 							{#if !disabled}
-								<button
-									class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
-									type="button"
-									on:click={() => (showAccessControlModal = true)}
-								>
-									<LockClosed strokeWidth="2.5" className="size-3.5" />
-
-									<div class="text-sm font-normal shrink-0">
-										{$i18n.t('Access')}
-									</div>
-								</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"

src/lib/components/workspace/Tools/ToolkitEditor.svelte

@@ -13,7 +13,7 @@
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+	import AccessButton from '$lib/components/common/AccessButton.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
 
 	let formElement = null;
@@ -252,19 +252,11 @@ class Tools:
 						</div>
 
 						<div class="self-center shrink-0">
-							<button
-								class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
-								type="button"
+							<AccessButton
 								on:click={() => {
 									showAccessControlModal = true;
 								}}
-							>
-								<LockClosed strokeWidth="2.5" className="size-3.5" />
-
-								<div class="text-sm font-normal shrink-0">
-									{$i18n.t('Access')}
-								</div>
-							</button>
+							/>
 						</div>
 					</div>