From fe59b7f39cc07ea002f4d63dd476243fc1211edf Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 5 Jan 2025 00:44:38 -0800
Subject: [PATCH] refac

---
 backend/open_webui/routers/chats.py     |  9 ++--
 src/lib/apis/chats/index.ts             |  4 +-
 src/lib/components/chat/Messages.svelte |  4 +-
 src/routes/s/[id]/+page.svelte          | 58 ++++++++++++++-----------
 4 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/backend/open_webui/routers/chats.py b/backend/open_webui/routers/chats.py
index 67d7fbb3a..a001dd01f 100644
--- a/backend/open_webui/routers/chats.py
+++ b/backend/open_webui/routers/chats.py
@@ -464,13 +464,13 @@ async def clone_chat_by_id(id: str, user=Depends(get_verified_user)):
 
 
 ############################
-# CloneChatByShareId
+# CloneSharedChatById
 ############################
 
 
-@router.post("/{share_id}/clone_shared", response_model=Optional[ChatResponse])
-async def clone_chat_by_share_id(share_id: str, user=Depends(get_verified_user)):
-    chat = Chats.get_chat_by_share_id(share_id)
+@router.post("/{id}/clone/shared", response_model=Optional[ChatResponse])
+async def clone_shared_chat_by_id(id: str, user=Depends(get_verified_user)):
+    chat = Chats.get_chat_by_share_id(id)
     if chat:
         updated_chat = {
             **chat.chat,
@@ -487,7 +487,6 @@ async def clone_chat_by_share_id(share_id: str, user=Depends(get_verified_user))
         )
 
 
-
 ############################
 # ArchiveChat
 ############################
diff --git a/src/lib/apis/chats/index.ts b/src/lib/apis/chats/index.ts
index d2d7e64ac..1772529d3 100644
--- a/src/lib/apis/chats/index.ts
+++ b/src/lib/apis/chats/index.ts
@@ -618,10 +618,10 @@ export const cloneChatById = async (token: string, id: string) => {
 	return res;
 };
 
-export const cloneChatByShareId = async (token: string, share_id: string) => {
+export const cloneSharedChatById = async (token: string, id: string) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${share_id}/clone_shared`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/chats/${id}/clone/shared`, {
 		method: 'POST',
 		headers: {
 			Accept: 'application/json',
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index 2b0748dc7..7f18f3a35 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -16,6 +16,8 @@
 
 	const i18n = getContext('i18n');
 
+	export let className = 'h-full flex pt-8';
+
 	export let chatId = '';
 	export let user = $_user;
 
@@ -333,7 +335,7 @@
 	};
 </script>
 
-<div class="h-full flex pt-8">
+<div class={className}>
 	{#if Object.keys(history?.messages ?? {}).length == 0}
 		<ChatPlaceholder
 			modelIds={selectedModels}
diff --git a/src/routes/s/[id]/+page.svelte b/src/routes/s/[id]/+page.svelte
index b0dae7744..862185c9b 100644
--- a/src/routes/s/[id]/+page.svelte
+++ b/src/routes/s/[id]/+page.svelte
@@ -8,12 +8,12 @@
 	import { settings, chatId, WEBUI_NAME, models } from '$lib/stores';
 	import { convertMessagesToHistory, createMessagesList } from '$lib/utils';
 
-	import { getChatByShareId, cloneChatByShareId } from '$lib/apis/chats';
+	import { getChatByShareId, cloneSharedChatById } from '$lib/apis/chats';
 
 	import Messages from '$lib/components/chat/Messages.svelte';
 	import Navbar from '$lib/components/layout/Navbar.svelte';
+
 	import { getUserById } from '$lib/apis/users';
-	import { error } from '@sveltejs/kit';
 	import { getModels } from '$lib/apis';
 	import { toast } from 'svelte-sonner';
 
@@ -104,8 +104,8 @@
 
 	const cloneSharedChat = async () => {
 		if (!chat) return;
-		
-		const res = await cloneChatByShareId(localStorage.token, chat.id).catch((error) => {
+
+		const res = await cloneSharedChatById(localStorage.token, chat.id).catch((error) => {
 			toast.error(error);
 			return null;
 		});
@@ -128,33 +128,26 @@
 	<div
 		class="min-h-screen max-h-screen w-full flex flex-col text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900"
 	>
-		<div class="flex flex-col flex-auto justify-center py-8">
-			<div class="px-3 w-full max-w-5xl mx-auto">
-				<div>
-					<div class=" text-3xl font-semibold line-clamp-1">
-						{title}
-					</div>
-
-					<div class="flex justify-between items-center mt-1">
-						<div class="text-gray-400">
-							{dayjs(chat.chat.timestamp).format($i18n.t('MMMM DD, YYYY'))}
+		<div class="flex flex-col flex-auto justify-center relative">
+			<div class=" flex flex-col w-full flex-auto overflow-auto h-0" id="messages-container">
+				<div class="pt-5 px-2 w-full max-w-5xl mx-auto">
+					<div class="px-3">
+						<div class=" text-2xl font-semibold line-clamp-1">
+							{title}
+						</div>
+
+						<div class="flex text-sm justify-between items-center mt-1">
+							<div class="text-gray-400">
+								{dayjs(chat.chat.timestamp).format($i18n.t('MMMM DD, YYYY'))}
+							</div>
 						</div>
-						<button
-							class="px-4 py-2 text-sm font-medium bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl transition"
-							on:click={cloneSharedChat}
-						>
-							{$i18n.t('Clone in OpenWebUI')}
-						</button>
 					</div>
 				</div>
 
-				<hr class="border-gray-50 dark:border-gray-850 mt-6 mb-2" />
-			</div>
-
-			<div class=" flex flex-col w-full flex-auto overflow-auto h-0" id="messages-container">
-				<div class=" h-full w-full flex flex-col py-4">
-					<div class="py-2">
+				<div class=" h-full w-full flex flex-col py-2">
+					<div class="">
 						<Messages
+							className="h-full flex pt-4 pb-8"
 							{user}
 							chatId={$chatId}
 							readOnly={true}
@@ -171,6 +164,19 @@
 					</div>
 				</div>
 			</div>
+
+			<div
+				class="absolute bottom-0 right-0 left-0 flex justify-center w-full bg-gradient-to-b from-transparent to-gray-900"
+			>
+				<div class="pb-5">
+					<button
+						class="px-4 py-2 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+						on:click={cloneSharedChat}
+					>
+						{$i18n.t('Clone Chat')}
+					</button>
+				</div>
+			</div>
 		</div>
 	</div>
 {/if}