From 7d756982c2ea0d441d9e0666fa29750360486bf4 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 26 May 2025 23:22:37 +0400
Subject: [PATCH] refac

---
 src/lib/components/admin/Functions.svelte     | 21 +++--
 .../admin/Functions/AddFunctionMenu.svelte    | 76 +++++++++++++++++++
 .../admin/Functions/ImportModal.svelte        |  0
 src/lib/components/icons/Github.svelte        | 19 +++++
 src/lib/components/notes/RecordMenu.svelte    |  6 +-
 src/lib/components/workspace/Models.svelte    |  4 +-
 6 files changed, 116 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/admin/Functions/AddFunctionMenu.svelte
 create mode 100644 src/lib/components/admin/Functions/ImportModal.svelte
 create mode 100644 src/lib/components/icons/Github.svelte

diff --git a/src/lib/components/admin/Functions.svelte b/src/lib/components/admin/Functions.svelte
index 82dc6f4384..b4f78fdfc5 100644
--- a/src/lib/components/admin/Functions.svelte
+++ b/src/lib/components/admin/Functions.svelte
@@ -33,6 +33,7 @@
 	import Plus from '../icons/Plus.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
 	import XMark from '../icons/XMark.svelte';
+	import AddFunctionMenu from './Functions/AddFunctionMenu.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -41,6 +42,8 @@
 	let functionsImportInputElement: HTMLInputElement;
 	let importFiles;
 
+	let showImportModal = false;
+
 	let showConfirm = false;
 	let query = '';
 
@@ -232,12 +235,20 @@
 		</div>
 
 		<div>
-			<a
-				class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
-				href="/admin/functions/create"
+			<AddFunctionMenu
+				createHandler={() => {
+					goto('/admin/functions/create');
+				}}
+				importFromGithubHandler={() => {
+					showImportModal = true;
+				}}
 			>
-				<Plus className="size-3.5" />
-			</a>
+				<div
+					class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+				>
+					<Plus className="size-3.5" />
+				</div>
+			</AddFunctionMenu>
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/admin/Functions/AddFunctionMenu.svelte b/src/lib/components/admin/Functions/AddFunctionMenu.svelte
new file mode 100644
index 0000000000..a27400081a
--- /dev/null
+++ b/src/lib/components/admin/Functions/AddFunctionMenu.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { flyAndScale } from '$lib/utils/transitions';
+	import { getContext } from 'svelte';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Share from '$lib/components/icons/Share.svelte';
+	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
+	import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
+	import Switch from '$lib/components/common/Switch.svelte';
+	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
+	import Github from '$lib/components/icons/Github.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import PencilSolid from '$lib/components/icons/PencilSolid.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let createHandler: Function;
+	export let importFromGithubHandler: Function;
+
+	export let onClose: Function = () => {};
+
+	let show = false;
+</script>
+
+<Dropdown
+	bind:show
+	on:change={(e) => {
+		if (e.detail === false) {
+			onClose();
+		}
+	}}
+>
+	<Tooltip content={$i18n.t('Create')}>
+		<slot />
+	</Tooltip>
+
+	<div slot="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[190px] text-sm rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
+			sideOffset={-2}
+			side="bottom"
+			align="start"
+			transition={flyAndScale}
+		>
+			<button
+				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				on:click={async () => {
+					createHandler();
+					show = false;
+				}}
+			>
+				<div class=" self-center mr-2">
+					<PencilSolid />
+				</div>
+				<div class=" self-center truncate">{$i18n.t('New Function')}</div>
+			</button>
+
+			<button
+				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				on:click={async () => {
+					importFromGithubHandler();
+					show = false;
+				}}
+			>
+				<div class=" self-center mr-2">
+					<Github />
+				</div>
+				<div class=" self-center truncate">{$i18n.t('Import From Github')}</div>
+			</button>
+		</DropdownMenu.Content>
+	</div>
+</Dropdown>
diff --git a/src/lib/components/admin/Functions/ImportModal.svelte b/src/lib/components/admin/Functions/ImportModal.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/lib/components/icons/Github.svelte b/src/lib/components/icons/Github.svelte
new file mode 100644
index 0000000000..6d8c60d6bb
--- /dev/null
+++ b/src/lib/components/icons/Github.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	fill="currentColor"
+	viewBox="0 0 24 24"
+>
+	<path
+		fill-rule="evenodd"
+		d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/src/lib/components/notes/RecordMenu.svelte b/src/lib/components/notes/RecordMenu.svelte
index 5f585f95d0..e47058561f 100644
--- a/src/lib/components/notes/RecordMenu.svelte
+++ b/src/lib/components/notes/RecordMenu.svelte
@@ -41,7 +41,7 @@
 			transition={(e) => fade(e, { duration: 100 })}
 		>
 			<button
-				class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={async () => {
 					onRecord();
 					show = false;
@@ -54,7 +54,7 @@
 			</button>
 
 			<button
-				class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={() => {
 					onCaptureAudio();
 					show = false;
@@ -67,7 +67,7 @@
 			</button>
 
 			<button
-				class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={() => {
 					onUpload();
 					show = false;
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index 6a0ecdc494..4fafb5f7e9 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -268,7 +268,7 @@
 				class=" flex flex-col cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl transition"
 				id="model-item-{model.id}"
 			>
-				<div class="flex gap-4 mt-0.5 mb-0.5">
+				<div class="flex gap-4 mt-1 mb-0.5">
 					<div class=" w-[44px]">
 						<div
 							class=" rounded-full object-cover {model.is_active
@@ -309,7 +309,7 @@
 					</a>
 				</div>
 
-				<div class="flex justify-between items-center -mb-0.5 px-0.5">
+				<div class="flex justify-between items-center -mb-0.5 px-0.5 mt-1.5">
 					<div class=" text-xs mt-0.5">
 						<Tooltip
 							content={model?.user?.email ?? $i18n.t('Deleted User')}