Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2001 from botpress/f_debugger_ui
feat(emulator): Debugger summary UI
- Loading branch information
Showing
14 changed files
with
221 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 0 additions & 29 deletions
29
modules/extensions/src/views/lite/components/debugger/views/Decision.tsx
This file was deleted.
Oops, something went wrong.
52 changes: 52 additions & 0 deletions
52
modules/extensions/src/views/lite/components/debugger/views/Dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Colors, H4, H5, Icon, Position, Tooltip } from '@blueprintjs/core' | ||
| import * as sdk from 'botpress/sdk' | ||
| import React, { SFC } from 'react' | ||
|
|
||
| import style from '../style.scss' | ||
| import { formatConfidence } from '../utils' | ||
|
|
||
| interface Props { | ||
| suggestions: sdk.IO.Suggestion[] | ||
| decision: sdk.IO.Suggestion | ||
| } | ||
|
|
||
| const Decision: SFC<{ decision: sdk.IO.Suggestion }> = props => ( | ||
| <div className={style.subSection}> | ||
| <H5 color={Colors.DARK_GRAY5}>Decision</H5> | ||
| <div> | ||
| <strong>{props.decision.sourceDetails}</strong> | ||
| <Tooltip content={props.decision.decision.reason} position={Position.RIGHT}> | ||
| <Icon color={Colors.GRAY3} icon="info-sign" /> | ||
| </Tooltip> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| const Suggestions: SFC<{ suggestions: sdk.IO.Suggestion[] }> = props => ( | ||
| <div className={style.subSection}> | ||
| <H5 color={Colors.DARK_GRAY5}>Suggestions</H5> | ||
| <ul> | ||
| {props.suggestions.map(sugg => ( | ||
| <li key={sugg.source}> | ||
| {sugg.sourceDetails}: {formatConfidence(sugg.confidence)}% | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ) | ||
|
|
||
| const Dialog: SFC<Props> = props => { | ||
| if (!props.decision) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <div className={style.block}> | ||
| <H4>Dialog manager</H4> | ||
| <Decision decision={props.decision} /> | ||
| {props.suggestions && props.suggestions.length > 0 && <Suggestions suggestions={props.suggestions} />} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Dialog |
56 changes: 30 additions & 26 deletions
56
modules/extensions/src/views/lite/components/debugger/views/Entities.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,33 @@ | ||
| import { H5, Pre } from '@blueprintjs/core' | ||
| import React from 'react' | ||
| import { Colors, H5, HTMLTable } from '@blueprintjs/core' | ||
| import * as sdk from 'botpress/sdk' | ||
| import React, { SFC } from 'react' | ||
|
|
||
| import style from '../style.scss' | ||
|
|
||
| export const Entities = props => { | ||
| const { entities } = props.nlu | ||
| if (!entities || !entities.length) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <div className={style.block}> | ||
| <H5>Entities</H5> | ||
| <Pre> | ||
| <ul> | ||
| {entities.map(x => { | ||
| return ( | ||
| <li key={x.name}> | ||
| {x.name} ({x.type} | ||
| ): {x.data.value} | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| </Pre> | ||
| </div> | ||
| ) | ||
| } | ||
| export const Entities: SFC<{ entities: sdk.NLU.Entity[] }> = props => ( | ||
| <div className={style.subSection}> | ||
| <H5 color={Colors.DARK_GRAY5}>Entities</H5> | ||
| <HTMLTable condensed className={style.summaryTable}> | ||
| <thead> | ||
| <tr> | ||
| <th>Type</th> | ||
| <th>Source</th> | ||
| <th>Normalized value</th> | ||
| <th>Unit</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {props.entities.map(entity => ( | ||
| <tr> | ||
| <td> | ||
| @{entity.type}.{entity.name} | ||
| </td> | ||
| <td>{entity.meta.source}</td> | ||
| <td>{entity.data.value}</td> | ||
| <td>{entity.data.unit}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </HTMLTable> | ||
| </div> | ||
| ) |
32 changes: 17 additions & 15 deletions
32
modules/extensions/src/views/lite/components/debugger/views/Intents.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,30 @@ | ||
| import { H5, Pre } from '@blueprintjs/core' | ||
| import { Colors, H5 } from '@blueprintjs/core' | ||
| import React from 'react' | ||
|
|
||
| import style from '../style.scss' | ||
| import { formatConfidence } from '../utils' | ||
|
|
||
| export const Intents = props => { | ||
| const { intent, intents, includedContexts } = props.nlu | ||
| if (!intent || !intents) { | ||
| const { intent, intents } = props | ||
| if (!intent || !intents || !intents.length) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <div className={style.block}> | ||
| <H5>Intent</H5> | ||
| <small>Contexts: {(includedContexts || []).join(', ')}</small> | ||
| <Pre> | ||
| {intents.map(i => { | ||
| const content = `${formatConfidence(i.confidence)} % -${i.name}` | ||
| if (i.name === intent.name) { | ||
| return <strong>{content}</strong> | ||
| } | ||
| return <div>{content}</div> | ||
| })} | ||
| </Pre> | ||
| <div className={style.subSection}> | ||
| <H5 color={Colors.DARK_GRAY5}>Intents</H5> | ||
| {intents.length > 1 && ( | ||
| <ul> | ||
| {intents.map(i => { | ||
| let content: string | JSX.Element = `${i.name}: ${formatConfidence(i.confidence)} %` | ||
| if (i.name === intent.name) { | ||
| content = <strong>{content}</strong> | ||
| } | ||
| return <li>{content}</li> | ||
| })} | ||
| </ul> | ||
| )} | ||
| {intents.length === 1 && <strong>{`${intent.name}: ${formatConfidence(intent.confidence)} %`}</strong>} | ||
| </div> | ||
| ) | ||
| } |
23 changes: 23 additions & 0 deletions
23
modules/extensions/src/views/lite/components/debugger/views/NLU.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { H4 } from '@blueprintjs/core' | ||
| import * as sdk from 'botpress/sdk' | ||
| import _ from 'lodash' | ||
| import React, { SFC } from 'react' | ||
|
|
||
| import style from '../style.scss' | ||
|
|
||
| import { Entities } from './Entities' | ||
| import { Intents } from './Intents' | ||
| import { Slots } from './Slots' | ||
|
|
||
| const NLU: SFC<{ nluData: sdk.IO.EventUnderstanding }> = ({ nluData }) => { | ||
| return ( | ||
| <div className={style.block}> | ||
| <H4>Understanding</H4> | ||
| <Intents intents={nluData.intents} intent={nluData.intent} /> | ||
| {nluData.entities.length > 0 && <Entities entities={nluData.entities} />} | ||
| {nluData.slots && !_.isEmpty(nluData.slots) && <Slots slots={nluData.slots} />} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default NLU |
Oops, something went wrong.