PascalandGitHub
c1304d7b28
* ui: add source toggle to mermaid and svg blocks Add a toggle button next to copy and preview that switches a rendered mermaid or svg block to its source code and back. The button is shared by both block types and the rendered view stays the default. The source view reuses the code block scroll container and the highlighted code element captured at transform time, so it matches the app code blocks without highlighting again. Make tall diagrams scroll like text code blocks: safe centering keeps the diagram centered when it fits and falls back to start alignment when it overflows, so the top stays reachable instead of clipping above. Keep the block header opaque and layered above the scrolled diagram, and ignore header clicks in the zoom handler, so a button click never falls through to the zoom dialog. * ui: transparent diagram block header, address review from @allozaur
44 lines
2.1 KiB
TypeScript
44 lines
2.1 KiB
TypeScript
/**
|
|
* Icon mappings for file types and model modalities
|
|
* Centralized configuration to ensure consistent icon usage across the app
|
|
*/
|
|
|
|
import {
|
|
File as FileIcon,
|
|
FileText as FileTextIcon,
|
|
Image as ImageIcon,
|
|
Eye as VisionIcon,
|
|
Mic as AudioIcon,
|
|
Video as VideoIcon
|
|
} from '@lucide/svelte';
|
|
import { FileTypeCategory, ModelModality } from '$lib/enums';
|
|
|
|
export const FILE_TYPE_ICONS = {
|
|
[FileTypeCategory.IMAGE]: ImageIcon,
|
|
[FileTypeCategory.AUDIO]: AudioIcon,
|
|
[FileTypeCategory.VIDEO]: VideoIcon,
|
|
[FileTypeCategory.TEXT]: FileTextIcon,
|
|
[FileTypeCategory.PDF]: FileIcon
|
|
} as const;
|
|
|
|
export const DEFAULT_FILE_ICON = FileIcon;
|
|
|
|
export const MODALITY_ICONS = {
|
|
[ModelModality.VISION]: VisionIcon,
|
|
[ModelModality.AUDIO]: AudioIcon,
|
|
[ModelModality.VIDEO]: VideoIcon
|
|
} as const;
|
|
|
|
export const MODALITY_LABELS = {
|
|
[ModelModality.VISION]: 'Vision',
|
|
[ModelModality.AUDIO]: 'Audio',
|
|
[ModelModality.VIDEO]: 'Video'
|
|
} as const;
|
|
|
|
// Shared SVG icon strings for copy and preview buttons
|
|
export const COPY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
|
|
|
|
export const PREVIEW_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye lucide-eye-icon"><path d="M2.062 12.345a1 1 0 0 1 0-.69C3.5 7.73 7.36 5 12 5s8.5 2.73 9.938 6.655a1 1 0 0 1 0 .69C20.5 16.27 16.64 19 12 19s-8.5-2.73-9.938-6.655"/><circle cx="12" cy="12" r="3"/></svg>`;
|
|
|
|
export const CODE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code lucide-code-icon"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>`;
|