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

Add fade-in animation for user and assistant message bubbles

Browse source
This commit is contained in:
Andrew Beal 2025-10-02 12:49:40 +01:00
parent d8cf037045
commit 129b1fb4e0
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Components/ChatArea.svelte
View file

@ -117,9 +117,9 @@
<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 class="message-text-user">{message.content}</p>
<p class="message-text-user fade-in-fast">{message.content}</p>
{:else}
<div class="markdown-content" class:streaming={message.isStreaming}>
<div class="markdown-content fade-in-fast" class:streaming={message.isStreaming}>
<!-- Streaming message: use action for initialization -->
{#if message.isStreaming}
<div use:streamingAction={message.id} class="streaming-content"></div>
@ -212,6 +212,22 @@
min-height: 1em; /* Ensure the element exists for binding */
}
/* Streaming message styles */
.fade-in-fast {
animation: reveal-fade 0.5s ease-in-out forwards;
}
@keyframes reveal-fade {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Welcome text animation */
.typing-in {
overflow: hidden;