Skip to content

Commit

Permalink
Some agent low-hanging issues (#10214)
Browse files Browse the repository at this point in the history 
* Add code

* add changeset

* add changeset

* Fix box closing issue

* Fix handling

---------

Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Abubakar Abid <[email protected]>
  • Loading branch information
@freddyaboulton @gradio-pr-bot @abidlabs
3 people authored Dec 17, 2024
1 parent 9b17032 commit 501adef
Show file tree
Hide file tree
Showing 7 changed files with 258 additions and 160 deletions.
6 changes: 6 additions & 0 deletions .changeset/fifty-crabs-mix.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/chatbot": patch
"gradio": patch
---

fix:Some agent low-hanging issues
19 changes: 19 additions & 0 deletions js/chatbot/Chatbot.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,3 +422,22 @@ This document is a showcase of various Markdown capabilities.`,
]
}}
/>

<Story
name="Displaying Tool Message"
args={{
type: "messages",
display_consecutive_in_same_bubble: true,
value: [
{
role: "user",
content: "What is the weather like today?"
},
{
role: "assistant",
metadata: { title: "☀️ Using Weather Tool" },
content: "Weather looks sunny today."
}
]
}}
/>
28 changes: 15 additions & 13 deletions js/chatbot/shared/Component.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,21 @@
on:load
/>
{:else if type === "audio"}
<svelte:component
this={components[type]}
{value}
show_label={false}
show_share_button={true}
{i18n}
label=""
waveform_settings={{ autoplay: props.autoplay }}
waveform_options={{}}
show_download_button={allow_file_downloads}
{display_icon_button_wrapper_top_corner}
on:load
/>
<div style="position: relative;">
<svelte:component
this={components[type]}
{value}
show_label={false}
show_share_button={true}
{i18n}
label=""
waveform_settings={{ autoplay: props.autoplay }}
waveform_options={{}}
show_download_button={allow_file_downloads}
{display_icon_button_wrapper_top_corner}
on:load
/>
</div>
{:else if type === "video"}
<svelte:component
this={components[type]}
Expand Down
174 changes: 43 additions & 131 deletions js/chatbot/shared/Message.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<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";
import type { NormalisedMessage } from "../types";
import MessageBox from "./MessageBox.svelte";
import { MarkdownCode as Markdown } from "@gradio/markdown-code";
import type { I18nFormatter } from "js/core/src/gradio_helper";
import type { ComponentType, SvelteComponent } from "svelte";
import ButtonPanel from "./ButtonPanel.svelte";
import MessageContent from "./MessageContent.svelte";
import MessageBox from "./MessageBox.svelte";
export let value: NormalisedMessage[];
export let avatar_img: FileData | null;
Expand Down Expand Up @@ -148,86 +148,50 @@
dir={rtl ? "rtl" : "ltr"}
aria-label={role + "'s message: " + get_message_label_data(message)}
>
{#if message.type === "text"}
<div class="message-content">
{#if message?.metadata?.title}
<MessageBox
title={message.metadata.title}
expanded={is_last_bot_message([message], value)}
>
<Markdown
message={message.content}
{latex_delimiters}
{sanitize_html}
{render_markdown}
{line_breaks}
on:load={scroll}
{root}
/>
</MessageBox>
{:else}
<Markdown
message={message.content}
{latex_delimiters}
{sanitize_html}
{render_markdown}
{line_breaks}
on:load={scroll}
{root}
/>
{/if}
</div>
{:else if message.type === "component" && message.content.component in _components}
<Component
{#if message?.metadata?.title}
<MessageBox
title={message.metadata.title}
expanded={is_last_bot_message([message], value)}
{rtl}
>
<MessageContent
{message}
{sanitize_html}
{latex_delimiters}
{render_markdown}
{_components}
{upload}
{thought_index}
{target}
{root}
{theme_mode}
{_fetch}
{scroll}
{allow_file_downloads}
{display_consecutive_in_same_bubble}
{i18n}
{line_breaks}
/>
</MessageBox>
{:else}
<MessageContent
{message}
{sanitize_html}
{latex_delimiters}
{render_markdown}
{_components}
{upload}
{thought_index}
{target}
{root}
{theme_mode}
props={message.content.props}
type={message.content.component}
components={_components}
value={message.content.value}
display_icon_button_wrapper_top_corner={thought_index > 0 &&
display_consecutive_in_same_bubble}
{i18n}
{upload}
{_fetch}
on:load={() => scroll()}
{scroll}
{allow_file_downloads}
{display_consecutive_in_same_bubble}
{i18n}
{line_breaks}
/>
{:else if message.type === "component" && message.content.component === "file"}
<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>
Expand Down Expand Up @@ -447,10 +411,6 @@
}
}
.message-content {
padding: var(--spacing-sm) var(--spacing-xl);
}
.avatar-container {
align-self: flex-start;
position: relative;
Expand Down Expand Up @@ -594,52 +554,4 @@
.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>
39 changes: 24 additions & 15 deletions js/chatbot/shared/MessageBox.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,41 @@
<script lang="ts">
export let expanded = false;
export let title: string;
export let rtl = false;
function toggleExpanded(): void {
expanded = !expanded;
}
</script>

<button class="box" on:click={toggleExpanded}>
<div class="title">
<span class="title-text">{title}</span>
<span
style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
class="arrow"
<div style:padding="var(--spacing-sm) var(--spacing-xl)">
<div class="box" style:text-align={rtl ? "right" : "left"}>
<div
class="title"
on:click|stopPropagation={toggleExpanded}
role="button"
tabindex="0"
on:keydown={(e) => e.key === "Enter" && toggleExpanded()}
>
▼
</span>
</div>
{#if expanded}
<div class="content">
<slot></slot>
<span class="title-text">{title}</span>
<span
style:transform={expanded ? "rotate(0)" : "rotate(90deg)"}
class="arrow"
>
▼
</span>
</div>
{/if}
</button>
{#if expanded}
<div class="content">
<slot></slot>
</div>
{/if}
</div>
</div>

<style>
.box {
border-radius: 4px;
cursor: pointer;
max-width: max-content;
background: var(--color-accent-soft);
border: 1px solid var(--border-color-accent-subdued);
Expand All @@ -40,6 +48,7 @@
padding: 3px 6px;
color: var(--body-text-color);
opacity: 0.8;
cursor: pointer;
}
.content {
Expand Down
Loading

0 comments on commit 501adef

Please sign in to comment.