From 7a218d77b7cc2e4a1724775e4ffe91e39a613d69 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 23 Jun 2024 16:03:21 -0700
Subject: [PATCH] refac: workspace

---
 src/lib/components/workspace/Documents.svelte |  8 +++-
 src/lib/components/workspace/Functions.svelte | 39 +++++++++++++++++--
 src/lib/components/workspace/Models.svelte    | 22 ++++++-----
 src/lib/components/workspace/Prompts.svelte   | 22 ++++++-----
 src/lib/components/workspace/Tools.svelte     | 39 +++++++++++++++++--
 5 files changed, 104 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/workspace/Documents.svelte b/src/lib/components/workspace/Documents.svelte
index 5e918b6f0..9bb416468 100644
--- a/src/lib/components/workspace/Documents.svelte
+++ b/src/lib/components/workspace/Documents.svelte
@@ -538,7 +538,9 @@
 				documentsImportInputElement.click();
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Import Documents Mapping')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">
+				{$i18n.t('Import Documents Mapping')}
+			</div>
 
 			<div class=" self-center">
 				<svg
@@ -565,7 +567,9 @@
 				saveAs(blob, `documents-mapping-export-${Date.now()}.json`);
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Export Documents Mapping')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">
+				{$i18n.t('Export Documents Mapping')}
+			</div>
 
 			<div class=" self-center">
 				<svg
diff --git a/src/lib/components/workspace/Functions.svelte b/src/lib/components/workspace/Functions.svelte
index 25d16ea16..a7de54f91 100644
--- a/src/lib/components/workspace/Functions.svelte
+++ b/src/lib/components/workspace/Functions.svelte
@@ -153,7 +153,7 @@
 								{func.type}
 							</div>
 
-							<div>
+							<div class=" line-clamp-1">
 								{func.name}
 							</div>
 						</div>
@@ -246,7 +246,7 @@
 				functionsImportInputElement.click();
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Import Functions')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Functions')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -280,7 +280,7 @@
 				}
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Export Functions')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Functions')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -300,6 +300,39 @@
 	</div>
 </div>
 
+<div class=" my-16">
+	<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		{$i18n.t('Made by OpenWebUI Community')}
+	</div>
+
+	<a
+		class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+		href="https://openwebui.com/"
+		target="_blank"
+	>
+		<div class=" self-center w-10 flex-shrink-0">
+			<div
+				class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6">
+					<path
+						fill-rule="evenodd"
+						d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</div>
+		</div>
+
+		<div class=" self-center">
+			<div class=" font-bold line-clamp-1">{$i18n.t('Discover a function')}</div>
+			<div class=" text-sm line-clamp-1">
+				{$i18n.t('Discover, download, and explore custom functions')}
+			</div>
+		</div>
+	</a>
+</div>
+
 <ConfirmDialog
 	bind:show={showConfirm}
 	on:confirm={() => {
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index e0a5c4fba..ce2f6ba3a 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -256,7 +256,7 @@
 <hr class=" dark:border-gray-850 my-2.5" />
 
 <a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/workspace/models/create">
-	<div class=" self-center w-10">
+	<div class=" self-center w-10 flex-shrink-0">
 		<div
 			class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
 		>
@@ -271,8 +271,8 @@
 	</div>
 
 	<div class=" self-center">
-		<div class=" font-bold">{$i18n.t('Create a model')}</div>
-		<div class=" text-sm">{$i18n.t('Customize models for a specific purpose')}</div>
+		<div class=" font-bold line-clamp-1">{$i18n.t('Create a model')}</div>
+		<div class=" text-sm line-clamp-1">{$i18n.t('Customize models for a specific purpose')}</div>
 	</div>
 </a>
 
@@ -412,7 +412,7 @@
 				modelsImportInputElement.click();
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Import Models')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Models')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -436,7 +436,7 @@
 				downloadModels($models);
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Export Models')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Models')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -494,14 +494,16 @@
 </div>
 
 <div class=" my-16">
-	<div class=" text-lg font-semibold mb-3">{$i18n.t('Made by OpenWebUI Community')}</div>
+	<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		{$i18n.t('Made by OpenWebUI Community')}
+	</div>
 
 	<a
 		class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
 		href="https://openwebui.com/"
 		target="_blank"
 	>
