Merge pull request #2132 from botpress/fl_debugger_remove__qna__

feat(debugger): remove __qna__ identifier + make UI more homogeneous
botpress · Jul 18, 2019 · 9e6c12a · 9e6c12a
2 parents ccefa76 + 2ecbfb4
commit 9e6c12a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/modules/extensions/src/views/lite/components/debugger/components/Intent.tsx b/modules/extensions/src/views/lite/components/debugger/components/Intent.tsx
@@ -1,30 +1,35 @@
-import _ from 'lodash'
-import React from 'react'
+import { Intent as BpIntent, Tag } from '@blueprintjs/core'
+import React, { Fragment } from 'react'
 
 import { formatConfidence } from '../utils'
 
 const QNA_IDENTIFIER = '__qna__'
 
-export interface IntentDef {
-  name: string
-  confidence: number
-}
+export const Intent = (props: { name: string; confidence?: number; elected?: boolean }) => {
+  const { name, elected, confidence } = props
+  const isQnA = name.startsWith(QNA_IDENTIFIER)
 
-export const Intent = (props: { intent: IntentDef; elected: boolean }) => {
-  const { intent, elected } = props
-  const isQnA = intent.name.startsWith(QNA_IDENTIFIER)
+  const displayName = isQnA ? formatQnaName(name) : name
+
+  const textContent: string = confidence ? `${displayName}: ${formatConfidence(confidence)} %` : displayName
+  const content = elected ? <strong>{textContent}</strong> : <span>{textContent}</span>
 
-  let content: string | JSX.Element = `${intent.name}: ${formatConfidence(intent.confidence)} %`
-  if (elected) {
-    content = <strong>{content}</strong>
-  }
   return (
-    <li>
-      <a onClick={navigateToIntentDefinition(intent.name, isQnA)}>{content}</a>
-    </li>
+    <Fragment>
+      <Tag intent={isQnA ? BpIntent.SUCCESS : BpIntent.PRIMARY} minimal>
+        {isQnA ? 'Q&A' : 'NLU'}
+      </Tag>
+      &nbsp;
+      <a onClick={navigateToIntentDefinition(name, isQnA)}>{content}</a>
+    </Fragment>
   )
 }
 
+function formatQnaName(name: string): string {
+  name = name.replace(QNA_IDENTIFIER, '')
+  return name.substr(name.indexOf('_') + 1)
+}
+
 const navigateToIntentDefinition = (intent: string, isQna: boolean) => () => {
   intent = isQna ? intent.replace(QNA_IDENTIFIER, '') : intent
   let url

diff --git a/modules/extensions/src/views/lite/components/debugger/components/Intents.tsx b/modules/extensions/src/views/lite/components/debugger/components/Intents.tsx
@@ -4,7 +4,12 @@ import React from 'react'
 
 import style from '../style.scss'
 
-import { Intent, IntentDef } from './Intent'
+import { Intent } from './Intent'
+
+interface IntentDef {
+  name: string
+  confidence: number
+}
 
 interface Props {
   intent: IntentDef
@@ -23,11 +28,13 @@ export const Intents = (props: Props) => {
       {intents.length > 1 && (
         <ul>
           {intents.map(i => (
-            <Intent intent={i} elected={i.name === intent.name} />
+            <li key={i.name}>
+              <Intent name={i.name} confidence={i.confidence} elected={i.name === intent.name} />
+            </li>
           ))}
         </ul>
       )}
-      {intents.length === 1 && <Intent intent={intent} elected={true} />}
+      {intents.length === 1 && <Intent name={intent.name} confidence={intent.confidence} elected />}
     </div>
   )
 }
diff --git a/modules/extensions/src/views/lite/components/debugger/views/Dialog.tsx b/modules/extensions/src/views/lite/components/debugger/views/Dialog.tsx
@@ -15,8 +15,9 @@ interface Props {
 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>&nbsp;
+    <div style={{ display: 'flex' }}>
+      <Intent name={props.decision.sourceDetails} />
+      &nbsp;
       <Tooltip content={props.decision.decision.reason} position={Position.RIGHT}>
         <Icon color={Colors.GRAY3} icon="info-sign" />
       </Tooltip>
@@ -29,7 +30,9 @@ const Suggestions: SFC<{ suggestions: sdk.IO.Suggestion[] }> = props => (
     <H5 color={Colors.DARK_GRAY5}>Suggestions</H5>
     <ul>
       {props.suggestions.map(sugg => (
-        <Intent intent={{ name: sugg.sourceDetails, confidence: sugg.confidence }} elected={false} />
+        <li key={sugg.sourceDetails}>
+          <Intent name={sugg.sourceDetails} confidence={sugg.confidence} />
+        </li>
       ))}
     </ul>
   </div>