File size: 3,423 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Chatbot from "./Index.svelte";
</script>
<Meta
title="Components/Chatbot"
component={Chatbot}
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
},
rtl: {
options: [true, false],
description: "Whether to render right-to-left",
control: { type: "boolean" },
defaultValue: false
}
}}
/>
<Template let:args>
<Chatbot
value={[
[
"Can you write a function in Python?",
"```py\ndef test():\n\tprint(x)\n```"
],
["Can you do math?", "$$1+1=2$$"],
["Can you say nothing?", null]
]}
{...args}
/>
</Template>
<Story
name="Chatbot with math enabled"
args={{ latex_delimiters: [{ left: "$$", right: "$$", display: true }] }}
/>
<Story
name="Chatbot with math disabled, small height"
args={{ latex_delimiters: [], height: 200 }}
/>
<Story
name="Chatbot with text rendered right-to-left"
args={{
rtl: true,
latex_delimiters: [{ left: "$$", right: "$$", display: true }],
value: [
[
"حلّت التجارية عرض لم, كرسي قادة دار كل. ما خيار ماذا بمحاولة به،. كما عن تونس إيطاليا. يتم بـ لأداء حادثة معزّزة.",
"إعادة احداث اعلان بين قد, ما القوى الحكومة التغييرات جهة. قبل و يذكر الإمتعاض, أوسع وشعار إستعمل بعد تم. سبتمبر الصفحة عل أضف, أي وفي الدمج تشكيل وصافرات. حيث قد بقسوة هاربر بأيدي, أملاً نتيجة الثالث ما على, ثم مدن للسيطرة بالتوقيع. هذه ان حقول أخرى."
],
[
"أي وتنصيب الصعداء انه. تاريخ بالجانب هو فصل, أخذ لمحاكم الإتفاقية ان. كنقطة بالعمل التكاليف شيء مع, وجزر الهادي كان و, أي حدى يطول الحكومة اليابان. حيث كرسي لتقليعة الاندونيسية تم, للصين وبغطاء بال بل. ٣٠ لهذه قتيل، ارتكبها كلا. سابق وبدأت تم ذات.",
"اليف نفس. ما يتبقّ لبولندا، استراليا، دول."
]
]
}}
/>
<Story
name="Chatbot with copy button"
args={{
latex_delimiters: [{ left: "$$", right: "$$", display: true }],
show_copy_button: true
}}
/>
<Story
name="Chatbot with chat bubble full width disabled"
args={{
bubble_full_width: false
}}
/>
<Story
name="Chatbot with panel layout enabled"
args={{
bubble_full_width: false,
layout: "panel"
}}
/>
<Story
name="Chatbot with panel layout enabled and avatars"
args={{
layout: "panel",
avatar_images: [
"https://avatars.githubusercontent.com/u/100000?v=4",
"https://avatars.githubusercontent.com/u/100000?v=4"
]
}}
/>
<Story
name="Chatbot with bubble layout enabled and avatars"
args={{
bubble_full_width: true,
layout: "bubble",
avatar_images: [
"https://avatars.githubusercontent.com/u/100000?v=4",
"https://avatars.githubusercontent.com/u/100000?v=4"
]
}}
/>
<Story
name="Chatbot with percentage height"
args={{
bubble_full_width: false,
layout: "panel",
height: "50%"
}}
/>
|