Understanding Mockup UI

When a user open the Mockup feature in Copilot4DevOps, the interface displays two main tabs and a History Panel to access previously generated diagrams while the user is on any of the tabs:

1. Prompt Tab: The Prompt tab is where you set up your inputs and references before generating a mockup. 

2. Result Tab: The Result tab shows the mockup that is generated based on your input.

Prompt Tab

By default, the Prompt tab is active when you launch the feature.

• This tab is divided into two panels:

Left panel – your Prompt Area
Right panel – your Work Item Reference area

Using the Left Panel (Prompt Area)

The left panel is where you craft and refine your prompt.
• Enter your detailed instructions for the mockup you want to generate. Be clear and descriptive about what you expect.

Rewrite a Prompt

• If you want to refine your existing prompt and make it more result-oriented, click Rewrite Prompt. This feature refines and rewrites your prompt automatically to make it more effective and precise.

Upload a File

 The "Upload File(s)" feature allows users to attach relevant files that serve as contextual reference material to generate more accurate and tailored Mockup outputs. Click on the Upload File(s) option.

Steps to Upload a File

• Click on the "Upload File(s)" option, found next to the "Rewrite Prompt" button

• A popup window will appear titled Upload File.

• Browse and select the desired file(s) from your device (only supported file types are allowed).
• Once uploaded, the file name will appear in the list within the popup.

• After uploading your file(s), click the "Upload" button to close the popup.

• All uploaded files will now be visibly listed below the "Rewrite Prompt" and "Upload File(s)" buttons, clearly indicating the files attached to the current session.

Note: supported file types, ".xls",".xlsx",".csv",".docx",".xml",".json",".pdf",".txt",".png",".jpg",".webp",".gif",".CSS",".HTML""JS".

• If a file was uploaded by mistake, it can be removed by clicking the "X" (cross) icon next to the file name.

Using the Right Panel (Work Item Reference)

The Right Panel is where you select the work items that you want to use as references for the mockup.

1. By default, the work item you initially selected to open the Mockup feature is pre-selected here.

2. You can also select multiple work items as references by clicking the Select Work Items option.

a.  In the Right Panel, click on the Select Work Items option.

b.  A pop-up window will appear with options to add work items.

c.  In the pop-up window, you have two methods for adding work items:

• Query: Choose the option to add work items via a Query if you already have a predefined query or need to search for work items based on specific criteria.

• Work Item(s): If you prefer to add specific work items, use the Work Item(s) option. With this option you can also search for an specific work time by ID or Title.

d. After selecting the work items, click the OK button to add them to your mockup reference list.

3. Below the work items section on the Right Panel, you will find the Fields option.

4. By default, the following fields are pre-selected:
•    ID
•    Title
•    Work Item Type

5. You can select additional fields by choosing the corresponding options, depending on the data you want to include in your mockup.

History of Mockups

The History Panel (the left side bar) is a shared component across the Prompt and Result tabs. It contains a user’s complete generation history of Mockups and provides controls to create, find, manage, and share Mockups.

Step-by-step User Flow

1. Opening / and closing the History Panel.

• Click the Close option to slide out the History Panel.

• Clicking on the Copilot4DevOps icon, the History Panel reopens. 

2. New Mockup Option

• The New Mockup Option allows the user to initiate a new mockup generation from any given point. 

3. Search Option

• The Search option opens up a popup for the user to search their generated mockup. Results filter live as you type.

3. Filtering the Mockup List

• All: Shows all the Mockups within the selected tab.
• Recently Created: Shows the newest first.
• Recently Updated: Show Mockups most recently edited or regenerated.

4. Ellipsis Menu

• Each listed mockup shows a small three-dot (⋯) control. Click it to reveal actions:

Rename — Users can use this option to rename a mockup

Delete — This will permanently delete the mockup.

5.  Mockups 

• The Mockups section lists all the Mockups created by the user.

• Note: Mockups older than 30 days are moved into the Old Mockups subsection at the bottom of the list.

Result Tab

• When the user moves to the Results tab, there are three specific panels or areas:

a. Chat with Mockup (the right panel)

b. Generated Mockup (the center panel)

c. Mockup Pages (the left panel)

Chat with Mockup

With the Chat with Mockup option users can:

• Examine the existing mockup, understand its layout, and regenerate it with updated screens, components, or design elements.

• Quickly enhance the page by adding new UI components, interactions, or linking existing elements.

• Rename components, adjust placements, swaps visuals, or refine styling on the page as needed. 

Generated Mockup (Center Panel)

• The generated mockup will be displayed in the Result Tab based on your inputs.

Mockup Pages (Right Panel)

Mockup Page right panel on the right defines and enlists the Mockup Pages. The Mockup Pages panel is expandable, and you can also hide it to allow more space to the generated mockup. 

• From this panel, users can generate all the pages at once, add a page, and remove a page. 

Note: Individual pages can be generated by clicking on them. The first page cannot be removed.

Modifying a Mockup / Making Changes to a Mockup

• When a mockup has been generated, users have the ease of making changes to the mockup and modifying it as per their requirement. They can make the changes overall as well as to specific components and texts. 

• When the user opts to edit a component and clicks on it, it is automatically referenced in the Chat with Mockup awaiting your instructions for modification.

• Enter the instructions to edit the component as per your requirement.

• Changes have now been made to the specific component.  

• Similarly, to edit a text, the user can click on the Edit Text option in the center panel and edit the text directly.