OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-15 02:41:30 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

enh: artifacts fullscreen

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-06 11:26:02 -07:00
parent 9ef3fb0bc7
commit 5f74cfaa51
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/chat/Artifacts.svelte
View File

@ -4,9 +4,11 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { showArtifacts, showControls } from '$lib/stores'; import { chatId, showArtifacts, showControls } from '$lib/stores';
import XMark from '../icons/XMark.svelte'; import XMark from '../icons/XMark.svelte';
import { copyToClipboard, createMessagesList } from '$lib/utils'; import { copyToClipboard, createMessagesList } from '$lib/utils';
import ArrowsPointingOut from '../icons/ArrowsPointingOut.svelte';
import Tooltip from '../common/Tooltip.svelte';
export let overlay = false; export let overlay = false;
export let history; export let history;
@ -146,6 +148,16 @@
}); });
}; };
const showFullScreen = () => {
if (iframeElement.requestFullscreen) {
iframeElement.requestFullscreen();
} else if (iframeElement.webkitRequestFullscreen) {
iframeElement.webkitRequestFullscreen();
} else if (iframeElement.msRequestFullscreen) {
iframeElement.msRequestFullscreen();
}
};
onMount(() => {}); onMount(() => {});
</script> </script>
@ -241,7 +253,7 @@
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center gap-1">
<button <button
class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5" class="copy-code-button bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md px-1.5 py-0.5"
on:click={() => { on:click={() => {
@ -253,6 +265,15 @@
}, 2000); }, 2000);
}}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button }}>{copied ? $i18n.t('Copied') : $i18n.t('Copy')}</button
> >
<Tooltip content={$i18n.t('Open in full screen')}>
<button
class=" bg-none border-none text-xs bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-md p-0.5"
on:click={showFullScreen}
>
<ArrowsPointingOut className="size-3.5" />
</button>
</Tooltip>
</div> </div>
</div> </div>
{/if} {/if}

19
src/lib/components/icons/ArrowsPointingOut.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
/>
</svg>