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

Used the new chat width logic in ChatScreen and ChatWarning

This commit is contained in:
Imad Saddik 2025-12-20 09:07:04 +01:00
parent b6dbbcc1fb
commit 61d99bbd88
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
View File

@ -15,7 +15,7 @@
} from '$lib/components/app';
import * as AlertDialog from '$lib/components/ui/alert-dialog';
import { config } from '$lib/stores/settings.svelte';
import { MAX_WIDTH_CLASSES, DEFAULT_MAX_WIDTH_CLASS } from '$lib/constants/width-classes';
import { getChatWidth } from '$lib/utils/chat-width';
import {
AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
AUTO_SCROLL_INTERVAL,
@ -87,9 +87,7 @@
let isCurrentConversationLoading = $derived(isLoading());
let maxWidthClass = $derived(
config().responsiveChatWidth ? MAX_WIDTH_CLASSES : DEFAULT_MAX_WIDTH_CLASS
);
let widthConfig = $derived(getChatWidth(config().autoChatWidth, config().customChatWidth));
async function handleDeleteConfirm() {
const conversation = activeConversation();
@ -308,7 +306,10 @@
<ChatProcessingInfo />
{#if serverWarning()}
<ChatScreenWarning class="pointer-events-auto mx-auto {maxWidthClass} px-4" />
<ChatScreenWarning
class="pointer-events-auto mx-auto {widthConfig.class} px-4"
style={widthConfig.style}
/>
{/if}
<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
@ -339,7 +340,7 @@
ondrop={handleDrop}
role="main"
>
<div class="w-full {maxWidthClass} px-4">
<div class="w-full {widthConfig.class} px-4" style={widthConfig.style}>
<div class="mb-8 text-center" in:fade={{ duration: 300 }}>
<h1 class="mb-2 text-3xl font-semibold tracking-tight">llama.cpp</h1>

5
tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenWarning.svelte
View File

@ -5,16 +5,17 @@
interface Props {
class?: string;
style?: string;
}
let { class: className = '' }: Props = $props();
let { class: className = '', style = '' }: Props = $props();
function handleRefreshServer() {
serverStore.fetchServerProps();
}
</script>
<div class="mb-3 {className}" in:fly={{ y: 10, duration: 250 }}>
<div class="mb-3 {className}" style={style} in:fly={{ y: 10, duration: 250 }}>
<div
class="rounded-md border border-yellow-200 bg-yellow-50 px-3 py-2 dark:border-yellow-800 dark:bg-yellow-950"
>