fix: Remove unncessary url changes and hasText from appcontext

Author: NathanZlion

pages/prompt-input/simple.page.tsx

@@ -19,7 +19,6 @@ import {
 import AppContext, { AppContextType } from '../app/app-context';
 import labels from '../app-layout/utils/labels';
 import { i18nStrings } from '../file-upload/shared';
-import ScreenshotArea from '../utils/screenshot-area';
 
 const MAX_CHARS = 2000;
 
@@ -29,7 +28,6 @@ type DemoContext = React.Context<
     isReadOnly: boolean;
     isInvalid: boolean;
     hasWarning: boolean;
-    hasText: boolean;
     hasSecondaryContent: boolean;
     hasSecondaryActions: boolean;
     hasPrimaryActions: boolean;
@@ -51,7 +49,6 @@ export default function PromptInputPage() {
     isReadOnly,
     isInvalid,
     hasWarning,
-    hasText,
     hasSecondaryActions,
     hasSecondaryContent,
     hasPrimaryActions,
@@ -64,19 +61,6 @@ export default function PromptInputPage() {
     { label: 'Item 3', dismissLabel: 'Remove item 3', disabled: isDisabled },
   ]);
 
-  useEffect(() => {
-    if (hasText) {
-      setTextareaValue(placeholderText);
-    }
-  }, [hasText]);
-
-  useEffect(() => {
-    if (hasText && textareaValue !== placeholderText) {
-      setUrlParams({ hasText: false });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [textareaValue]);
-
   useEffect(() => {
     if (items.length === 0) {
       ref.current?.focus();
@@ -165,7 +149,14 @@ export default function PromptInputPage() {
                 Infinite max rows
               </Checkbox>
             </FormField>
-            <button id="placeholder-text-button" onClick={() => setUrlParams({ hasText: true })}>
+            <button
+              id="placeholder-text-button"
+              onClick={() => {
+                if (textareaValue === '') {
+                  setTextareaValue(placeholderText);
+                }
+              }}
+            >
               Fill with placeholder text
             </button>
 
@@ -188,95 +179,93 @@ export default function PromptInputPage() {
                 label={<span>User prompt</span>}
                 i18nStrings={{ errorIconAriaLabel: 'Error' }}
               >
-                <ScreenshotArea disableAnimations={true}>
-                  <PromptInput
-                    data-testid="prompt-input"
-                    ariaLabel="Chat input"
-                    actionButtonIconName="send"
-                    actionButtonAriaLabel="Submit prompt"
-                    value={textareaValue}
-                    onChange={(event: any) => setTextareaValue(event.detail.value)}
-                    onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
-                    placeholder="Ask a question"
-                    maxRows={hasInfiniteMaxRows ? -1 : 4}
-                    disabled={isDisabled}
-                    readOnly={isReadOnly}
-                    invalid={isInvalid || textareaValue.length > MAX_CHARS}
-                    warning={hasWarning}
-                    ref={ref}
-                    disableSecondaryActionsPaddings={true}
-                    customPrimaryAction={
-                      hasPrimaryActions ? (
+                <PromptInput
+                  data-testid="prompt-input"
+                  ariaLabel="Chat input"
+                  actionButtonIconName="send"
+                  actionButtonAriaLabel="Submit prompt"
+                  value={textareaValue}
+                  onChange={(event: any) => setTextareaValue(event.detail.value)}
+                  onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
+                  placeholder="Ask a question"
+                  maxRows={hasInfiniteMaxRows ? -1 : 4}
+                  disabled={isDisabled}
+                  readOnly={isReadOnly}
+                  invalid={isInvalid || textareaValue.length > MAX_CHARS}
+                  warning={hasWarning}
+                  ref={ref}
+                  disableSecondaryActionsPaddings={true}
+                  customPrimaryAction={
+                    hasPrimaryActions ? (
+                      <ButtonGroup
+                        variant="icon"
+                        items={[
+                          {
+                            type: 'icon-button',
+                            id: 'record',
+                            text: 'Record',
+                            iconName: 'microphone',
+                            disabled: isDisabled || isReadOnly,
+                          },
+                          {
+                            type: 'icon-button',
+                            id: 'submit',
+                            text: 'Submit',
+                            iconName: 'send',
+                            disabled: isDisabled || isReadOnly,
+                          },
+                        ]}
+                      />
+                    ) : undefined
+                  }
+                  secondaryActions={
+                    hasSecondaryActions ? (
+                      <Box padding={{ left: 'xxs', top: 'xs' }}>
                         <ButtonGroup
-                          variant="icon"
+                          ref={buttonGroupRef}
+                          ariaLabel="Chat actions"
+                          onFilesChange={({ detail }) => detail.id.includes('files') && setFiles(detail.files)}
                           items={[
+                            {
+                              type: 'icon-file-input',
+                              id: 'files',
+                              text: 'Upload files',
+                              multiple: true,
+                            },
                             {
                               type: 'icon-button',
-                              id: 'record',
-                              text: 'Record',
-                              iconName: 'microphone',
+                              id: 'expand',
+                              iconName: 'expand',
+                              text: 'Go full page',
                               disabled: isDisabled || isReadOnly,
                             },
                             {
                               type: 'icon-button',
-                              id: 'submit',
-                              text: 'Submit',
-                              iconName: 'send',
+                              id: 'remove',
+                              iconName: 'remove',
+                              text: 'Remove',
                               disabled: isDisabled || isReadOnly,
                             },
                           ]}
+                          variant="icon"
                         />
-                      ) : undefined
-                    }
-                    secondaryActions={
-                      hasSecondaryActions ? (
-                        <Box padding={{ left: 'xxs', top: 'xs' }}>
-                          <ButtonGroup
-                            ref={buttonGroupRef}
-                            ariaLabel="Chat actions"
-                            onFilesChange={({ detail }) => detail.id.includes('files') && setFiles(detail.files)}
-                            items={[
-                              {
-                                type: 'icon-file-input',
-                                id: 'files',
-                                text: 'Upload files',
-                                multiple: true,
-                              },
-                              {
-                                type: 'icon-button',
-                                id: 'expand',
-                                iconName: 'expand',
-                                text: 'Go full page',
-                                disabled: isDisabled || isReadOnly,
-                              },
-                              {
-                                type: 'icon-button',
-                                id: 'remove',
-                                iconName: 'remove',
-                                text: 'Remove',
-                                disabled: isDisabled || isReadOnly,
-                              },
-                            ]}
-                            variant="icon"
-                          />
-                        </Box>
-                      ) : undefined
-                    }
-                    secondaryContent={
-                      hasSecondaryContent && files.length > 0 ? (
-                        <FileTokenGroup
-                          items={files.map(file => ({
-                            file,
-                          }))}
-                          showFileThumbnail={true}
-                          onDismiss={onDismiss}
-                          i18nStrings={i18nStrings}
-                          alignment="horizontal"
-                        />
-                      ) : undefined
-                    }
-                  />
-                </ScreenshotArea>
+                      </Box>
+                    ) : undefined
+                  }
+                  secondaryContent={
+                    hasSecondaryContent && files.length > 0 ? (
+                      <FileTokenGroup
+                        items={files.map(file => ({
+                          file,
+                        }))}
+                        showFileThumbnail={true}
+                        onDismiss={onDismiss}
+                        i18nStrings={i18nStrings}
+                        alignment="horizontal"
+                      />
+                    ) : undefined
+                  }
+                />
               </FormField>
               <div />
             </ColumnLayout>