Used the new chat width logic in ChatScreen and ChatWarning
This commit is contained in:
parent
b6dbbcc1fb
commit
61d99bbd88
|
|
@ -15,7 +15,7 @@
|
||||||
} from '$lib/components/app';
|
} from '$lib/components/app';
|
||||||
import * as AlertDialog from '$lib/components/ui/alert-dialog';
|
import * as AlertDialog from '$lib/components/ui/alert-dialog';
|
||||||
import { config } from '$lib/stores/settings.svelte';
|
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 {
|
import {
|
||||||
AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
|
AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
|
||||||
AUTO_SCROLL_INTERVAL,
|
AUTO_SCROLL_INTERVAL,
|
||||||
|
|
@ -87,9 +87,7 @@
|
||||||
|
|
||||||
let isCurrentConversationLoading = $derived(isLoading());
|
let isCurrentConversationLoading = $derived(isLoading());
|
||||||
|
|
||||||
let maxWidthClass = $derived(
|
let widthConfig = $derived(getChatWidth(config().autoChatWidth, config().customChatWidth));
|
||||||
config().responsiveChatWidth ? MAX_WIDTH_CLASSES : DEFAULT_MAX_WIDTH_CLASS
|
|
||||||
);
|
|
||||||
|
|
||||||
async function handleDeleteConfirm() {
|
async function handleDeleteConfirm() {
|
||||||
const conversation = activeConversation();
|
const conversation = activeConversation();
|
||||||
|
|
@ -308,7 +306,10 @@
|
||||||
<ChatProcessingInfo />
|
<ChatProcessingInfo />
|
||||||
|
|
||||||
{#if serverWarning()}
|
{#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}
|
{/if}
|
||||||
|
|
||||||
<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
|
<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
|
||||||
|
|
@ -339,7 +340,7 @@
|
||||||
ondrop={handleDrop}
|
ondrop={handleDrop}
|
||||||
role="main"
|
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 }}>
|
<div class="mb-8 text-center" in:fade={{ duration: 300 }}>
|
||||||
<h1 class="mb-2 text-3xl font-semibold tracking-tight">llama.cpp</h1>
|
<h1 class="mb-2 text-3xl font-semibold tracking-tight">llama.cpp</h1>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,16 +5,17 @@
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
class?: string;
|
class?: string;
|
||||||
|
style?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { class: className = '' }: Props = $props();
|
let { class: className = '', style = '' }: Props = $props();
|
||||||
|
|
||||||
function handleRefreshServer() {
|
function handleRefreshServer() {
|
||||||
serverStore.fetchServerProps();
|
serverStore.fetchServerProps();
|
||||||
}
|
}
|
||||||
</script>
|
</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
|
<div
|
||||||
class="rounded-md border border-yellow-200 bg-yellow-50 px-3 py-2 dark:border-yellow-800 dark:bg-yellow-950"
|
class="rounded-md border border-yellow-200 bg-yellow-50 px-3 py-2 dark:border-yellow-800 dark:bg-yellow-950"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue