Classic298
bf0fb1c449
Add aria-labels to close, back, and action buttons across: - Controls/Controls.svelte: close chat controls button - ChatControls/Embeds.svelte: close embed button - Overview/Node.svelte: favorite toggle button - Overview/View.svelte: back and close overview buttons - ShortcutsModal.svelte: close button - ShareChatModal.svelte: close button - ToolServersModal.svelte: close button - Placeholder/FolderTitle.svelte: folder icon picker, folder options menu WCAG: 4.1.2 (Name, Role, Value)
84 lines
2.2 KiB
Svelte
84 lines
2.2 KiB
Svelte
<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, sourceId: string) => {
|
|
try {
|
|
const parsed = new URL(url);
|
|
|
|
if (chatId) {
|
|
parsed.searchParams.set('chat_id', chatId);
|
|
}
|
|
|
|
if (messageId) {
|
|
parsed.searchParams.set('message_id', messageId);
|
|
}
|
|
|
|
if (sourceId) {
|
|
parsed.searchParams.set('source_id', sourceId);
|
|
}
|
|
|
|
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 (sourceId) parts.push(`source_id=${encodeURIComponent(sourceId)}`);
|
|
|
|
if (parts.length === 0) return url;
|
|
|
|
return url + (hasQuery ? '&' : '?') + parts.join('&');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
{#if $embed}
|
|
<div class="h-full w-full">
|
|
<div
|
|
class="pointer-events-auto z-20 flex justify-between items-center py-3 px-2 font-primar text-gray-900 dark:text-white"
|
|
>
|
|
<div class="flex-1 flex items-center justify-between pl-2">
|
|
<a
|
|
class="flex items-center space-x-2 hover:underline"
|
|
href={$embed?.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{$embed?.title ?? 'Embedded Content'}
|
|
</a>
|
|
</div>
|
|
|
|
<button
|
|
class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
|
|
aria-label="Close embed"
|
|
on:click={() => {
|
|
showControls.set(false);
|
|
showEmbeds.set(false);
|
|
embed.set(null);
|
|
}}
|
|
>
|
|
<XMark className="size-3.5 text-gray-900 dark:text-white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class=" w-full h-full relative">
|
|
{#if overlay}
|
|
<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
|
|
{/if}
|
|
|
|
<FullHeightIframe
|
|
src={getSrcUrl($embed?.url ?? '', $embed?.chatId, $embed?.messageId, $embed?.sourceId)}
|
|
payload={$embed?.source ?? null}
|
|
iframeClassName="w-full h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|