happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Cleanup

This commit is contained in:
Aleksander Grygier 2026-02-03 15:51:28 +01:00
parent 6c61742d54
commit c6549188c0
18 changed files with 67 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
tools/server/webui/src/lib/components/app/actions/ActionButton.svelte
View File

@ -1,48 +0,0 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Tooltip from '$lib/components/ui/tooltip';
import type { Component } from 'svelte';
interface Props {
icon: Component;
tooltip: string;
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
size?: 'default' | 'sm' | 'lg' | 'icon';
class?: string;
disabled?: boolean;
onclick: () => void;
'aria-label'?: string;
}
let {
icon,
tooltip,
variant = 'ghost',
size = 'sm',
class: className = '',
disabled = false,
onclick,
'aria-label': ariaLabel
}: Props = $props();
</script>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
{variant}
{size}
{disabled}
{onclick}
class="h-6 w-6 p-0 {className} flex"
aria-label={ariaLabel || tooltip}
>
{@const IconComponent = icon}
<IconComponent class="h-3 w-3" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p>{tooltip}</p>
</Tooltip.Content>
</Tooltip.Root>

29
tools/server/webui/src/lib/components/app/actions/ActionIconsCodeBlock.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Eye } from '@lucide/svelte';
import ActionIconCopyToClipboard from '$lib/components/app/actions/ActionIconCopyToClipboard.svelte';
import { Copy, Eye } from '@lucide/svelte';
import { copyCodeToClipboard } from '$lib/utils';
import { FileTypeText } from '$lib/enums';
interface Props {
@ -14,6 +14,11 @@
const showPreview = $derived(language?.toLowerCase() === FileTypeText.HTML);
function handleCopy() {
if (disabled) return;
copyCodeToClipboard(code);
}
function handlePreview() {
if (disabled) return;
onPreview?.(code, language);
@ -21,14 +26,18 @@
</script>
<div class="code-block-actions">
<div class="copy-code-btn" class:opacity-50={disabled} class:!cursor-not-allowed={disabled}>
<ActionIconCopyToClipboard
text={code}
canCopy={!disabled}
ariaLabel={disabled ? 'Code incomplete' : 'Copy code'}
/>
</div>
<button
class="copy-code-btn"
class:opacity-50={disabled}
class:!cursor-not-allowed={disabled}
title={disabled ? 'Code incomplete' : 'Copy code'}
aria-label="Copy code"
aria-disabled={disabled}
type="button"
onclick={handleCopy}
>
<Copy size={16} />
</button>
{#if showPreview}
<button
class="preview-code-btn"

55
tools/server/webui/src/lib/components/app/actions/CodeBlockActions.svelte
View File

@ -1,55 +0,0 @@
<script lang="ts">
import { Copy, Eye } from '@lucide/svelte';
import { copyCodeToClipboard } from '$lib/utils';
import { FileTypeText } from '$lib/enums';
interface Props {
code: string;
language: string;
disabled?: boolean;
onPreview?: (code: string, language: string) => void;
}
let { code, language, disabled = false, onPreview }: Props = $props();
const showPreview = $derived(language?.toLowerCase() === FileTypeText.HTML);
function handleCopy() {
if (disabled) return;
copyCodeToClipboard(code);
}
function handlePreview() {
if (disabled) return;
onPreview?.(code, language);
}
</script>
<div class="code-block-actions">
<button
class="copy-code-btn"
class:opacity-50={disabled}
class:!cursor-not-allowed={disabled}
title={disabled ? 'Code incomplete' : 'Copy code'}
aria-label="Copy code"
aria-disabled={disabled}
type="button"
onclick={handleCopy}
>
<Copy size={16} />
</button>
{#if showPreview}
<button
class="preview-code-btn"
class:opacity-50={disabled}
class:!cursor-not-allowed={disabled}
title={disabled ? 'Code incomplete' : 'Preview code'}
aria-label="Preview code"
aria-disabled={disabled}
type="button"
onclick={handlePreview}
>
<Eye size={16} />
</button>
{/if}
</div>

18
tools/server/webui/src/lib/components/app/actions/CopyToClipboardIcon.svelte
View File

@ -1,18 +0,0 @@
<script lang="ts">
import { Copy } from '@lucide/svelte';
import { copyToClipboard } from '$lib/utils';
interface Props {
ariaLabel?: string;
canCopy?: boolean;
text: string;
}
let { ariaLabel = 'Copy to clipboard', canCopy = true, text }: Props = $props();
</script>
<Copy
class="h-3 w-3 flex-shrink-0 cursor-{canCopy ? 'pointer' : 'not-allowed'}"
aria-label={ariaLabel}
onclick={() => canCopy && copyToClipboard(text)}
/>

26
tools/server/webui/src/lib/components/app/actions/RemoveButton.svelte
View File

@ -1,26 +0,0 @@
<script lang="ts">
import { X } from '@lucide/svelte';
import { Button } from '$lib/components/ui/button';
interface Props {
id: string;
onRemove?: (id: string) => void;
class?: string;
}
let { id, onRemove, class: className = '' }: Props = $props();
</script>
<Button
type="button"
variant="ghost"
size="sm"
class="h-6 w-6 bg-white/20 p-0 hover:bg-white/30 {className}"
onclick={(e: MouseEvent) => {
e.stopPropagation();
onRemove?.(id);
}}
aria-label="Remove file"
>
<X class="h-3 w-3" />
</Button>

17
tools/server/webui/src/lib/components/app/actions/index.ts
View File

@ -6,17 +6,14 @@
*
*/
/** Styled button for action triggers with icon support. */
export { default as ActionButton } from './ActionButton.svelte';
/** Styled icon button for action triggers with tooltip. */
export { default as ActionIcon } from './ActionIcon.svelte';
/** Code block actions component (copy, preview). */
export { default as CodeBlockActions } from '../actions/CodeBlockActions.svelte';
export { default as ActionIconsCodeBlock } from './ActionIconsCodeBlock.svelte';
/** Copy-to-clipboard button with success feedback. */
export { default as CopyToClipboardIcon } from './CopyToClipboardIcon.svelte';
/** Copy-to-clipboard icon button with click handler. */
export { default as ActionIconCopyToClipboard } from './ActionIconCopyToClipboard.svelte';
/** Remove/delete button with X icon. */
export { default as RemoveButton } from './RemoveButton.svelte';
/** Display for keyboard shortcut hints (e.g., "⌘ + Enter"). */
export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';
/** Remove/delete icon button with X icon. */
export { default as ActionIconRemove } from './ActionIconRemove.svelte';

4
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { ChatMessageMcpPromptContent, RemoveButton } from '$lib/components/app';
import { ChatMessageMcpPromptContent, ActionIconRemove } from '$lib/components/app';
import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
import { McpPromptVariant } from '$lib/enums';
@ -34,7 +34,7 @@
<div
class="absolute top-8 right-2 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
>
<RemoveButton id={prompt.name} onRemove={() => onRemove?.()} />
<ActionIconRemove id={prompt.name} onRemove={() => onRemove?.()} />
</div>
{/if}
</div>

4
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte
View File

@ -11,7 +11,7 @@
} from '$lib/constants/mcp-resource';
import { MimeTypePrefix, MimeTypeIncludes, UriPattern } from '$lib/enums';
import * as Tooltip from '$lib/components/ui/tooltip';
import { RemoveButton } from '../../actions';
import { ActionIconRemove } from '$lib/components/app';
interface Props {
attachment: MCPResourceAttachment;
@ -93,7 +93,7 @@
</span>
{#if onRemove}
<RemoveButton class="bg-transparent " id={attachment.id} {onRemove} />
<ActionIconRemove class="bg-transparent " id={attachment.id} {onRemove} />
{/if}
</button>
</Tooltip.Trigger>

6
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailFile.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { RemoveButton } from '$lib/components/app';
import { ActionIconRemove } from '$lib/components/app';
import { formatFileSize, getFileTypeLabel, getPreviewText, isTextFile } from '$lib/utils';
import { AttachmentType } from '$lib/enums';
@ -104,7 +104,7 @@
onclick={onClick}
>
<div class="absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100">
<RemoveButton {id} {onRemove} />
<ActionIconRemove {id} {onRemove} />
</div>
<div class="pr-8">
@ -158,7 +158,7 @@
{#if !readonly}
<div class="absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100">
<RemoveButton {id} {onRemove} />
<ActionIconRemove {id} {onRemove} />
</div>
{/if}
</button>

4
tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailImage.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { RemoveButton } from '$lib/components/app';
import { ActionIconRemove } from '$lib/components/app';
interface Props {
id: string;
@ -58,7 +58,7 @@
<div
class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
>
<RemoveButton {id} {onRemove} class="text-white" />
<ActionIconRemove {id} {onRemove} class="text-white" />
</div>
{/if}
</div>

12
tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentInput.svelte
View File

@ -1,6 +1,8 @@
<script lang="ts">
import type { MCPPromptInfo } from '$lib/types';
import { fly } from 'svelte/transition';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
type PromptArgument = NonNullable<MCPPromptInfo['arguments']>[number];
@ -34,10 +36,7 @@
</script>
<div class="relative grid gap-1">
<label
for="arg-{argument.name}"
class="mb-1 flex items-center gap-2 text-sm text-muted-foreground"
>
<Label for="arg-{argument.name}" class="mb-1 text-muted-foreground">
<span>
{argument.name}
@ -49,9 +48,9 @@
{#if isLoadingSuggestions}
<span class="text-xs text-muted-foreground/50">...</span>
{/if}
</label>
</Label>
<input
<Input
id="arg-{argument.name}"
type="text"
{value}
@ -62,7 +61,6 @@
placeholder={argument.description || argument.name}
required={argument.required}
autocomplete="off"
class="w-full rounded-lg border border-border/50 bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none"
/>
{#if isAutocompleteActive && suggestions.length > 0}

10
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
View File

@ -7,10 +7,12 @@
import { DatabaseService } from '$lib/services';
import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants/ui';
import { MessageRole, AttachmentType } from '$lib/enums';
import ChatMessageAssistant from './ChatMessageAssistant.svelte';
import ChatMessageUser from './ChatMessageUser.svelte';
import ChatMessageSystem from './ChatMessageSystem.svelte';
import ChatMessageMcpPrompt from './ChatMessageMcpPrompt.svelte';
import {
ChatMessageAssistant,
ChatMessageUser,
ChatMessageSystem,
ChatMessageMcpPrompt
} from '$lib/components/app/chat';
import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';

12
tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { Edit, Copy, RefreshCw, Trash2, ArrowRight } from '@lucide/svelte';
import {
ActionButton,
ActionIcon,
ChatMessageBranchingControls,
DialogConfirmation
} from '$lib/components/app';
@ -72,21 +72,21 @@
<div
class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150"
>
<ActionButton icon={Copy} tooltip="Copy" onclick={onCopy} />
<ActionIcon icon={Copy} tooltip="Copy" onclick={onCopy} />
{#if onEdit}
<ActionButton icon={Edit} tooltip="Edit" onclick={onEdit} />
<ActionIcon icon={Edit} tooltip="Edit" onclick={onEdit} />
{/if}
{#if role === MessageRole.ASSISTANT && onRegenerate}
<ActionButton icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
<ActionIcon icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
{/if}
{#if role === MessageRole.ASSISTANT && onContinue}
<ActionButton icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
<ActionIcon icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
{/if}
<ActionButton icon={Trash2} tooltip="Delete" onclick={onDelete} />
<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
</div>
</div>

4
tools/server/webui/src/lib/components/app/content/MarkdownContent.svelte
View File

@ -34,7 +34,7 @@
import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
import githubLightCss from 'highlight.js/styles/github.css?inline';
import { mode } from 'mode-watcher';
import { CodeBlockActions, DialogCodePreview } from '$lib/components/app';
import { ActionIconsCodeBlock, DialogCodePreview } from '$lib/components/app';
import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
import type { DatabaseMessage } from '$lib/types/database';
@ -604,7 +604,7 @@
<div class="code-block-wrapper streaming-code-block relative">
<div class="code-block-header">
<span class="code-language">{incompleteCodeBlock.language || 'text'}</span>
<CodeBlockActions
<ActionIconsCodeBlock
code={incompleteCodeBlock.code}
language={incompleteCodeBlock.language || 'text'}
disabled={true}

6
tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import * as Dialog from '$lib/components/ui/dialog';
import * as Table from '$lib/components/ui/table';
import { BadgeModality, CopyToClipboardIcon } from '$lib/components/app';
import { BadgeModality, ActionIconCopyToClipboard } from '$lib/components/app';
import { serverStore } from '$lib/stores/server.svelte';
import { modelsStore, modelOptions, modelsLoading } from '$lib/stores/models.svelte';
import { formatFileSize, formatParameters, formatNumber } from '$lib/utils';
@ -73,7 +73,7 @@
{modelName}
</span>
<CopyToClipboardIcon
<ActionIconCopyToClipboard
text={modelName || ''}
canCopy={!!modelName}
ariaLabel="Copy model name to clipboard"
@ -97,7 +97,7 @@
{serverProps.model_path}
</span>
<CopyToClipboardIcon
<ActionIconCopyToClipboard
text={serverProps.model_path}
ariaLabel="Copy model path to clipboard"
/>

0
tools/server/webui/src/lib/components/app/actions/KeyboardShortcutInfo.svelte → tools/server/webui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte
View File

8
tools/server/webui/src/lib/components/app/misc/index.ts
View File

@ -35,3 +35,11 @@ export { default as HorizontalScrollCarousel } from './HorizontalScrollCarousel.
* Useful for long names or paths in constrained spaces.
*/
export { default as TruncatedText } from './TruncatedText.svelte';
/**
* **KeyboardShortcutInfo** - Keyboard shortcut hint display
*
* Displays keyboard shortcut hints (e.g., "⌘ + Enter").
* Supports special keys like shift, cmd, and custom text.
*/
export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';

4
tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { Package } from '@lucide/svelte';
import { BadgeInfo, CopyToClipboardIcon } from '$lib/components/app';
import { BadgeInfo, ActionIconCopyToClipboard } from '$lib/components/app';
import { modelsStore } from '$lib/stores/models.svelte';
import { serverStore } from '$lib/stores/server.svelte';
import * as Tooltip from '$lib/components/ui/tooltip';
@ -34,7 +34,7 @@
{model}
{#if showCopyIcon}
<CopyToClipboardIcon text={model || ''} ariaLabel="Copy model name" />
<ActionIconCopyToClipboard text={model || ''} ariaLabel="Copy model name" />
{/if}
</BadgeInfo>
{/snippet}