mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-25 12:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix Chatbot Pending Message Issues (#6386)

Browse Source 
* fix

* add changeset

* fix

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Dawood Khan 2023-11-13 20:12:56 -05:00 committed by GitHub
parent 324867f63c
commit e76a9e8fcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/neat-swans-obey.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/chatbot": patch
"gradio": patch
---
fix:Fix Chatbot Pending Message Issues

7
js/chatbot/shared/ChatBot.svelte
View File

@ -131,7 +131,7 @@
{#if value !== null}
{#each value as message_pair, i}
{#each message_pair as message, j}
{#if message !== null || pending_message}
{#if message !== null}
<div class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}">
{#if avatar_images[j] !== null}
<div class="avatar-container">
@ -222,8 +222,6 @@
>
{message.file?.orig_name || message.file?.path}
</a>
{:else if pending_message && j === 1}
<Pending {layout} />
{/if}
</button>
</div>
@ -256,6 +254,9 @@
{/if}
{/each}
{/each}
{#if pending_message}
<Pending {layout} />
{/if}
{/if}
</div>
</div>

24
js/chatbot/shared/Pending.svelte
View File

@ -19,7 +19,7 @@
<style>
.pending {
background: var(--background-fill-secondary);
background: var(--color-accent-soft);
display: flex;
flex-direction: row;
justify-content: center;
@ -27,16 +27,30 @@
align-self: center;
gap: 2px;
width: 100%;
height: 100%;
height: var(--size-16);
}
.dot-flashing {
animation: dot-flashing 1s infinite linear alternate;
animation: flash 1s infinite ease-in-out;
border-radius: 5px;
background-color: var(--body-text-color);
width: 5px;
height: 5px;
width: 7px;
height: 7px;
color: var(--body-text-color);
}
@keyframes flash {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.dot-flashing:nth-child(1) {
animation-delay: 0s;
}
.dot-flashing:nth-child(2) {
animation-delay: 0.33s;
}