feat: __event_call__ support

src/lib/components/chat/Chat.svelte

@@ -61,6 +61,7 @@
 	import CallOverlay from './MessageInput/CallOverlay.svelte';
 	import { error } from '@sveltejs/kit';
 	import ChatControls from './ChatControls.svelte';
+	import EventConfirmDialog from '../common/ConfirmDialog.svelte';
 
 	const i18n: Writable<i18nType> = getContext('i18n');
 
@@ -74,6 +75,11 @@
 	let processing = '';
 	let messagesContainerElement: HTMLDivElement;
 
+	let showEventConfirmation = false;
+	let eventConfirmationTitle = '';
+	let eventConfirmationMessage = '';
+	let eventCallback = null;
+
 	let showModelSelector = true;
 
 	let selectedModels = [''];
@@ -129,7 +135,7 @@
 		})();
 	}
 
-	const chatEventHandler = async (event) => {
+	const chatEventHandler = async (event, cb) => {
 		if (event.chat_id === $chatId) {
 			await tick();
 			console.log(event);
@@ -139,17 +145,23 @@
 			const data = event?.data?.data ?? null;
 
 			if (type === 'status') {
-				if (message.statusHistory) {
+				if (message?.statusHistory) {
 					message.statusHistory.push(data);
 				} else {
 					message.statusHistory = [data];
 				}
 			} else if (type === 'citation') {
-				if (message.citations) {
+				if (message?.citations) {
 					message.citations.push(data);
 				} else {
 					message.citations = [data];
 				}
+			} else if (type === 'confirmation') {
+				eventCallback = cb;
+				showEventConfirmation = true;
+
+				eventConfirmationTitle = data.title;
+				eventConfirmationMessage = data.message;
 			} else {
 				console.log('Unknown message type', data);
 			}
@@ -1392,6 +1404,18 @@
 
 <audio id="audioElement" src="" style="display: none;" />
 
+<EventConfirmDialog
+	bind:show={showEventConfirmation}
+	title={eventConfirmationTitle}
+	message={eventConfirmationMessage}
+	on:confirm={(e) => {
+		eventCallback(true);
+	}}
+	on:cancel={() => {
+		eventCallback(false);
+	}}
+/>
+
 {#if $showCallOverlay}
 	<CallOverlay
 		{submitPrompt}

src/lib/components/common/ConfirmDialog.svelte

@@ -7,8 +7,8 @@
 
 	const dispatch = createEventDispatcher();
 
-	export let title = $i18n.t('Confirm your action');
-	export let message = $i18n.t('This action cannot be undone. Do you wish to continue?');
+	export let title = '';
+	export let message = '';
 
 	export let cancelLabel = $i18n.t('Cancel');
 	export let confirmLabel = $i18n.t('Confirm');
@@ -58,11 +58,21 @@
 			}}
 		>
 			<div class="px-[1.75rem] py-6">
-				<div class=" text-lg font-semibold dark:text-gray-200 mb-2.5">{title}</div>
+				<div class=" text-lg font-semibold dark:text-gray-200 mb-2.5">
+					{#if title !== ''}
+						{title}
+					{:else}
+						{$i18n.t('Confirm your action')}
+					{/if}
+				</div>
 
 				<slot>
 					<div class=" text-sm text-gray-500">
-						{message}
+						{#if message !== ''}
+							{message}
+						{:else}
+							{$i18n.t('This action cannot be undone. Do you wish to continue?')}
+						{/if}
 					</div>
 				</slot>
 
@@ -71,6 +81,7 @@
 						class="bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white font-medium w-full py-2.5 rounded-lg transition"
 						on:click={() => {
 							show = false;
+							dispatch('cancel');
 						}}
 						type="button"
 					>