Aleksander Grygier
ab6120cde5
* wip: server_tools * feat: Integrate with `/tools` endpoint * feat: Builtin + MCP + JSON Schema Tools WIP * refactor * displayName -> display_name * snake_case everywhere * rm redundant field * feat: Improvements * chore: update webui build output * refactor: Updates after server updates * chore: update webui build output * change arg to --tools all * feat: UI improvements * chore: update webui build output * add readme mention * llama-gen-docs * chore: update webui build output * chore: update webui build output * chore: update webui build output * feat: Reorganize settings sections * feat: Separate dialogs for MCP Servers Settings and Import/Export * feat: WIP * feat: WIP * feat: WIP * feat: WIP * feat: WIP * feat: WIP * WIP on allozaur/20677-webui-server-tools * feat: UI improvements * chore: Update package lock * chore: Run `npm audit fix` * feat: UI WIP * feat: UI * refactor: Desktop Icon Strip DRY * feat: Cleaner rendering and transition for ChatScreen * feat: UI improvements * feat: UI improvement * feat: Remove MCP Server "enable" switch from Tools submenu * chore: Run `npm audit fix` * feat: WIP * feat: Logic improvements * refactor: Cleanup * refactor: DRY * test: Fix Chat Sidebar UI Tests * chore: Update package lock * refactor: Cleanup * feat: Chat Message Action Card with Continue and Permission flow implementations * feat: Add agentic steering messages, draft messages and improve chat UX * fix: Search results UI * test: Fix unit test * feat: UI/UX improvements * refactor: Simplify `useToolsPanel` access in components * feat: Implement Processing Info Context API * feat: Implement 'Go back to chat' functionality for settings * feat: Enhance MCP Server management in Chat Form Attachments * style: Minor UI and branding adjustments * chore: Update webui static build output * chore: Formatting, linting & type checks * feat: Draft messages logic * feat: UI improvements * feat: Steering Messages improvements * refactor: Cleanup * refactor: Cleanup * feat: Improve UI * refactor: Settings navigation hook * refactor: DRY code * refactor: DRY ChatMessageUser UI components * refactor: Desktop Icon Strip DRY * refactor: Tools & permissions * fix: Navigation condition * refactor: Cleanup * refactor: Cleanup * refactor: Cleanup * fix: preserve reasoning_content in agentic flow * refactor: Storybook cleanup * refactor: isInViewport util function * refactor: Rename globally `onClick` to `onclick` * chore: `npm audit fix` * refactor: Action Icon usage * refactor: Naming * refactor: JS in `class` directive * refactor: Chat components cleanup WIP * refactor: Components structure * refactor: Cleanup WIP * feat: New ChatAttachmentsPreview component * feat: UI improvements * feat: UI improvements * refactor: Cleanup * refactor: ChatAttachmentsPreview UI/UX * refactor: Remove dead code * refactor: Cleanup * fix: Model Name aliases displaying * feat: Shortcut improvements * refactor: Chat Message * feat: Move Import/Export to settings * refactor: Cleanup * refactor: Cleanup * refactor: Cleanup * refactor: Cleanup --------- Co-authored-by: Xuan Son Nguyen <son@huggingface.co>
96 lines
2.2 KiB
Svelte
96 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { Dialog as DialogPrimitive } from 'bits-ui';
|
|
import XIcon from '@lucide/svelte/icons/x';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
code: string;
|
|
language: string;
|
|
onOpenChange?: (open: boolean) => void;
|
|
}
|
|
|
|
let { open = $bindable(), code, language, onOpenChange }: Props = $props();
|
|
|
|
let iframeRef = $state<HTMLIFrameElement | null>(null);
|
|
|
|
$effect(() => {
|
|
if (!iframeRef) return;
|
|
|
|
if (open) {
|
|
iframeRef.srcdoc = code;
|
|
} else {
|
|
iframeRef.srcdoc = '';
|
|
}
|
|
});
|
|
|
|
function handleOpenChange(nextOpen: boolean) {
|
|
open = nextOpen;
|
|
|
|
onOpenChange?.(nextOpen);
|
|
}
|
|
</script>
|
|
|
|
<DialogPrimitive.Root {open} onOpenChange={handleOpenChange}>
|
|
<DialogPrimitive.Portal>
|
|
<DialogPrimitive.Overlay class="code-preview-overlay" />
|
|
|
|
<DialogPrimitive.Content class="code-preview-content">
|
|
<iframe
|
|
bind:this={iframeRef}
|
|
title="Preview {language}"
|
|
sandbox="allow-scripts"
|
|
class="code-preview-iframe"
|
|
></iframe>
|
|
|
|
<DialogPrimitive.Close
|
|
class="code-preview-close absolute top-4 right-4 border-none bg-transparent text-white opacity-70 mix-blend-difference transition-opacity hover:opacity-100 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8"
|
|
aria-label="Close preview"
|
|
>
|
|
<XIcon />
|
|
|
|
<span class="sr-only">Close preview</span>
|
|
</DialogPrimitive.Close>
|
|
</DialogPrimitive.Content>
|
|
</DialogPrimitive.Portal>
|
|
</DialogPrimitive.Root>
|
|
|
|
<style lang="postcss">
|
|
:global(.code-preview-overlay) {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: transparent;
|
|
z-index: 100000;
|
|
}
|
|
|
|
:global(.code-preview-content) {
|
|
position: fixed;
|
|
inset: 0;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100dvw;
|
|
height: 100dvh;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
display: block;
|
|
overflow: hidden;
|
|
transform: none !important;
|
|
z-index: 100001;
|
|
}
|
|
|
|
:global(.code-preview-iframe) {
|
|
display: block;
|
|
width: 100dvw;
|
|
height: 100dvh;
|
|
border: 0;
|
|
}
|
|
|
|
:global(.code-preview-close) {
|
|
position: absolute;
|
|
z-index: 100002;
|
|
}
|
|
</style>
|