mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-07 11:46:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve uploaded file UI in Chatbot (#10137)

Browse Source 
* handle pasted text as file

* test

* add changeset

* remove unneeded test

* update file UI

* add changeset

* Revert "handle pasted text as file"

This reverts commit 1910029f10.

* add changeset

* Revert "test"

This reverts commit 25c17bd8d3.

* story

* remove border

* Revert "add changeset"

This reverts commit 29a91ee9df.

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Hannah 2024-12-10 15:50:32 +00:00 committed by GitHub
parent 3a053cc76c
commit fe7a9db659
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 128 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/slimy-ties-sin.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/chatbot": minor
"gradio": minor
---
feat:Improve uploaded file UI in Chatbot

39
js/chatbot/Chatbot.stories.svelte
View File

@ -184,3 +184,42 @@ This document is a showcase of various Markdown capabilities.`,
]
}}
/>
<Story
name="Uploaded text files"
args={{
type: "messages",
value: [
{
role: "user",
content: {
file: {
path: "abc/qwerty.pdf",
url: ""
},
alt_text: null
}
},
{
role: "user",
content: {
file: {
path: "abc/qwerty.txt",
url: ""
},
alt_text: null
}
},
{
role: "user",
content: {
file: {
path: "abc/qwerty.rtf",
url: ""
},
alt_text: null
}
}
]
}}
/>

98
js/chatbot/shared/Message.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import { is_component_message, is_last_bot_message } from "../shared/utils";
import { File } from "@gradio/icons";
import { Image } from "@gradio/image/shared";
import Component from "./Component.svelte";
import type { FileData, Client } from "@gradio/client";
@ -188,21 +189,40 @@
{allow_file_downloads}
/>
{:else if message.type === "component" && message.content.component === "file"}
<a
data-testid="chatbot-file"
class="file-pil"
href={message.content.value.url}
target="_blank"
download={window.__is_colab__
? null
: message.content.value?.orig_name ||
message.content.value?.path.split("/").pop() ||
"file"}
>
{message.content.value?.orig_name ||
message.content.value?.path.split("/").pop() ||
"file"}
</a>
<div class="file-container">
<div class="file-icon">
<File />
</div>
<div class="file-info">
<a
data-testid="chatbot-file"
class="file-link"
href={message.content.value.url}
target="_blank"
download={window.__is_colab__
? null
: message.content.value?.orig_name ||
message.content.value?.path.split("/").pop() ||
"file"}
>
<span class="file-name"
>{message.content.value?.orig_name ||
message.content.value?.path.split("/").pop() ||
"file"}</span
>
</a>
<span class="file-type"
>{(
message.content.value?.orig_name ||
message.content.value?.path ||
""
)
.split(".")
.pop()
.toUpperCase()}</span
>
</div>
</div>
{/if}
</button>
</div>
@ -569,4 +589,52 @@
.panel .message {
margin-bottom: var(--spacing-md);
}
.file-container {
display: flex;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
width: fit-content;
margin: var(--spacing-sm) 0;
}
.file-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--body-text-color);
}
.file-icon :global(svg) {
width: var(--size-7);
height: var(--size-7);
}
.file-info {
display: flex;
flex-direction: column;
}
.file-link {
text-decoration: none;
color: var(--body-text-color);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.file-name {
font-family: var(--font);
font-size: var(--text-md);
font-weight: 500;
}
.file-type {
font-family: var(--font);
font-size: var(--text-sm);
color: var(--body-text-color-subdued);
text-transform: uppercase;
}
</style>