gradio/js/multimodaltextbox/MultimodalTextbox.stories.svelte
Dawood Khan 15da39fca0
Multimodal Textbox (Chat Input Component) (#7420)
* first pass

* multimodal textbox

* add changeset

* remove file

* more changes

* changes

* add changeset

* revert demo

* doc strings fix

* update demo

* file icons

* more updates

* format

* add story

* remove doc line

* type fixes

* chat interface

* new demo

* image upload fix

* ui changes

* addressing PR comments

* format

* type check

* more pr fixes

* format

* format

* test fixes

* test fixes

* Streaming fixes + other stuff

* optional keys to dict value

* final fixes

* notebook

* format

* Update guides/04_chatbots/01_creating-a-chatbot-fast.md

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/04_chatbots/01_creating-a-chatbot-fast.md

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/04_chatbots/01_creating-a-chatbot-fast.md

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* merge

* backend fixes

* story fix

* ui test fix

* format

* story

* format

* demo fix

* streaming test fix

* stories fix

* stories fix

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2024-03-19 13:16:05 -07:00

76 lines
1.8 KiB
Svelte

<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import MultimodalTextbox from "./Index.svelte";
</script>
<Meta
title="Components/MultimodalTextbox"
component={MultimodalTextbox}
argTypes={{
label: {
control: "text",
description: "The textbox label",
name: "label"
},
show_label: {
options: [true, false],
description: "Whether to show the label",
control: { type: "boolean" },
defaultValue: true
},
text_align: {
options: ["left", "right"],
description: "Whether to align the text left or right",
control: { type: "select" },
defaultValue: "left"
},
lines: {
options: [1, 5, 10, 20],
description: "The number of lines to display in the textbox",
control: { type: "select" },
defaultValue: 1
},
max_lines: {
options: [1, 5, 10, 20],
description:
"The maximum number of lines to allow users to type in the textbox",
control: { type: "select" },
defaultValue: 1
},
rtl: {
options: [true, false],
description: "Whether to render right-to-left",
control: { type: "boolean" },
defaultValue: false
}
}}
/>
<Template let:args>
<MultimodalTextbox {...args} />
</Template>
<Story
name="MultimodalTextbox with file and label"
args={{
value: {
text: "sample text",
files: [
{
path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
orig_name: "cheetah.jpg"
}
]
},
label: "My simple label",
show_label: true
}}
/>
<Story
name="MultimodalTextbox with 5 lines and max 5 lines"
args={{ lines: 5, max_lines: 5 }}
/>
<Story name="Right aligned textbox" args={{ text_align: "right" }} />
<Story name="RTL textbox" args={{ rtl: true }} />