Skip to content

Commit 8b97e76

Browse files
NathanZlionNathanZlion
authored
chore: Add Screenshot area for prompt input (#4342)
1 parent 302fd0e commit 8b97e76

File tree

1 file changed

+86
-91
lines changed

1 file changed

+86
-91
lines changed

‎pages/prompt-input/simple.page.tsx‎

Lines changed: 86 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
import AppContext, { AppContextType } from '../app/app-context';
2020
import labels from '../app-layout/utils/labels';
2121
import { i18nStrings } from '../file-upload/shared';
22+
import ScreenshotArea from '../utils/screenshot-area';
2223

2324
const MAX_CHARS = 2000;
2425

@@ -28,7 +29,6 @@ type DemoContext = React.Context<
2829
isReadOnly: boolean;
2930
isInvalid: boolean;
3031
hasWarning: boolean;
31-
hasText: boolean;
3232
hasSecondaryContent: boolean;
3333
hasSecondaryActions: boolean;
3434
hasPrimaryActions: boolean;
@@ -50,7 +50,6 @@ export default function PromptInputPage() {
5050
isReadOnly,
5151
isInvalid,
5252
hasWarning,
53-
hasText,
5453
hasSecondaryActions,
5554
hasSecondaryContent,
5655
hasPrimaryActions,
@@ -63,19 +62,6 @@ export default function PromptInputPage() {
6362
{ label: 'Item 3', dismissLabel: 'Remove item 3', disabled: isDisabled },
6463
]);
6564

66-
useEffect(() => {
67-
if (hasText) {
68-
setTextareaValue(placeholderText);
69-
}
70-
}, [hasText]);
71-
72-
useEffect(() => {
73-
if (textareaValue !== placeholderText) {
74-
setUrlParams({ hasText: false });
75-
}
76-
// eslint-disable-next-line react-hooks/exhaustive-deps
77-
}, [textareaValue]);
78-
7965
useEffect(() => {
8066
if (items.length === 0) {
8167
ref.current?.focus();
@@ -164,7 +150,14 @@ export default function PromptInputPage() {
164150
Infinite max rows
165151
</Checkbox>
166152
</FormField>
167-
<button id="placeholder-text-button" onClick={() => setUrlParams({ hasText: true })}>
153+
<button
154+
id="placeholder-text-button"
155+
onClick={() => {
156+
if (textareaValue === '') {
157+
setTextareaValue(placeholderText);
158+
}
159+
}}
160+
>
168161
Fill with placeholder text
169162
</button>
170163

@@ -187,93 +180,95 @@ export default function PromptInputPage() {
187180
label={<span>User prompt</span>}
188181
i18nStrings={{ errorIconAriaLabel: 'Error' }}
189182
>
190-
<PromptInput
191-
data-testid="prompt-input"
192-
ariaLabel="Chat input"
193-
actionButtonIconName="send"
194-
actionButtonAriaLabel="Submit prompt"
195-
value={textareaValue}
196-
onChange={(event: any) => setTextareaValue(event.detail.value)}
197-
onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
198-
placeholder="Ask a question"
199-
maxRows={hasInfiniteMaxRows ? -1 : 4}
200-
disabled={isDisabled}
201-
readOnly={isReadOnly}
202-
invalid={isInvalid || textareaValue.length > MAX_CHARS}
203-
warning={hasWarning}
204-
ref={ref}
205-
disableSecondaryActionsPaddings={true}
206-
customPrimaryAction={
207-
hasPrimaryActions ? (
208-
<ButtonGroup
209-
variant="icon"
210-
items={[
211-
{
212-
type: 'icon-button',
213-
id: 'record',
214-
text: 'Record',
215-
iconName: 'microphone',
216-
disabled: isDisabled || isReadOnly,
217-
},
218-
{
219-
type: 'icon-button',
220-
id: 'submit',
221-
text: 'Submit',
222-
iconName: 'send',
223-
disabled: isDisabled || isReadOnly,
224-
},
225-
]}
226-
/>
227-
) : undefined
228-
}
229-
secondaryActions={
230-
hasSecondaryActions ? (
231-
<Box padding={{ left: 'xxs', top: 'xs' }}>
183+
<ScreenshotArea disableAnimations={true}>
184+
<PromptInput
185+
data-testid="prompt-input"
186+
ariaLabel="Chat input"
187+
actionButtonIconName="send"
188+
actionButtonAriaLabel="Submit prompt"
189+
value={textareaValue}
190+
onChange={(event: any) => setTextareaValue(event.detail.value)}
191+
onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
192+
placeholder="Ask a question"
193+
maxRows={hasInfiniteMaxRows ? -1 : 4}
194+
disabled={isDisabled}
195+
readOnly={isReadOnly}
196+
invalid={isInvalid || textareaValue.length > MAX_CHARS}
197+
warning={hasWarning}
198+
ref={ref}
199+
disableSecondaryActionsPaddings={true}
200+
customPrimaryAction={
201+
hasPrimaryActions ? (
232202
<ButtonGroup
233-
ref={buttonGroupRef}
234-
ariaLabel="Chat actions"
235-
onFilesChange={({ detail }) => detail.id.includes('files') && setFiles(detail.files)}
203+
variant="icon"
236204
items={[
237-
{
238-
type: 'icon-file-input',
239-
id: 'files',
240-
text: 'Upload files',
241-
multiple: true,
242-
},
243205
{
244206
type: 'icon-button',
245-
id: 'expand',
246-
iconName: 'expand',
247-
text: 'Go full page',
207+
id: 'record',
208+
text: 'Record',
209+
iconName: 'microphone',
248210
disabled: isDisabled || isReadOnly,
249211
},
250212
{
251213
type: 'icon-button',
252-
id: 'remove',
253-
iconName: 'remove',
254-
text: 'Remove',
214+
id: 'submit',
215+
text: 'Submit',
216+
iconName: 'send',
255217
disabled: isDisabled || isReadOnly,
256218
},
257219
]}
258-
variant="icon"
259220
/>
260-
</Box>
261-
) : undefined
262-
}
263-
secondaryContent={
264-
hasSecondaryContent && files.length > 0 ? (
265-
<FileTokenGroup
266-
items={files.map(file => ({
267-
file,
268-
}))}
269-
showFileThumbnail={true}
270-
onDismiss={onDismiss}
271-
i18nStrings={i18nStrings}
272-
alignment="horizontal"
273-
/>
274-
) : undefined
275-
}
276-
/>
221+
) : undefined
222+
}
223+
secondaryActions={
224+
hasSecondaryActions ? (
225+
<Box padding={{ left: 'xxs', top: 'xs' }}>
226+
<ButtonGroup
227+
ref={buttonGroupRef}
228+
ariaLabel="Chat actions"
229+
onFilesChange={({ detail }) => detail.id.includes('files') && setFiles(detail.files)}
230+
items={[
231+
{
232+
type: 'icon-file-input',
233+
id: 'files',
234+
text: 'Upload files',
235+
multiple: true,
236+
},
237+
{
238+
type: 'icon-button',
239+
id: 'expand',
240+
iconName: 'expand',
241+
text: 'Go full page',
242+
disabled: isDisabled || isReadOnly,
243+
},
244+
{
245+
type: 'icon-button',
246+
id: 'remove',
247+
iconName: 'remove',
248+
text: 'Remove',
249+
disabled: isDisabled || isReadOnly,
250+
},
251+
]}
252+
variant="icon"
253+
/>
254+
</Box>
255+
) : undefined
256+
}
257+
secondaryContent={
258+
hasSecondaryContent && files.length > 0 ? (
259+
<FileTokenGroup
260+
items={files.map(file => ({
261+
file,
262+
}))}
263+
showFileThumbnail={true}
264+
onDismiss={onDismiss}
265+
i18nStrings={i18nStrings}
266+
alignment="horizontal"
267+
/>
268+
) : undefined
269+
}
270+
/>
271+
</ScreenshotArea>
277272
</FormField>
278273
<div />
279274
</ColumnLayout>

0 commit comments

Comments
 (0)