-		<div class=" self-center w-10">
+		<div class=" self-center w-10 flex-shrink-0">
 			<div
 				class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
 			>
@@ -516,8 +518,10 @@
 		</div>
 
 		<div class=" self-center">
-			<div class=" font-bold">{$i18n.t('Discover a model')}</div>
-			<div class=" text-sm">{$i18n.t('Discover, download, and explore model presets')}</div>
+			<div class=" font-bold line-clamp-1">{$i18n.t('Discover a model')}</div>
+			<div class=" text-sm line-clamp-1">
+				{$i18n.t('Discover, download, and explore model presets')}
+			</div>
 		</div>
 	</a>
 </div>
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index 05884208b..b01d2935d 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -115,7 +115,7 @@
 			<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
 				<a href={`/workspace/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
 					<div class=" flex-1 self-center pl-5">
-						<div class=" font-bold">{prompt.command}</div>
+						<div class=" font-bold line-clamp-1">{prompt.command}</div>
 						<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
 							{prompt.title}
 						</div>
@@ -213,7 +213,7 @@
 				promptsImportInputElement.click();
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Import Prompts')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Prompts')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -241,7 +241,7 @@
 				saveAs(blob, `prompts-export-${Date.now()}.json`);
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Export Prompts')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Prompts')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -270,14 +270,16 @@
 </div>
 
 <div class=" my-16">
-	<div class=" text-lg font-semibold mb-3">{$i18n.t('Made by OpenWebUI Community')}</div>
+	<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		{$i18n.t('Made by OpenWebUI Community')}
+	</div>
 
 	<a
-		class=" flex space-x-4 cursor-pointer w-full mb-3 px-3 py-2"
-		href="https://openwebui.com/?type=prompts"
+		class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+		href="https://openwebui.com/"
 		target="_blank"
 	>
-		<div class=" self-center w-10">
+		<div class=" self-center w-10 flex-shrink-0">
 			<div
 				class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
 			>
@@ -292,8 +294,10 @@
 		</div>
 
 		<div class=" self-center">
-			<div class=" font-bold">{$i18n.t('Discover a prompt')}</div>
-			<div class=" text-sm">{$i18n.t('Discover, download, and explore custom prompts')}</div>
+			<div class=" font-bold line-clamp-1">{$i18n.t('Discover a prompt')}</div>
+			<div class=" text-sm line-clamp-1">
+				{$i18n.t('Discover, download, and explore custom prompts')}
+			</div>
 		</div>
 	</a>
 </div>
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index a11c9f722..9c70a4e52 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -149,7 +149,7 @@
 								TOOL
 							</div>
 
-							<div>
+							<div class="line-clamp-1">
 								{tool.name}
 							</div>
 						</div>
@@ -242,7 +242,7 @@
 				toolsImportInputElement.click();
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Import Tools')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Import Tools')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -276,7 +276,7 @@
 				}
 			}}
 		>
-			<div class=" self-center mr-2 font-medium">{$i18n.t('Export Tools')}</div>
+			<div class=" self-center mr-2 font-medium line-clamp-1">{$i18n.t('Export Tools')}</div>
 
 			<div class=" self-center">
 				<svg
@@ -296,6 +296,39 @@
 	</div>
 </div>
 
+<div class=" my-16">
+	<div class=" text-lg font-semibold mb-3 line-clamp-1">
+		{$i18n.t('Made by OpenWebUI Community')}
+	</div>
+
+	<a
+		class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
+		href="https://openwebui.com/"
+		target="_blank"
+	>
+		<div class=" self-center w-10 flex-shrink-0">
+			<div
+				class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6">
+					<path
+						fill-rule="evenodd"
+						d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</div>
+		</div>
+
+		<div class=" self-center">
+			<div class=" font-bold line-clamp-1">{$i18n.t('Discover a tool')}</div>
+			<div class=" text-sm line-clamp-1">
+				{$i18n.t('Discover, download, and explore custom tools')}
+			</div>
+		</div>
+	</a>
+</div>
+
 <ConfirmDialog
 	bind:show={showConfirm}
 	on:confirm={() => {