LLM exception suggestion front end (#598)

<!-- Please provide brief information about the PR, what it contains &
its purpose, new behaviors after the change. And let us know here if you
need any help: https://github.com/microsoft/HydraLab/issues/new -->

## Description

<!-- A few words to explain your changes -->

### Linked GitHub issue ID: #  

## Pull Request Checklist
<!-- Put an x in the boxes that apply. This is simply a reminder of what
we are going to look for before merging your code. -->

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Code compiles correctly with all tests are passed.
- [ ] I've read the [contributing
guide](https://github.com/microsoft/HydraLab/blob/main/CONTRIBUTING.md#making-changes-to-the-code)
and followed the recommended practices.
- [ ] [Wikis](https://github.com/microsoft/HydraLab/wiki) or
[README](https://github.com/microsoft/HydraLab/blob/main/README.md) have
been reviewed and added / updated if needed (for bug fixes / features)

### Does this introduce a breaking change?
*If this introduces a breaking change for Hydra Lab users, please
describe the impact and migration path.*

- [ ] Yes
- [ ] No

## How you tested it
*Please make sure the change is tested, you can test it by adding UTs,
do local test and share the screenshots, etc.*


Please check the type of change your PR introduces:
- [ ] Bugfix
- [ ] Feature
- [ ] Technical design
- [ ] Build related changes
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Code style update (formatting, renaming) or Documentation content
changes
- [ ] Other (please describe): 

### Feature UI screenshots or Technical design diagrams
*If this is a relatively large or complex change, kick it off by drawing
the tech design with PlantUML and explaining why you chose the solution
you did and what alternatives you considered, etc...*

---------

Co-authored-by: dexterdreeeam <[email protected]>

Author: hydraxman

react/src/component/PropertyTable.jsx

@@ -71,7 +71,7 @@ export default class AdaptivePropertyTable extends React.Component {
                     <StyledTableRow key={key} >
                         <TableCell key={key} style={{ verticalAlign: 'top' }}><b>{key}</b></TableCell>
                         <TableCell colSpan={colSpan - 1} style={{ maxWidth: "640px" }}>
-                            {showedValueElement ? showedValueElement : value.toString()}
+                            { showedValueElement ? showedValueElement : value.toString() }
                         </TableCell>
                     </StyledTableRow>)
             } else {
@@ -105,14 +105,24 @@ export default class AdaptivePropertyTable extends React.Component {
             </TableHead>
         }
 
-        return <TableContainer component={Paper}>
-            <Table aria-label="simple table" size="small">
-                {titlePart}
-                <TableBody>
-                    {pList}
-                </TableBody>
-            </Table>
-        </TableContainer>
+        return <center>
+            <TableContainer component={Paper}>
+                <Table aria-label="simple table" size="small">
+                    {titlePart}
+                    <TableBody>
+                        {pList}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <table className="table table-borderless">
+                <tbody>
+                    <tr>
+                        <td align='center'>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </center>
     }
 
     componentDidMount() {

react/src/component/SearchView.jsx

@@ -199,15 +199,35 @@ export default class SearchView extends BaseView {
                         const vList = [res.data.content.videoBlobUrl + '?' + require('local-storage').get('FileToken')]
                         const info = res.data.content.videoTimeTagArr
                         const properties = []
+                        const suggestions = []
 
                         for (var k in details) {
                             if (k === "stream") {
                                 continue
                             }
-                            properties.push({ k: k, v: details[k] })
+                            if (k === "suggestion") {
+                                const obj = JSON.parse(details[k]);
+                                for (const [key, value] of Object.entries(obj)) {
+                                    suggestions.push({ k: key, v: value })
+                                }
+                            }
+                            else {
+                                properties.push({ k: k, v: details[k] })
+                            }
                         }
+
                         this.setState({
-                            infoDisplay: <center><VideoNavView videoInfo={info} videos={vList} />
+                            infoDisplay: <center>
+                                <VideoNavView videoInfo={info} videos={vList} />
+                                {
+                                    suggestions.length > 0 ?
+                                    <AdaptivePropertyTable properties={suggestions}
+                                        title='LLM Suggestions'
+                                        lineTextCount='1'
+                                        propertyValueProcessor={(key, value) => {
+                                            return <div>{value}</div>
+                                        }} /> : null
+                                }
                                 <AdaptivePropertyTable properties={properties}
                                     title='Test Case Details'
                                     propertyValueProcessor={(key, value) => {