Popup acknowledgement

[donsur]

I would like to add acceptable use policy in a popup acknowledgement. Where should I start? I am kind of new to React JS.

[nkidambi]

Hi, I did an AI use Disclaimer for a customer. Users must click "continue" button to proceed. If the user clicks 'cance', they will be redirected to home page. This is what I did. It can be done in better ways. Hope this helps.

In file Chat.tsx

1. Below the "stop generating" added the below block
   `<Dialog
   /*
   This is the diclaimer dialog. It is shown when the user first enters the chatbot.
   */
   hidden={disclaimerDialogState}
   onDismiss={()=>{}}

                        styles={{
                
                            main: [{
                                selectors: {
                                  ['@media (min-width: 800px)']: {
                                    maxWidth: '800px',
                                    background: "#FFFFFF",
                                    boxShadow: "0px 14px 28.8px rgba(0, 0, 0, 0.24), 0px 0px 8px rgba(0, 0, 0, 0.2)",
                                    borderRadius: "8px",                                        
                                    minHeight: '800px',
                                  }
                                }
                              }]
                        }}
                    >
                        <Stack horizontal verticalAlign="center">
                            <img
                                src={ui?.logo ? ui.logo : Contoso}
                                className={styles.headerIcon}
                                aria-title={ui?.title}
                                alt={ui?.title}
                            />
                             
                            <h1 className={styles.headerTitle}>{ui?.chat_title}</h1>{ui?.show_beta_title && (
                                <sup className={styles.disclaimerBeta}>{ui?.beta_title}</sup>
                            )} 
   
                            {/* {ui?.show_beta_title && (
                                <h3 className={styles.headerBeta}>{ui?.beta_title}</h3>
                            )} */}
                            {/* <IconButton
                                className={styles.cancel}
                                iconProps={{ iconName: 'Cancel' }}
                                ariaLabel="Dismiss"
                                title="Dismiss"
                                onClick={()=>onDisclaimerCancelClicked()}/> */}
                        </Stack>
                        <Stack>
                             <div className={YOUR CLASS NAME}>
                                ADD YOUR TEXT HERE
                             </div>
                        </Stack>
                        <Stack horizontal verticalAlign="center" className={styles.buttonContainer}>
                            <DefaultButton ariaLabel="YOUR ARIA LABEL" title="YOUR TOOL TIP TEXT" className ={styles.disabled} onClick={()=>onDisclaimerCancelClicked()}>Cancel</DefaultButton>
                            <DefaultButton  ariaLabel="YOUR ARIA LABEL" title="YOUR TOOL TIP TEXT" className ={styles.standard} onClick={()=>onDisclaimerContinueClicked()} >Continue</DefaultButton>
                        </Stack>
                    </Dialog>`
   

2, Then in the same file, add the following commands for the buttons
`
const onDisclaimerContinueClicked=()=>{

    setDisclaimerDialogState(true);
}
const onDisclaimerCancelClicked=()=>{ 
    window.location.href = 'URL';
}

`

3. Add the following code at the top of the file after all const declarations const [disclaimerDialogState, setDisclaimerDialogState] = useState<boolean>(false);

4. in file chat.module.css, add the appropriate styles.

[0009fe3]

You can also consider to use Conditional Access Terms of use, if you use the app internally