feat: Qna recognizer

Composer/packages/client/__tests__/components/TestController/publish-luis-modal.test.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
-import { PublishLuisDialog } from '../../../src/components/TestController/publishDialog';
+import { PublishDialog } from '../../../src/components/TestController/publishDialog';
 import { projectIdState, botNameState, settingsState, dispatcherState } from '../../../src/recoilModel';
 import { renderWithRecoil } from '../../testUtils';
 jest.useFakeTimers();
@@ -18,8 +18,10 @@ const luisConfig = {
   defaultLanguage: 'en-us',
   environment: 'composer',
 };
-describe('<PublishLuisDialog />', () => {
-  it('should render the <PublishLuisDialog />', () => {
+const config = { subscriptionKey: '12345', ...luisConfig };
+const qnaConfig = { subscriptionKey: '12345', endpointKey: '12345' };
+describe('<PublishDialog />', () => {
+  it('should render the <PublishDialog />', () => {
     const onDismiss = jest.fn(() => {});
     const onPublish = jest.fn(() => {});
     const setSettingsMock = jest.fn(() => {});
@@ -31,16 +33,11 @@ describe('<PublishLuisDialog />', () => {
       set(botNameState, 'sampleBot0');
       set(settingsState, {
         luis: luisConfig,
+        qna: qnaConfig,
       });
     };
     const { getByText } = renderWithRecoil(
-      <PublishLuisDialog
-        isOpen
-        botName={'sampleBot0'}
-        config={luisConfig}
-        onDismiss={onDismiss}
-        onPublish={onPublish}
-      />,
+      <PublishDialog isOpen botName={'sampleBot0'} config={config} onDismiss={onDismiss} onPublish={onPublish} />,
       recoilInitState
     );
 

Composer/packages/client/__tests__/utils/luUtil.test.ts

@@ -3,13 +3,13 @@
 
 import { LuFile, DialogInfo, Diagnostic, DiagnosticSeverity } from '@bfc/shared';
 
-import { getReferredFiles, checkLuisPublish, createCrossTrainConfig } from '../../src/utils/luUtil';
+import { getReferredLuFiles, createCrossTrainConfig, checkLuisBuild } from '../../src/utils/luUtil';
 
-describe('getReferredFiles', () => {
+describe('getReferredLuFiles', () => {
   it('returns referred luFiles from dialog', () => {
     const dialogs = [{ luFile: 'a' }];
     const luFiles = [{ id: 'a.en-us' }, { id: 'b.en-us' }, { id: 'c.en-us' }];
-    const referred = getReferredFiles(luFiles as LuFile[], dialogs as DialogInfo[]);
+    const referred = getReferredLuFiles(luFiles as LuFile[], dialogs as DialogInfo[]);
     expect(referred.length).toEqual(1);
     expect(referred[0].id).toEqual('a.en-us');
   });
@@ -93,34 +93,27 @@ describe('getReferredFiles', () => {
     expect(config.triggerRules['dia1.en-us.lu']['dia4.en-us.lu']).toBeUndefined();
     expect(config.triggerRules['main.en-us.lu'].dialog_without_lu).toEqual('');
   });
+});
 
-  it('check the lu files before publish', () => {
-    const dialogs = [{ luFile: 'a' }] as DialogInfo[];
-    const diagnostics: Diagnostic[] = [];
-    const luFiles = [
-      { id: 'a.en-us', diagnostics, content: 'test', intents: [{ Name: '1', Body: '1' }], empty: false },
-      { id: 'b.en-us', diagnostics },
-      { id: 'c.en-us', diagnostics },
-    ] as LuFile[];
-    const referred = checkLuisPublish(luFiles, dialogs);
-    expect(referred.length).toEqual(1);
-
-    expect(referred[0].id).toEqual('a.en-us');
+it('check the lu files before publish', () => {
+  const dialogs = [{ luFile: 'a' }] as DialogInfo[];
+  const diagnostics: Diagnostic[] = [];
+  const luFiles = [
+    { id: 'a.en-us', diagnostics, content: 'test', intents: [{ Name: '1', Body: '1' }], empty: false },
+    { id: 'b.en-us', diagnostics },
+    { id: 'c.en-us', diagnostics },
+  ] as LuFile[];
+  const referred = checkLuisBuild(luFiles, dialogs);
+  expect(referred.length).toEqual(1);
 
-    luFiles[0].diagnostics = [{ message: 'wrong', severity: DiagnosticSeverity.Error }] as Diagnostic[];
-    expect(() => {
-      checkLuisPublish(luFiles, dialogs);
-    }).toThrowError(/wrong/);
+  expect(referred[0].id).toEqual('a.en-us');
 
-    luFiles[0].diagnostics = [];
-    luFiles[0].intents = [];
-    luFiles[0].empty = true;
-    expect(() => {
-      checkLuisPublish(luFiles, dialogs);
-    }).toThrowError('You have the following empty LuFile(s): a.en-us');
+  luFiles[0].diagnostics = [{ message: 'wrong', severity: DiagnosticSeverity.Error }] as Diagnostic[];
+  expect(() => {
+    checkLuisBuild(luFiles, dialogs);
+  }).toThrowError(/wrong/);
 
-    luFiles[0].empty = false;
+  luFiles[0].empty = false;
 
-    expect(checkLuisPublish(luFiles, dialogs)[0].id).toEqual('a.en-us');
-  });
+  expect(checkLuisBuild(luFiles, dialogs)[0].id).toEqual('a.en-us');
 });

Composer/packages/client/package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
+    "build": "node --max_old_space_size=4096 scripts/build.js",
     "clean": "rimraf build",
     "test": "jest",
     "lint": "eslint --quiet --ext .js,.jsx,.ts,.tsx ./src ./__tests__",
@@ -29,6 +29,7 @@
     "@bfc/ui-plugin-dialog-schema-editor": "*",
     "@bfc/ui-plugin-lg": "*",
     "@bfc/ui-plugin-luis": "*",
+    "@bfc/ui-plugin-cross-trained": "*",
     "@bfc/ui-plugin-prompts": "*",
     "@bfc/ui-plugin-select-dialog": "*",
     "@bfc/ui-plugin-select-skill-dialog": "*",

Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx

@@ -23,7 +23,7 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ProjectTemplate } from '@bfc/shared';
 import { NeutralColors } from '@uifabric/fluent-theme';
 
-import { DialogCreationCopy, EmptyBotTemplateId } from '../../constants';
+import { DialogCreationCopy, EmptyBotTemplateId, QnABotTemplateId } from '../../constants';
 import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 
 // -------------------- Styles -------------------- //
@@ -98,6 +98,7 @@ const content = css`
 
 const optionKeys = {
   createFromScratch: 'createFromScratch',
+  createFromQnA: 'createFromQnA',
   createFromTemplate: 'createFromTemplate',
 };
 
@@ -146,6 +147,10 @@ export function CreateOptions(props) {
       routeToTemplate = currentTemplate;
     }
 
+    if (option === optionKeys.createFromQnA) {
+      routeToTemplate = QnABotTemplateId;
+    }
+
     if (props.location && props.location.search) {
       routeToTemplate += props.location.search;
     }
@@ -233,6 +238,13 @@ export function CreateOptions(props) {
       text: formatMessage('Create from template'),
       onRenderField: SelectOption,
     },
+    {
+      ariaLabel: formatMessage('Create from QnA') + (option === optionKeys.createFromQnA ? ' selected' : ''),
+      key: optionKeys.createFromQnA,
+      'data-testid': 'Create from QnA',
+      text: formatMessage('Create from knowledge (QnA Maker)'),
+      onRenderField: SelectOption,
+    },
   ];
 
   return (

Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx

@@ -4,7 +4,7 @@
 // TODO: Remove path module
 import Path from 'path';
 
-import React, { useEffect, useRef, Fragment } from 'react';
+import React, { useEffect, useRef, Fragment, useState } from 'react';
 import { RouteComponentProps, Router, navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
 
@@ -16,8 +16,11 @@ import {
   templateProjectsState,
   storagesState,
   focusedStorageFolderState,
+  localeState,
 } from '../../recoilModel';
 import Home from '../../pages/home/Home';
+import ImportQnAFromUrlModal from '../../pages/qna/ImportQnAFromUrlModal';
+import { QnABotTemplateId } from '../../constants';
 
 import { CreateOptions } from './CreateOptions';
 import { OpenProject } from './OpenProject';
@@ -38,15 +41,18 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     updateCurrentPathForStorage,
     updateFolder,
     saveTemplateId,
+    importQnAFromUrl,
   } = useRecoilValue(dispatcherState);
   const creationFlowStatus = useRecoilValue(creationFlowStatusState);
   const projectId = useRecoilValue(projectIdState);
   const templateProjects = useRecoilValue(templateProjectsState);
   const storages = useRecoilValue(storagesState);
   const focusedStorageFolder = useRecoilValue(focusedStorageFolderState);
+  const locale = useRecoilValue(localeState);
   const currentStorageIndex = useRef(0);
   const storage = storages[currentStorageIndex.current];
   const currentStorageId = storage ? storage.id : 'default';
+  const [formData, setFormData] = useState({ name: '' });
 
   useEffect(() => {
     if (storages && storages.length) {
@@ -83,13 +89,32 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
   };
 
   const handleCreateNew = async (formData, templateId: string) => {
-    createProject(templateId || '', formData.name, formData.description, formData.location, formData.schemaUrl);
+    await createProject(templateId || '', formData.name, formData.description, formData.location, formData.schemaUrl);
   };
 
   const handleSaveAs = (formData) => {
     saveProjectAs(projectId, formData.name, formData.description, formData.location);
   };
 
+  const handleCreateQnA = async (urls: string[]) => {
+    saveTemplateId(QnABotTemplateId);
+    setCreationFlowStatus(CreationFlowStatus.CLOSE);
+    await handleCreateNew(formData, QnABotTemplateId);
+    for (let i = 0; i < urls.length; i++) {
+      if (!urls[i]) continue;
+      await importQnAFromUrl({ id: `${formData.name.toLocaleLowerCase()}.${locale}`, url: urls[i] });
+    }
+  };
+
+  const handleSubmitOrImportQnA = async (formData, templateId: string) => {
+    if (templateId === 'QnASample') {
+      setFormData(formData);
+      navigate(`./QnASample/importQnA`);
+      return;
+    }
+    handleSubmit(formData, templateId);
+  };
+
   const handleSubmit = async (formData, templateId: string) => {
     handleDismiss();
     switch (creationFlowStatus) {
@@ -99,7 +124,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
 
       default:
         saveTemplateId(templateId);
-        handleCreateNew(formData, templateId);
+        await handleCreateNew(formData, templateId);
     }
   };
 
@@ -119,7 +144,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
           updateFolder={updateFolder}
           onCurrentPathUpdate={updateCurrentPath}
           onDismiss={handleDismiss}
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmitOrImportQnA}
         />
         <CreateOptions path="create" templates={templateProjects} onDismiss={handleDismiss} onNext={handleCreateNext} />
         <DefineConversation
@@ -129,7 +154,7 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
           updateFolder={updateFolder}
           onCurrentPathUpdate={updateCurrentPath}
           onDismiss={handleDismiss}
-          onSubmit={handleSubmit}
+          onSubmit={handleSubmitOrImportQnA}
         />
         <OpenProject
           focusedStorageFolder={focusedStorageFolder}
@@ -138,6 +163,12 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
           onDismiss={handleDismiss}
           onOpen={openBot}
         />
+        <ImportQnAFromUrlModal
+          dialogId={formData.name.toLowerCase()}
+          path="create/QnASample/importQnA"
+          onDismiss={handleDismiss}
+          onSubmit={handleCreateQnA}
+        />
       </Router>
     </Fragment>
   );

Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx

@@ -14,7 +14,7 @@ import { RouteComponentProps } from '@reach/router';
 import querystring from 'query-string';
 import { FontWeights } from '@uifabric/styling';
 
-import { DialogCreationCopy, nameRegex } from '../../constants';
+import { DialogCreationCopy, QnABotTemplateId, nameRegex } from '../../constants';
 import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { StorageFolder } from '../../recoilModel/types';
@@ -259,7 +259,7 @@ const DefineConversation: React.FC<DefineConversationProps> = (props) => {
             <PrimaryButton
               data-testid="SubmitNewBotBtn"
               disabled={hasErrors || !writable}
-              text={formatMessage('OK')}
+              text={templateId === QnABotTemplateId ? formatMessage('Next') : formatMessage('OK')}
               onClick={handleSubmit}
             />
           </DialogFooter>

Composer/packages/client/src/components/LoadingSpinner.tsx

@@ -15,10 +15,15 @@ const container = css`
   justify-content: center;
 `;
 
-export const LoadingSpinner: React.FC = () => {
+interface LoadingSpinnerProps {
+  message?: string;
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = (props) => {
+  const { message } = props;
   return (
     <div css={container}>
-      <Spinner label={formatMessage('Loading')} />
+      <Spinner label={message || formatMessage('Loading')} />
     </div>
   );
 };

Composer/packages/client/src/components/NavItem.tsx

@@ -15,6 +15,7 @@ import { useRecoilValue } from 'recoil';
 import { useLocation, useRouterCache } from '../utils/hooks';
 import { dispatcherState } from '../recoilModel';
 
+import { QnAIcon } from './QnAIcon';
 // -------------------- Styles -------------------- //
 
 const link = (active: boolean, disabled: boolean) => css`
@@ -98,9 +99,12 @@ export const NavItem: React.FC<INavItemProps> = (props) => {
   const active = pathname.startsWith(to);
 
   const addRef = useCallback((ref) => onboardingAddCoachMarkRef({ [`nav${labelName.replace(' ', '')}`]: ref }), []);
-
-  const iconElement = <Icon iconName={iconName} styles={icon(active, disabled)} />;
-
+  const iconElement =
+    iconName === 'QnAIcon' ? (
+      <QnAIcon active={active} disabled={disabled} />
+    ) : (
+      <Icon iconName={iconName} styles={icon(active, disabled)} />
+    );
   const activeArea = (
     <div
       aria-disabled={disabled}
@@ -110,7 +114,11 @@ export const NavItem: React.FC<INavItemProps> = (props) => {
       tabIndex={-1}
     >
       {showTooltip ? (
-        <TooltipHost content={labelName} directionalHint={DirectionalHint.rightCenter}>
+        <TooltipHost
+          content={labelName}
+          directionalHint={DirectionalHint.rightCenter}
+          styles={{ root: { height: 32 } }}
+        >
           {iconElement}
         </TooltipHost>
       ) : (