refac: share chat model

src/lib/components/chat/ShareChatModal.svelte

@@ -1,15 +1,84 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
+
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { toast } from 'svelte-sonner';
+	import { getChatById, shareChatById } from '$lib/apis/chats';
+	import { chatId, modelfiles } from '$lib/stores';
+	import { copyToClipboard } from '$lib/utils';
+
 	import Modal from '../common/Modal.svelte';
 	import Link from '../icons/Link.svelte';
 
+	let chat = null;
 	const i18n = getContext('i18n');
 
-	export let downloadChat: Function;
-	export let shareChat: Function;
-	export let shareLocalChat: Function;
+	const shareLocalChat = async () => {
+		const _chat = chat;
+
+		let chatShareUrl = '';
+		if (_chat.share_id) {
+			chatShareUrl = `${window.location.origin}/s/${_chat.share_id}`;
+		} else {
+			const sharedChat = await shareChatById(localStorage.token, $chatId);
+			chatShareUrl = `${window.location.origin}/s/${sharedChat.id}`;
+		}
+
+		toast.success($i18n.t('Copied shared conversation URL to clipboard!'));
+		copyToClipboard(chatShareUrl);
+	};
+
+	const shareChat = async () => {
+		const _chat = chat.chat;
+		console.log('share', _chat);
+
+		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
+		const url = 'https://openwebui.com';
+		// const url = 'http://localhost:5173';
+
+		const tab = await window.open(`${url}/chats/upload`, '_blank');
+		window.addEventListener(
+			'message',
+			(event) => {
+				if (event.origin !== url) return;
+				if (event.data === 'loaded') {
+					tab.postMessage(
+						JSON.stringify({
+							chat: _chat,
+							modelfiles: $modelfiles.filter((modelfile) =>
+								_chat.models.includes(modelfile.tagName)
+							)
+						}),
+						'*'
+					);
+				}
+			},
+			false
+		);
+	};
+
+	const downloadChat = async () => {
+		const _chat = chat.chat;
+		console.log('download', chat);
+
+		const chatText = _chat.messages.reduce((a, message, i, arr) => {
+			return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`;
+		}, '');
+
+		let blob = new Blob([chatText], {
+			type: 'text/plain'
+		});
+
+		saveAs(blob, `chat-${_chat.title}.txt`);
+	};
 
 	export let show = false;
+
+	onMount(async () => {
+		chat = await getChatById(localStorage.token, $chatId);
+	});
 </script>
 
 <Modal bind:show size="sm">

src/lib/components/layout/Navbar.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
-	import fileSaver from 'file-saver';
-	const { saveAs } = fileSaver;
 
 	import { Separator } from 'bits-ui';
 	import { getChatById, shareChatById } from '$lib/apis/chats';
@@ -19,7 +17,6 @@
 	import ChevronUpDown from '../icons/ChevronUpDown.svelte';
 	import Menu from './Navbar/Menu.svelte';
 	import TagChatModal from '../chat/TagChatModal.svelte';
-	import { copyToClipboard } from '$lib/utils';
 
 	const i18n = getContext('i18n');
 
@@ -37,66 +34,9 @@
 
 	let showShareChatModal = false;
 	let showTagChatModal = false;
-
-	const shareChat = async () => {
-		const chat = (await getChatById(localStorage.token, $chatId)).chat;
-		console.log('share', chat);
-
-		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
-		const url = 'https://openwebui.com';
-		// const url = 'http://localhost:5173';
-
-		const tab = await window.open(`${url}/chats/upload`, '_blank');
-		window.addEventListener(
-			'message',
-			(event) => {
-				if (event.origin !== url) return;
-				if (event.data === 'loaded') {
-					tab.postMessage(
-						JSON.stringify({
-							chat: chat,
-							modelfiles: $modelfiles.filter((modelfile) => chat.models.includes(modelfile.tagName))
-						}),
-						'*'
-					);
-				}
-			},
-			false
-		);
-	};
-
-	const shareLocalChat = async () => {
-		const chat = await getChatById(localStorage.token, $chatId);
-
-		let chatShareUrl = '';
-		if (chat.share_id) {
-			chatShareUrl = `${window.location.origin}/s/${chat.share_id}`;
-		} else {
-			const sharedChat = await shareChatById(localStorage.token, $chatId);
-			chatShareUrl = `${window.location.origin}/s/${sharedChat.id}`;
-		}
-
-		toast.success($i18n.t('Copied shared conversation URL to clipboard!'));
-		copyToClipboard(chatShareUrl);
-	};
-
-	const downloadChat = async () => {
-		const chat = (await getChatById(localStorage.token, $chatId)).chat;
-		console.log('download', chat);
-
-		const chatText = chat.messages.reduce((a, message, i, arr) => {
-			return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`;
-		}, '');
-
-		let blob = new Blob([chatText], {
-			type: 'text/plain'
-		});
-
-		saveAs(blob, `chat-${chat.title}.txt`);
-	};
 </script>
 
-<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} {shareLocalChat} />
+<ShareChatModal bind:show={showShareChatModal} />
 <!-- <TagChatModal bind:show={showTagChatModal} {tags} {deleteTag} {addTag} /> -->
 <nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
 	<div