Skip to content

Commit 501adef

Browse files
freddyaboultongradio-pr-botabidlabs
authored
Some agent low-hanging issues (#10214)
* Add code * add changeset * add changeset * Fix box closing issue * Fix handling --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
1 parent 9b17032 commit 501adef

7 files changed

Lines changed: 258 additions & 160 deletions

File tree

‎.changeset/fifty-crabs-mix.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@gradio/chatbot": patch
3+
"gradio": patch
4+
---
5+
6+
fix:Some agent low-hanging issues

‎js/chatbot/Chatbot.stories.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,3 +422,22 @@ This document is a showcase of various Markdown capabilities.`,
422422
]
423423
}}
424424
/>
425+
426+
<Story
427+
name="Displaying Tool Message"
428+
args={{
429+
type: "messages",
430+
display_consecutive_in_same_bubble: true,
431+
value: [
432+
{
433+
role: "user",
434+
content: "What is the weather like today?"
435+
},
436+
{
437+
role: "assistant",
438+
metadata: { title: "☀️ Using Weather Tool" },
439+
content: "Weather looks sunny today."
440+
}
441+
]
442+
}}
443+
/>

‎js/chatbot/shared/Component.svelte‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,21 @@
3939
on:load
4040
/>
4141
{:else if type === "audio"}
42-
<svelte:component
43-
this={components[type]}
44-
{value}
45-
show_label={false}
46-
show_share_button={true}
47-
{i18n}
48-
label=""
49-
waveform_settings={{ autoplay: props.autoplay }}
50-
waveform_options={{}}
51-
show_download_button={allow_file_downloads}
52-
{display_icon_button_wrapper_top_corner}
53-
on:load
54-
/>
42+
<div style="position: relative;">
43+
<svelte:component
44+
this={components[type]}
45+
{value}
46+
show_label={false}
47+
show_share_button={true}
48+
{i18n}
49+
label=""
50+
waveform_settings={{ autoplay: props.autoplay }}
51+
waveform_options={{}}
52+
show_download_button={allow_file_downloads}
53+
{display_icon_button_wrapper_top_corner}
54+
on:load
55+
/>
56+
</div>
5557
{:else if type === "video"}
5658
<svelte:component
5759
this={components[type]}

‎js/chatbot/shared/Message.svelte‎

Lines changed: 43 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<script lang="ts">
22
import { is_component_message, is_last_bot_message } from "../shared/utils";
3-
import { File } from "@gradio/icons";
3+
44
import { Image } from "@gradio/image/shared";
5-
import Component from "./Component.svelte";
65
import type { FileData, Client } from "@gradio/client";
76
import type { NormalisedMessage } from "../types";
8-
import MessageBox from "./MessageBox.svelte";
9-
import { MarkdownCode as Markdown } from "@gradio/markdown-code";
7+
108
import type { I18nFormatter } from "js/core/src/gradio_helper";
119
import type { ComponentType, SvelteComponent } from "svelte";
1210
import ButtonPanel from "./ButtonPanel.svelte";
11+
import MessageContent from "./MessageContent.svelte";
12+
import MessageBox from "./MessageBox.svelte";
1313
1414
export let value: NormalisedMessage[];
1515
export let avatar_img: FileData | null;
@@ -148,86 +148,50 @@
148148
dir={rtl ? "rtl" : "ltr"}
149149
aria-label={role + "'s message: " + get_message_label_data(message)}
150150
>
151-
{#if message.type === "text"}
152-
<div class="message-content">
153-
{#if message?.metadata?.title}
154-
<MessageBox
155-
title={message.metadata.title}
156-
expanded={is_last_bot_message([message], value)}
157-
>
158-
<Markdown
159-
message={message.content}
160-
{latex_delimiters}
161-
{sanitize_html}
162-
{render_markdown}
163-
{line_breaks}
164-
on:load={scroll}
165-
{root}
166-
/>
167-
</MessageBox>
168-
{:else}
169-
<Markdown
170-
message={message.content}
171-
{latex_delimiters}
172-
{sanitize_html}
173-
{render_markdown}
174-
{line_breaks}
175-
on:load={scroll}
176-
{root}
177-
/>
178-
{/if}
179-
</div>
180-
{:else if message.type === "component" && message.content.component in _components}
181-
<Component
151+
{#if message?.metadata?.title}
152+
<MessageBox
153+
title={message.metadata.title}
154+
expanded={is_last_bot_message([message], value)}
155+
{rtl}
156+
>
157+
<MessageContent
158+
{message}
159+
{sanitize_html}
160+
{latex_delimiters}
161+
{render_markdown}
162+
{_components}
163+
{upload}
164+
{thought_index}
165+
{target}
166+
{root}
167+
{theme_mode}
168+
{_fetch}
169+
{scroll}
170+
{allow_file_downloads}
171+
{display_consecutive_in_same_bubble}
172+
{i18n}
173+
{line_breaks}
174+
/>
175+
</MessageBox>
176+
{:else}
177+
<MessageContent
178+
{message}
179+
{sanitize_html}
180+
{latex_delimiters}
181+
{render_markdown}
182+
{_components}
183+
{upload}
184+
{thought_index}
182185
{target}
186+
{root}
183187
{theme_mode}
184-
props={message.content.props}
185-
type={message.content.component}
186-
components={_components}
187-
value={message.content.value}
188-
display_icon_button_wrapper_top_corner={thought_index > 0 &&
189-
display_consecutive_in_same_bubble}
190-
{i18n}
191-
{upload}
192188
{_fetch}
193-
on:load={() => scroll()}
189+
{scroll}
194190
{allow_file_downloads}
191+
{display_consecutive_in_same_bubble}
192+
{i18n}
193+
{line_breaks}
195194
/>
196-
{:else if message.type === "component" && message.content.component === "file"}
197-
<div class="file-container">
198-
<div class="file-icon">
199-
<File />
200-
</div>
201-
<div class="file-info">
202-
<a
203-
data-testid="chatbot-file"
204-
class="file-link"
205-
href={message.content.value.url}
206-
target="_blank"
207-
download={window.__is_colab__
208-
? null
209-
: message.content.value?.orig_name ||
210-
message.content.value?.path.split("/").pop() ||
211-
"file"}
212-
>
213-
<span class="file-name"
214-
>{message.content.value?.orig_name ||
215-
message.content.value?.path.split("/").pop() ||
216-
"file"}</span
217-
>
218-
</a>
219-
<span class="file-type"
220-
>{(
221-
message.content.value?.orig_name ||
222-
message.content.value?.path ||
223-
""
224-
)
225-
.split(".")
226-
.pop()
227-
.toUpperCase()}</span
228-
>
229-
</div>
230-
</div>
231195
{/if}
232196
</button>
233197
</div>
@@ -447,10 +411,6 @@
447411
}
448412
}
449413
450-
.message-content {
451-
padding: var(--spacing-sm) var(--spacing-xl);
452-
}
453-
454414
.avatar-container {
455415
align-self: flex-start;
456416
position: relative;
@@ -594,52 +554,4 @@
594554
.panel .message {
595555
margin-bottom: var(--spacing-md);
596556
}
597-
598-
.file-container {
599-
display: flex;
600-
align-items: center;
601-
gap: var(--spacing-lg);
602-
padding: var(--spacing-lg);
603-
border-radius: var(--radius-lg);
604-
width: fit-content;
605-
margin: var(--spacing-sm) 0;
606-
}
607-
608-
.file-icon {
609-
display: flex;
610-
align-items: center;
611-
justify-content: center;
612-
color: var(--body-text-color);
613-
}
614-
615-
.file-icon :global(svg) {
616-
width: var(--size-7);
617-
height: var(--size-7);
618-
}
619-
620-
.file-info {
621-
display: flex;
622-
flex-direction: column;
623-
}
624-
625-
.file-link {
626-
text-decoration: none;
627-
color: var(--body-text-color);
628-
display: flex;
629-
flex-direction: column;
630-
gap: var(--spacing-xs);
631-
}
632-
633-
.file-name {
634-
font-family: var(--font);
635-
font-size: var(--text-md);
636-
font-weight: 500;
637-
}
638-
639-
.file-type {
640-
font-family: var(--font);
641-
font-size: var(--text-sm);
642-
color: var(--body-text-color-subdued);
643-
text-transform: uppercase;
644-
}
645557
</style>

‎js/chatbot/shared/MessageBox.svelte‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
11
<script lang="ts">
22
export let expanded = false;
33
export let title: string;
4+
export let rtl = false;
45
56
function toggleExpanded(): void {
67
expanded = !expanded;
78
}
89
</script>
910

10-
<button class="box" on:click={toggleExpanded}>
11-
<div class="title">
12-
<span class="title-text">{title}</span>
13-
<span
14-
style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
15-
class="arrow"
11+
<div style:padding="var(--spacing-sm) var(--spacing-xl)">
12+
<div class="box" style:text-align={rtl ? "right" : "left"}>
13+
<div
14+
class="title"
15+
on:click|stopPropagation={toggleExpanded}
16+
role="button"
17+
tabindex="0"
18+
on:keydown={(e) => e.key === "Enter" && toggleExpanded()}
1619
>
17-
▼
18-
</span>
19-
</div>
20-
{#if expanded}
21-
<div class="content">
22-
<slot></slot>
20+
<span class="title-text">{title}</span>
21+
<span
22+
style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
23+
class="arrow"
24+
>
25+
▼
26+
</span>
2327
</div>
24-
{/if}
25-
</button>
28+
{#if expanded}
29+
<div class="content">
30+
<slot></slot>
31+
</div>
32+
{/if}
33+
</div>
34+
</div>
2635

2736
<style>
2837
.box {
2938
border-radius: 4px;
30-
cursor: pointer;
3139
max-width: max-content;
3240
background: var(--color-accent-soft);
3341
border: 1px solid var(--border-color-accent-subdued);
@@ -40,6 +48,7 @@
4048
padding: 3px 6px;
4149
color: var(--body-text-color);
4250
opacity: 0.8;
51+
cursor: pointer;
4352
}
4453
4554
.content {

0 commit comments

Comments
 (0)