Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix chatbot component streaming bug and visible bug #9730

Merged
merged 9 commits into from
Oct 17, 2024
+33 −6
Merged

Fix chatbot component streaming bug and visible bug #9730

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
68e3e00
Fix chatbot
freddyaboulton Oct 16, 2024
d501d13
fix styling
freddyaboulton Oct 16, 2024
bf950df
add changeset
gradio-pr-bot Oct 16, 2024
e286b6f
fix visible
freddyaboulton Oct 16, 2024
857cc30
add changeset
gradio-pr-bot Oct 16, 2024
b0290ab
Merge branch 'main' into chatbot-component-streaming
freddyaboulton Oct 16, 2024
6751a2e
comments
freddyaboulton Oct 16, 2024
eae98e4
Merge branch 'main' into chatbot-component-streaming
freddyaboulton Oct 17, 2024
ded734a
add changeset
gradio-pr-bot Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/fair-regions-shave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/chatbot": patch
"gradio": patch
---

fix:Fix chatbot component streaming bug and visible bug
4 changes: 4 additions & 0 deletions gradio/components/chatbot.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,6 +439,7 @@ def _postprocess_content(
| FileDataDict
| FileData
| GradioComponent
| ComponentMessage
| None,
) -> str | FileMessage | ComponentMessage | None:
if chat_message is None:
Expand All @@ -447,6 +448,9 @@ def _postprocess_content(
return chat_message
elif isinstance(chat_message, FileData):
return FileMessage(file=chat_message)
elif isinstance(chat_message, ComponentMessage):
# in the case where components are part of a streaming response
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems like self explanatory code,, comment is unnecessary imo

return chat_message
elif isinstance(chat_message, GradioComponent):
chat_message.unrender()
component = import_component_and_data(type(chat_message).__name__)
Expand Down
2 changes: 1 addition & 1 deletion js/chatbot/Index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
{min_height}
{max_height}
allow_overflow={true}
flex={true}
flex={visible}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor but feel like this should be fixed at the Block.svelte level - if flex=true, but visible=false, the Block should be hidden

overflow_behavior="auto"
>
{#if loading_status}
Expand Down
27 changes: 21 additions & 6 deletions js/chatbot/shared/ChatBot.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,12 +284,13 @@
{#if is_image_preview_open}
<div class="image-preview">
<img src={image_preview_source} alt={image_preview_source_alt} />
<button
class="image-preview-close-button"
on:click={() => {
is_image_preview_open = false;
}}><Clear /></button
>
<IconButtonWrapper>
<IconButton
Icon={Clear}
on:click={() => (is_image_preview_open = false)}
label={"Clear"}
/>
</IconButtonWrapper>
</div>
{/if}
<Message
Expand Down Expand Up @@ -595,4 +596,18 @@
0 2px 2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.image-preview {
position: absolute;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--background-fill-secondary);
display: flex;
justify-content: center;
align-items: center;
}
Comment on lines +600 to +612
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this css necessary? seemed to work fine before

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is only needed for the full-screen image preview. Otherwise when you click on an image to pull up the full screen view it will be messed up

image

</style>
Loading