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
| import type { Meta, StoryObj } from '@storybook/react'
|
| import type { ChatItem } from '../../types'
| import { mockedWorkflowProcess } from './__mocks__/workflowProcess'
| import { markdownContent } from './__mocks__/markdownContent'
| import { markdownContentSVG } from './__mocks__/markdownContentSVG'
| import Answer from '.'
|
| const meta = {
| title: 'Base/Chat Answer',
| component: Answer,
| parameters: {
| layout: 'fullscreen',
| },
| tags: ['autodocs'],
| argTypes: {
| noChatInput: { control: 'boolean', description: 'If set to true, some buttons that are supposed to be shown on hover will not be displayed.' },
| responding: { control: 'boolean', description: 'Indicates if the answer is being generated.' },
| showPromptLog: { control: 'boolean', description: 'If set to true, the prompt log button will be shown on hover.' },
| },
| args: {
| noChatInput: false,
| responding: false,
| showPromptLog: false,
| },
| } satisfies Meta<typeof Answer>
|
| export default meta
| type Story = StoryObj<typeof meta>
|
| const mockedBaseChatItem = {
| id: '1',
| isAnswer: true,
| content: 'Hello, how can I assist you today?',
| } satisfies ChatItem
|
| export const Basic: Story = {
| args: {
| item: mockedBaseChatItem,
| question: mockedBaseChatItem.content,
| index: 0,
| },
| render: (args) => {
| return <div className="w-full px-10 py-5">
| <Answer {...args} />
| </div>
| },
| }
|
| export const WithWorkflowProcess: Story = {
| args: {
| item: {
| ...mockedBaseChatItem,
| workflowProcess: mockedWorkflowProcess,
| },
| question: mockedBaseChatItem.content,
| index: 0,
| },
| render: (args) => {
| return <div className="w-full px-10 py-5">
| <Answer {...args} />
| </div>
| },
| }
|
| export const WithMarkdownContent: Story = {
| args: {
| item: {
| ...mockedBaseChatItem,
| content: markdownContent,
| },
| question: mockedBaseChatItem.content,
| index: 0,
| },
| render: (args) => {
| return <div className="w-full px-10 py-5">
| <Answer {...args} />
| </div>
| },
| }
|
| export const WithMarkdownSVG: Story = {
| args: {
| item: {
| ...mockedBaseChatItem,
| content: markdownContentSVG,
| },
| question: mockedBaseChatItem.content,
| index: 0,
| },
| render: (args) => {
| return <div className="w-full px-10 py-5">
| <Answer {...args} />
| </div>
| },
| }
|
|
