Skip to content

Commit fd21517

Browse files
thatblindgeyethatblindgeye
committed
feat(ToolCall/Response/DeepThinking): allowed handling defaut expand states
1 parent e9a3ac3 commit fd21517

File tree

7 files changed

+398
-108
lines changed

7 files changed

+398
-108
lines changed

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx‎

Lines changed: 222 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -23,113 +23,230 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
2323
};
2424

2525
return (
26-
<Message
27-
name="Bot"
28-
role="bot"
29-
avatar={patternflyAvatar}
30-
content="This example has a body description that's within the recommended limit of 2 lines:"
31-
toolResponse={{
32-
toggleContent: 'Tool response: toolName',
33-
subheading: 'Thought for 3 seconds',
34-
body: "Here's the summary for your toolName response:",
35-
cardTitle: (
36-
<Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}>
37-
<FlexItem>
38-
<Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
39-
<FlexItem grow={{ default: 'grow' }}>
40-
<Flex gap={{ default: 'gapXs' }}>
41-
<FlexItem>
42-
<WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
43-
</FlexItem>
44-
<FlexItem>toolName</FlexItem>
45-
</Flex>
46-
</FlexItem>
47-
<FlexItem>
48-
<Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
49-
<FlexItem>Execution time:</FlexItem>
50-
<FlexItem>0.12 seconds</FlexItem>
51-
</Flex>
52-
</FlexItem>
53-
</Flex>
54-
</FlexItem>
55-
<FlexItem>
56-
<Button
57-
variant="plain"
58-
aria-label="Copy tool response to clipboard"
59-
icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
60-
></Button>
61-
</FlexItem>
62-
</Flex>
63-
),
64-
cardBody: (
65-
<>
66-
<DescriptionList
67-
style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
68-
aria-label="Tool response"
26+
<>
27+
<Message
28+
name="Bot"
29+
role="bot"
30+
avatar={patternflyAvatar}
31+
content="This message has a body description that's within the recommended limit of 2 lines:"
32+
toolResponse={{
33+
toggleContent: 'Tool response: toolName',
34+
subheading: 'Thought for 3 seconds',
35+
body: "Here's the summary for your toolName response:",
36+
cardTitle: (
37+
<Flex
38+
alignItems={{ default: 'alignItemsCenter' }}
39+
justifyContent={{ default: 'justifyContentSpaceBetween' }}
6940
>
70-
<DescriptionListGroup
71-
style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
41+
<FlexItem>
42+
<Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
43+
<FlexItem grow={{ default: 'grow' }}>
44+
<Flex gap={{ default: 'gapXs' }}>
45+
<FlexItem>
46+
<WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
47+
</FlexItem>
48+
<FlexItem>toolName</FlexItem>
49+
</Flex>
50+
</FlexItem>
51+
<FlexItem>
52+
<Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
53+
<FlexItem>Execution time:</FlexItem>
54+
<FlexItem>0.12 seconds</FlexItem>
55+
</Flex>
56+
</FlexItem>
57+
</Flex>
58+
</FlexItem>
59+
<FlexItem>
60+
<Button
61+
variant="plain"
62+
aria-label="Copy tool response to clipboard"
63+
icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
64+
></Button>
65+
</FlexItem>
66+
</Flex>
67+
),
68+
cardBody: (
69+
<>
70+
<DescriptionList
71+
style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
72+
aria-label="Tool response"
7273
>
73-
<DescriptionListTerm>Parameters</DescriptionListTerm>
74-
<DescriptionListDescription>
75-
<Flex direction={{ default: 'column' }}>
76-
<FlexItem>Optional description text for parameters.</FlexItem>
77-
<FlexItem>
78-
<Flex gap={{ default: 'gapSm' }}>
79-
<FlexItem>
80-
<Label variant="outline" color="blue">
81-
type
82-
</Label>
83-
</FlexItem>
84-
<FlexItem>
85-
<Label variant="outline" color="blue">
86-
properties
87-
</Label>
88-
</FlexItem>
89-
<FlexItem>
90-
<Label variant="outline" color="blue">
91-
label
92-
</Label>
93-
</FlexItem>
94-
<FlexItem>
95-
<Label variant="outline" color="blue">
96-
label
97-
</Label>
98-
</FlexItem>
99-
</Flex>
100-
</FlexItem>
101-
</Flex>
102-
</DescriptionListDescription>
103-
</DescriptionListGroup>
104-
<DescriptionListGroup
105-
style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
74+
<DescriptionListGroup
75+
style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
76+
>
77+
<DescriptionListTerm>Parameters</DescriptionListTerm>
78+
<DescriptionListDescription>
79+
<Flex direction={{ default: 'column' }}>
80+
<FlexItem>Optional description text for parameters.</FlexItem>
81+
<FlexItem>
82+
<Flex gap={{ default: 'gapSm' }}>
83+
<FlexItem>
84+
<Label variant="outline" color="blue">
85+
type
86+
</Label>
87+
</FlexItem>
88+
<FlexItem>
89+
<Label variant="outline" color="blue">
90+
properties
91+
</Label>
92+
</FlexItem>
93+
<FlexItem>
94+
<Label variant="outline" color="blue">
95+
label
96+
</Label>
97+
</FlexItem>
98+
<FlexItem>
99+
<Label variant="outline" color="blue">
100+
label
101+
</Label>
102+
</FlexItem>
103+
</Flex>
104+
</FlexItem>
105+
</Flex>
106+
</DescriptionListDescription>
107+
</DescriptionListGroup>
108+
<DescriptionListGroup
109+
style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
110+
>
111+
<DescriptionListTerm>Response</DescriptionListTerm>
112+
<DescriptionListDescription>
113+
<ExpandableSection
114+
variant={ExpandableSectionVariant.truncate}
115+
toggleTextExpanded="show less of response"
116+
toggleTextCollapsed="show more of response"
117+
onToggle={onToggle}
118+
isExpanded={isExpanded}
119+
style={
120+
{
121+
'--pf-v6-c-expandable-section__content--Opacity': '1',
122+
'--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
123+
'--pf-v6-c-expandable-section__content--TranslateY': 0,
124+
'--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
125+
} as any
126+
}
127+
>
128+
Descriptive text about the tool response, including completion status, details on the data that
129+
was processed, or anything else relevant to the use case.
130+
</ExpandableSection>
131+
</DescriptionListDescription>
132+
</DescriptionListGroup>
133+
</DescriptionList>
134+
</>
135+
)
136+
}}
137+
/>
138+
<Message
139+
name="Bot"
140+
role="bot"
141+
avatar={patternflyAvatar}
142+
content="This message has a tool response that is collapsed by default:"
143+
toolResponse={{
144+
isDefaultExpanded: false,
145+
toggleContent: 'Tool response: toolName',
146+
subheading: 'Thought for 3 seconds',
147+
body: "Here's the summary for your toolName response:",
148+
cardTitle: (
149+
<Flex
150+
alignItems={{ default: 'alignItemsCenter' }}
151+
justifyContent={{ default: 'justifyContentSpaceBetween' }}
152+
>
153+
<FlexItem>
154+
<Flex direction={{ default: 'column' }} gap={{ default: 'gapXs' }}>
155+
<FlexItem grow={{ default: 'grow' }}>
156+
<Flex gap={{ default: 'gapXs' }}>
157+
<FlexItem>
158+
<WrenchIcon style={{ color: 'var(--pf-t--global--icon--color--brand--default' }} />
159+
</FlexItem>
160+
<FlexItem>toolName</FlexItem>
161+
</Flex>
162+
</FlexItem>
163+
<FlexItem>
164+
<Flex gap={{ default: 'gapSm' }} style={{ fontSize: '12px', fontWeight: '400' }}>
165+
<FlexItem>Execution time:</FlexItem>
166+
<FlexItem>0.12 seconds</FlexItem>
167+
</Flex>
168+
</FlexItem>
169+
</Flex>
170+
</FlexItem>
171+
<FlexItem>
172+
<Button
173+
variant="plain"
174+
aria-label="Copy tool response to clipboard"
175+
icon={<CopyIcon style={{ color: 'var(--pf-t--global--icon--color--subtle)' }} />}
176+
></Button>
177+
</FlexItem>
178+
</Flex>
179+
),
180+
cardBody: (
181+
<>
182+
<DescriptionList
183+
style={{ '--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)' } as any}
184+
aria-label="Tool response"
106185
>
107-
<DescriptionListTerm>Response</DescriptionListTerm>
108-
<DescriptionListDescription>
109-
<ExpandableSection
110-
variant={ExpandableSectionVariant.truncate}
111-
toggleTextExpanded="show less of response"
112-
toggleTextCollapsed="show more of response"
113-
onToggle={onToggle}
114-
isExpanded={isExpanded}
115-
style={
116-
{
117-
'--pf-v6-c-expandable-section__content--Opacity': '1',
118-
'--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
119-
'--pf-v6-c-expandable-section__content--TranslateY': 0,
120-
'--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
121-
} as any
122-
}
123-
>
124-
Descriptive text about the tool response, including completion status, details on the data that was
125-
processed, or anything else relevant to the use case.
126-
</ExpandableSection>
127-
</DescriptionListDescription>
128-
</DescriptionListGroup>
129-
</DescriptionList>
130-
</>
131-
)
132-
}}
133-
/>
186+
<DescriptionListGroup
187+
style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
188+
>
189+
<DescriptionListTerm>Parameters</DescriptionListTerm>
190+
<DescriptionListDescription>
191+
<Flex direction={{ default: 'column' }}>
192+
<FlexItem>Optional description text for parameters.</FlexItem>
193+
<FlexItem>
194+
<Flex gap={{ default: 'gapSm' }}>
195+
<FlexItem>
196+
<Label variant="outline" color="blue">
197+
type
198+
</Label>
199+
</FlexItem>
200+
<FlexItem>
201+
<Label variant="outline" color="blue">
202+
properties
203+
</Label>
204+
</FlexItem>
205+
<FlexItem>
206+
<Label variant="outline" color="blue">
207+
label
208+
</Label>
209+
</FlexItem>
210+
<FlexItem>
211+
<Label variant="outline" color="blue">
212+
label
213+
</Label>
214+
</FlexItem>
215+
</Flex>
216+
</FlexItem>
217+
</Flex>
218+
</DescriptionListDescription>
219+
</DescriptionListGroup>
220+
<DescriptionListGroup
221+
style={{ '--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)' } as any}
222+
>
223+
<DescriptionListTerm>Response</DescriptionListTerm>
224+
<DescriptionListDescription>
225+
<ExpandableSection
226+
variant={ExpandableSectionVariant.truncate}
227+
toggleTextExpanded="show less of response"
228+
toggleTextCollapsed="show more of response"
229+
onToggle={onToggle}
230+
isExpanded={isExpanded}
231+
style={
232+
{
233+
'--pf-v6-c-expandable-section__content--Opacity': '1',
234+
'--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
235+
'--pf-v6-c-expandable-section__content--TranslateY': 0,
236+
'--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
237+
} as any
238+
}
239+
>
240+
Descriptive text about the tool response, including completion status, details on the data that
241+
was processed, or anything else relevant to the use case.
242+
</ExpandableSection>
243+
</DescriptionListDescription>
244+
</DescriptionListGroup>
245+
</DescriptionList>
246+
</>
247+
)
248+
}}
249+
/>
250+
</>
134251
);
135252
};

0 commit comments

Comments
 (0)