obsidian-plugin/andy-stack_vaultkeeper-ai
1
0
Fork 0
mirror of https://github.com/andy-stack/vaultkeeper-ai.git synced 2026-07-22 06:42:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance chat message styling: add user-specific text class, adjust chat padding transition, and improve layout responsiveness

Browse source
This commit is contained in:
Andrew Beal 2025-10-01 22:12:39 +01:00
parent 3a6ac876c2
commit 115013e710
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
Components/ChatArea.svelte
View file

@ -95,7 +95,7 @@
<div class="message-container" class:user={message.isUser} class:assistant={!message.isUser}>
<div class="message-bubble" class:user={message.isUser} class:assistant={!message.isUser}>
{#if message.isUser}
<p>{message.content}</p>
<p class="message-text-user">{message.content}</p>
{:else}
<div class="markdown-content" class:streaming={message.isStreaming}>
<!-- Streaming message: use action for initialization -->
@ -104,7 +104,7 @@
<StreamingIndicator/>
<ChatAreaThought/>
{#if showChatPadding}
<div class="chat-padding" transition:slide={{duration: 2000, delay: 0}}></div>
<div class="chat-padding" transition:slide={{duration: 4000, delay: 1000}}></div>
{/if}
{:else}
<!-- Static message: use traditional rendering -->
@ -128,9 +128,10 @@
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
overflow: auto;
padding: var(--size-4-3);
gap: var(--p-spacing);
gap: var(--size-4-2);
scroll-behavior: smooth;
}
.chat-area::-webkit-scrollbar {
@ -144,6 +145,7 @@
.message-container {
display: flex;
margin: 0;
}
.message-container.user {
@ -164,12 +166,17 @@
border: var(--border-width) solid var(--background-modifier-border);
border-radius: var(--radius-m);
padding: 0px var(--size-4-2);
white-space: pre-wrap;
}
.message-bubble.assistant {
word-wrap: break-word;
max-width: 100%;
}
.message-text-user {
margin: var(--size-4-2);
}
.empty-state {
justify-content: center;