refac

src/lib/components/chat/ChatControls/Embeds.svelte

@@ -1,10 +1,37 @@
-<script>
+<script lang="ts">
 	import { embed, showControls, showEmbeds } from '$lib/stores';
 
 	import FullHeightIframe from '$lib/components/common/FullHeightIframe.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
 	export let overlay = false;
+
+	const getSrcUrl = (url: string, chatId?: string, messageId?: string) => {
+		try {
+			const parsed = new URL(url);
+
+			if (chatId) {
+				parsed.searchParams.set('chat_id', chatId);
+			}
+
+			if (messageId) {
+				parsed.searchParams.set('message_id', messageId);
+			}
+
+			return parsed.toString();
+		} catch {
+			// Fallback for relative URLs or invalid input
+			const hasQuery = url.includes('?');
+			const parts = [];
+
+			if (chatId) parts.push(`chat_id=${encodeURIComponent(chatId)}`);
+			if (messageId) parts.push(`message_id=${encodeURIComponent(messageId)}`);
+
+			if (parts.length === 0) return url;
+
+			return url + (hasQuery ? '&' : '?') + parts.join('&');
+		}
+	};
 </script>
 
 {#if $embed}
@@ -40,7 +67,11 @@
 				<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
 			{/if}
 
-			<FullHeightIframe src={$embed?.url} iframeClassName="w-full h-full" />
+			<FullHeightIframe
+				src={getSrcUrl($embed?.url ?? '', $embed?.chatId, $embed?.messageId)}
+				payload={$embed?.source ?? null}
+				iframeClassName="w-full h-full"
+			/>
 		</div>
 	</div>
 {/if}

src/lib/components/chat/Messages/Citations.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import CitationModal from './Citations/CitationModal.svelte';
 	import { embed, showControls, showEmbeds } from '$lib/stores';
 
+	import CitationModal from './Citations/CitationModal.svelte';
+
 	const i18n = getContext('i18n');
 
 	export let id = '';
+	export let chatId = '';
+
 	export let sources = [];
 	export let readOnly = false;
 
@@ -35,8 +38,11 @@
 						showControls.set(true);
 						showEmbeds.set(true);
 						embed.set({
+							url: embedUrl,
 							title: citations[sourceIdx]?.source?.name || 'Embedded Content',
-							url: embedUrl
+							source: citations[sourceIdx],
+							chatId: chatId,
+							messageId: id
 						});
 					}
 				} else {

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -824,6 +824,7 @@
 								<Citations
 									bind:this={citationsElement}
 									id={message?.id}
+									{chatId}
 									sources={message?.sources ?? message?.citations}
 									{readOnly}
 								/>

src/lib/components/common/FullHeightIframe.svelte

@@ -21,6 +21,8 @@
 		'strict-origin-when-cross-origin';
 	export let allowFullscreen = true;
 
+	export let payload = null; // payload to send into the iframe on request
+
 	let iframe: HTMLIFrameElement | null = null;
 	let iframeSrc: string | null = null;
 	let iframeDoc: string | null = null;
@@ -142,13 +144,29 @@ window.Chart = parent.Chart; // Chart previously assigned on parent
 		}
 	}
 
-	// Handle height messages from the iframe (we also verify the sender)
 	function onMessage(e: MessageEvent) {
 		if (!iframe || e.source !== iframe.contentWindow) return;
-		const data = e.data as { type?: string; height?: number };
+
+		const data = e.data || {};
 		if (data?.type === 'iframe:height' && typeof data.height === 'number') {
 			iframe.style.height = Math.max(0, data.height) + 'px';
 		}
+
+		// Pong message for testing connectivity
+		if (data?.type === 'pong') {
+			console.log('Received pong from iframe:', data);
+
+			// Optional: reply back
+			iframe.contentWindow?.postMessage({ type: 'pong:ack' }, '*');
+		}
+
+		// Send payload data if requested
+		if (data?.type === 'payload') {
+			iframe.contentWindow?.postMessage(
+				{ type: 'payload', requestId: data?.requestId ?? null, payload: payload },
+				'*'
+			);
+		}
 	}
 
 	// When the iframe loads, try same-origin resize (cross-origin will noop)