feat(assistant-chat): add animated thinking loader while waiting for response

This commit is contained in:
2026-02-24 14:15:35 +03:00
parent 5e3c213b92
commit 7e6bd56488

View File

@@ -539,6 +539,24 @@
</div>
</div>
{/each}
{#if loading}
<div class="mr-8">
<div class="rounded-xl border border-slate-200 bg-white p-3">
<div class="mb-1 flex items-center justify-between gap-2">
<span class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
Assistant
</span>
</div>
<div class="flex items-center gap-2 text-sm text-slate-700">
<span>{$t.assistant?.thinking || 'Думаю'}</span>
<span class="thinking-dots" aria-hidden="true">
<span></span><span></span><span></span>
</span>
</div>
</div>
</div>
{/if}
</div>
<div class="border-t border-slate-200 p-3">
@@ -562,4 +580,42 @@
</div>
</aside>
{/if}
<style>
.thinking-dots {
display: inline-flex;
gap: 0.25rem;
align-items: center;
}
.thinking-dots span {
width: 0.35rem;
height: 0.35rem;
border-radius: 9999px;
background: #0ea5e9;
opacity: 0.35;
animation: assistant-thinking-bounce 0.9s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) {
animation-delay: 0.12s;
}
.thinking-dots span:nth-child(3) {
animation-delay: 0.24s;
}
@keyframes assistant-thinking-bounce {
0%,
80%,
100% {
transform: translateY(0);
opacity: 0.35;
}
40% {
transform: translateY(-0.2rem);
opacity: 1;
}
}
</style>
<!-- [/DEF:AssistantChatPanel:Component] -->