Resizing the AI chat window

Resize the AI chat window based on your preferences. Adjust the width or height to expand the conversation view, focus on detailed responses, or optimize screen space without interrupting your workflow.

1. Depending on your product, access either the orderhub-code or callcenter-code folder.
2. Navigate to or create a shell-ui/assets directory.
3. Navigate to or create an app-bootstrap-config.json file in the shell-ui/assets directory.
   The as-shipped app-bootstrap-config.json file includes the following configuration.

   layout: {
     resizable: {
       width: false,       // Enable/disable width resizing
       height: false,      // Enable/disable height resizing
       minWidth: "40%",    // Minimum width when resized
       maxWidth: "90%",    // Maximum width when resized
       minHeight: "40%",   // Minimum height when resized
       maxHeight: "90%"    // Maximum height when resized
     }
   }

4. To resize the AI chat window, adjust the values in the app-bootstrap-config.json file.
   For example, enable the width and resize the height as follows.

   layout: {
     resizable: {
       width: true,
       height: true,
       minWidth: "40%",
       maxWidth: "90%",
       minHeight: "30%",
       maxHeight: "80%"
     }
   }

   Note: To support different user interface requirements, you can resize the width and height independently. For example, to increase the length of the chat view, adjust the height. Make sure that the minimum and maximum values are logically consistent, for example, the minHeight must be less than the maxHeight.
5. Save the file.
6. Validate that the AI chat window appears as you expect.