feat(assistant-chat): add animated thinking loader while waiting for response
This commit is contained in:
@@ -539,6 +539,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/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>
|
||||||
|
|
||||||
<div class="border-t border-slate-200 p-3">
|
<div class="border-t border-slate-200 p-3">
|
||||||
@@ -562,4 +580,42 @@
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
{/if}
|
{/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] -->
|
<!-- [/DEF:AssistantChatPanel:Component] -->
|
||||||
|
|||||||
Reference in New Issue
Block a user