wehub-resource-sync
adf0d17497
publish / version_or_publish (push) Has been cancelled
storybook-build / changes (push) Has been cancelled
storybook-build / :storybook-build (push) Has been cancelled
Sync Gradio Skills to Hugging Face / sync-skills (push) Has been cancelled
functional / changes (push) Has been cancelled
functional / build-frontend (push) Has been cancelled
functional / functional-test-SSR=false (push) Has been cancelled
functional / functional-reload (push) Has been cancelled
js / changes (push) Has been cancelled
js / js-test (push) Has been cancelled
docs-build / changes (push) Has been cancelled
docs-build / docs-build (push) Has been cancelled
docs-build / website-build (push) Has been cancelled
functional / functional-test-SSR=true (push) Has been cancelled
hygiene / hygiene-test (push) Has been cancelled
python / changes (push) Has been cancelled
python / build (push) Has been cancelled
python / test-ubuntu-latest-flaky (push) Has been cancelled
python / test-ubuntu-latest-not-flaky (push) Has been cancelled
python / test-windows-latest-flaky (push) Has been cancelled
python / test-windows-latest-not-flaky (push) Has been cancelled
115 lines
3.1 KiB
Svelte
115 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { IconButton } from "@gradio/atoms";
|
|
import ThumbDownActive from "./ThumbDownActive.svelte";
|
|
import ThumbDownDefault from "./ThumbDownDefault.svelte";
|
|
import ThumbUpActive from "./ThumbUpActive.svelte";
|
|
import ThumbUpDefault from "./ThumbUpDefault.svelte";
|
|
import Flag from "./Flag.svelte";
|
|
import FlagActive from "./FlagActive.svelte";
|
|
import type { I18nFormatter } from "js/core/src/gradio_helper";
|
|
|
|
let {
|
|
i18n,
|
|
handle_action,
|
|
feedback_options,
|
|
selected: selected_prop = null
|
|
}: {
|
|
i18n: I18nFormatter;
|
|
handle_action: (selected: string | null) => void;
|
|
feedback_options: string[];
|
|
selected?: string | null;
|
|
} = $props();
|
|
|
|
let selected = $state(selected_prop);
|
|
|
|
$effect(() => {
|
|
selected = selected_prop;
|
|
});
|
|
|
|
let extra_feedback = $derived(
|
|
feedback_options.filter(
|
|
(option) => option !== "Like" && option !== "Dislike"
|
|
)
|
|
);
|
|
|
|
function toggleSelection(newSelection: string): void {
|
|
selected = selected === newSelection ? null : newSelection;
|
|
handle_action(selected);
|
|
}
|
|
</script>
|
|
|
|
{#if feedback_options.includes("Like") || feedback_options.includes("Dislike")}
|
|
{#if feedback_options.includes("Dislike")}
|
|
<IconButton
|
|
Icon={selected === "Dislike" ? ThumbDownActive : ThumbDownDefault}
|
|
label={selected === "Dislike" ? "Disliked" : i18n("chatbot.dislike")}
|
|
color={selected === "Dislike"
|
|
? "var(--color-accent)"
|
|
: "var(--block-label-text-color)"}
|
|
onclick={() => toggleSelection("Dislike")}
|
|
/>
|
|
{/if}
|
|
{#if feedback_options.includes("Like")}
|
|
<IconButton
|
|
Icon={selected === "Like" ? ThumbUpActive : ThumbUpDefault}
|
|
label={selected === "Like" ? "Liked" : i18n("chatbot.like")}
|
|
color={selected === "Like"
|
|
? "var(--color-accent)"
|
|
: "var(--block-label-text-color)"}
|
|
onclick={() => toggleSelection("Like")}
|
|
/>
|
|
{/if}
|
|
{/if}
|
|
|
|
{#if extra_feedback.length > 0}
|
|
<div class="extra-feedback no-border">
|
|
<IconButton
|
|
Icon={selected && extra_feedback.includes(selected) ? FlagActive : Flag}
|
|
label="Feedback"
|
|
color={selected && extra_feedback.includes(selected)
|
|
? "var(--color-accent)"
|
|
: "var(--block-label-text-color)"}
|
|
/>
|
|
<div class="extra-feedback-options">
|
|
{#each extra_feedback as option}
|
|
<button
|
|
class="extra-feedback-option"
|
|
style:font-weight={selected === option ? "bold" : "normal"}
|
|
onclick={() => {
|
|
toggleSelection(option);
|
|
handle_action(selected ? selected : null);
|
|
}}>{option}</button
|
|
>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.extra-feedback {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.extra-feedback-options {
|
|
display: none;
|
|
position: absolute;
|
|
padding: var(--spacing-md) 0;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
top: 100%;
|
|
}
|
|
.extra-feedback:hover .extra-feedback-options {
|
|
display: flex;
|
|
}
|
|
.extra-feedback-option {
|
|
border: 1px solid var(--border-color-primary);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--block-label-text-color);
|
|
background-color: var(--block-background-fill);
|
|
font-size: var(--text-xs);
|
|
padding: var(--spacing-xxs) var(--spacing-sm);
|
|
width: max-content;
|
|
}
|
|
</style>
|