Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Added inline lu to the PromptField in the FormEditor #2159

Merged
merged 2 commits into from
Mar 4, 2020
Merged

feat: Added inline lu to the PromptField in the FormEditor #2159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd5a7c2
feat: Added inline lu to prompts
tdurnford Mar 4, 2020
64b9095
Merge branch 'master' into feat/prompt-inline-lu
cwhitten Mar 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/UserInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ import { JSONSchema6 } from 'json-schema';
import { SDKTypes, MicrosoftInputDialog, ChoiceInput, ConfirmInput } from '@bfc/shared';

import { TextWidget, SelectWidget } from '../../widgets';
import { LuEditorWidget } from '../../widgets/LuEditorWidget';

import { field } from './styles';
import { GetSchema, PromptFieldChangeHandler } from './types';
import { ChoiceInputSettings } from './ChoiceInput';
import { ConfirmInputSettings } from './ConfirmInput';
import { DialogInfo } from '@bfc/indexers/lib/type';

const getOptions = (enumSchema: JSONSchema6) => {
if (!enumSchema || !enumSchema.enum || !Array.isArray(enumSchema.enum)) {
Expand All @@ -24,16 +26,28 @@ const getOptions = (enumSchema: JSONSchema6) => {
return enumSchema.enum.map(o => ({ label: o as string, value: o as string }));
};

const usesLuisRecognizer = ({ content }: DialogInfo) => {
return typeof content?.recognizer === 'string';
};

interface UserInputProps extends FieldProps<MicrosoftInputDialog> {
onChange: PromptFieldChangeHandler;
getSchema: GetSchema;
}

export const UserInput: React.FC<UserInputProps> = props => {
const { onChange, getSchema, idSchema, formData, errorSchema } = props;
const { formContext, onChange, getSchema, idSchema, formData, errorSchema } = props;
const { const: type } = getSchema('$type');
const [, promptType] = (type as string).split('.');
const intentName = `${promptType}.response-${formData?.$designer?.id}`;

return (
<Fragment>
{usesLuisRecognizer(formContext.currentDialog) && (
<div css={field}>
<LuEditorWidget name={intentName} formContext={formContext} />
</div>
)}
<div css={field}>
<TextWidget
onChange={onChange('property')}
Expand Down
53 changes: 18 additions & 35 deletions Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
/** @jsx jsx */
import { jsx } from '@emotion/core';
import React from 'react';
import { IdSchema } from '@bfcomposer/react-jsonschema-form';
import formatMessage from 'format-message';
import { Pivot, PivotLinkSize, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
import get from 'lodash/get';
Expand All @@ -13,7 +12,7 @@ import { PromptTab } from '@bfc/shared';
import { BaseField } from '../BaseField';
import { BFDFieldProps } from '../../types';

import { tabs, tabsContainer, settingsContainer } from './styles';
import { tabs } from './styles';
import { BotAsks } from './BotAsks';
import { UserInput } from './UserInput';
import { Other } from './Other';
Expand All @@ -23,7 +22,6 @@ import { GetSchema, PromptFieldChangeHandler } from './types';
export const PromptField: React.FC<BFDFieldProps> = props => {
const { formContext } = props;
const { shellApi, focusedTab, focusedSteps } = formContext;
const promptSettingsIdSchema = ({ __id: props.idSchema.__id + 'promptSettings' } as unknown) as IdSchema;

const getSchema: GetSchema = field => {
const fieldSchema = get(props.schema, ['properties', field]);
Expand All @@ -43,38 +41,23 @@ export const PromptField: React.FC<BFDFieldProps> = props => {

return (
<BaseField {...props}>
<div css={tabsContainer}>
<Pivot
linkSize={PivotLinkSize.large}
styles={tabs}
selectedKey={focusedTab || PromptTab.BOT_ASKS}
onLinkClick={handleTabChange}
>
<PivotItem headerText={formatMessage('Bot Asks')} itemKey={PromptTab.BOT_ASKS}>
<BotAsks {...props} onChange={updateField} getSchema={getSchema} />
</PivotItem>
<PivotItem headerText={formatMessage('User Input')} itemKey={PromptTab.USER_INPUT}>
<UserInput {...props} onChange={updateField} getSchema={getSchema} />
</PivotItem>
<PivotItem headerText={formatMessage('Other')} itemKey={PromptTab.OTHER}>
<Other {...props} onChange={updateField} getSchema={getSchema} />
</PivotItem>
</Pivot>
</div>

<div className="ObjectItem ObjectItemContainer" css={settingsContainer}>
<div className="ObjectItemField">
<BaseField
formContext={props.formContext}
formData={props.formData}
idSchema={promptSettingsIdSchema}
title={formatMessage('Prompt settings')}
schema={{}}
>
<PromptSettings {...props} onChange={updateField} getSchema={getSchema} />
</BaseField>
</div>
</div>
<Pivot
linkSize={PivotLinkSize.large}
styles={tabs}
selectedKey={focusedTab || PromptTab.BOT_ASKS}
onLinkClick={handleTabChange}
>
<PivotItem headerText={formatMessage('Bot Asks')} itemKey={PromptTab.BOT_ASKS}>
<BotAsks {...props} onChange={updateField} getSchema={getSchema} />
</PivotItem>
<PivotItem headerText={formatMessage('User Input')} itemKey={PromptTab.USER_INPUT}>
<UserInput {...props} onChange={updateField} getSchema={getSchema} />
</PivotItem>
<PivotItem headerText={formatMessage('Other')} itemKey={PromptTab.OTHER}>
<Other {...props} onChange={updateField} getSchema={getSchema} />
<PromptSettings {...props} onChange={updateField} getSchema={getSchema} />
</PivotItem>
</Pivot>
</BaseField>
);
};
4 changes: 0 additions & 4 deletions Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ export const tabs: Partial<IPivotStyles> = {
},
};

export const tabsContainer = css`
border-bottom: 1px solid #c8c6c4;
`;

export const validationItemInput = css`
display: flex;
align-items: center;
Expand Down
87 changes: 33 additions & 54 deletions Composer/packages/extensions/obiformeditor/src/Form/widgets/IntentWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import React from 'react';
import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import formatMessage from 'format-message';
import { RegexRecognizer } from '@bfc/shared';
import { DialogInfo } from '@bfc/indexers';

import { BFDWidgetProps } from '../types';
Expand All @@ -19,58 +18,35 @@ enum RecognizerType {
'luis',
}

function recognizerType(currentDialog: DialogInfo): RecognizerType | null {
const recognizer = currentDialog.content.recognizer;
if (!recognizer) {
return null;
}
function recognizerType({ content }: DialogInfo): RecognizerType | null {
const { recognizer } = content;

if (typeof recognizer === 'object' && recognizer.$type === 'Microsoft.RegexRecognizer') {
return RecognizerType.regex;
} else if (typeof recognizer === 'string') {
return RecognizerType.luis;
if (recognizer) {
if (typeof recognizer === 'object' && recognizer.$type === 'Microsoft.RegexRecognizer') {
return RecognizerType.regex;
} else if (typeof recognizer === 'string') {
return RecognizerType.luis;
}
}

return null;
}

function regexIntentOptions(currentDialog: DialogInfo): IDropdownOption[] {
const recognizer = currentDialog.content.recognizer as RegexRecognizer;
let options: IDropdownOption[] = [EMPTY_OPTION];

if (!recognizer) {
return options;
}

if (recognizer.intents) {
options = options.concat(recognizer.intents.map(i => ({ key: i.intent, text: i.intent })));
}

return options;
function regexIntentOptions({ content }: DialogInfo): IDropdownOption[] {
const { recognizer } = content;
return (recognizer?.intents || []).reduce(
(acc, { intent }) => (intent ? [...acc, { key: intent, text: intent }] : acc),
[EMPTY_OPTION]
);
}

export const IntentWidget: React.FC<BFDWidgetProps> = props => {
const { disabled, onChange, id, onFocus, onBlur, value, formContext, placeholder, label, schema } = props;
const { description } = schema;
const { currentDialog } = formContext;
let options: IDropdownOption[] = [];
let widgetLabel = label;
let isLuisSelected = false;

switch (recognizerType(currentDialog)) {
case RecognizerType.regex:
options = regexIntentOptions(currentDialog);
isLuisSelected = false;
break;
case RecognizerType.luis:
widgetLabel = `Trigger phrases(intent name: #${value || ''})`;
isLuisSelected = true;
break;
default:
options = [EMPTY_OPTION];
isLuisSelected = false;
break;
}
const type = recognizerType(currentDialog);
const options: IDropdownOption[] = type === RecognizerType.regex ? regexIntentOptions(currentDialog) : [EMPTY_OPTION];

const handleChange = (_e, option): void => {
if (option) {
Expand All @@ -80,21 +56,24 @@ export const IntentWidget: React.FC<BFDWidgetProps> = props => {

return (
<>
<WidgetLabel label={widgetLabel} description={description} id={id} />
{!isLuisSelected && (
<Dropdown
id={id.replace(/\.|#/g, '')}
onBlur={() => onBlur && onBlur(id, value)}
onChange={handleChange}
onFocus={() => onFocus && onFocus(id, value)}
options={options}
selectedKey={value || null}
responsiveMode={ResponsiveMode.large}
disabled={disabled || options.length === 1}
placeholder={options.length > 1 ? placeholder : formatMessage('No intents configured for this dialog')}
/>
{type === RecognizerType.luis ? (
<LuEditorWidget formContext={formContext} name={value} height={316} />
) : (
<>
<WidgetLabel label={label} description={description} id={id} />
<Dropdown
id={id}
onBlur={() => onBlur && onBlur(id, value)}
onChange={handleChange}
onFocus={() => onFocus && onFocus(id, value)}
options={options}
selectedKey={value || null}
responsiveMode={ResponsiveMode.large}
disabled={disabled || options.length === 1}
placeholder={options.length > 1 ? placeholder : formatMessage('No intents configured for this dialog')}
/>
</>
)}
{isLuisSelected && <LuEditorWidget formContext={formContext} onChange={onChange} name={value} height={316} />}
</>
);
};
68 changes: 38 additions & 30 deletions Composer/packages/extensions/obiformeditor/src/Form/widgets/LuEditorWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,20 @@
// Licensed under the MIT License.

import React from 'react';
import { LuEditor } from '@bfc/code-editor';
import debounce from 'lodash/debounce';
import { LuIntentSection } from '@bfc/shared';
import formatMessage from 'format-message';
import { LuEditor } from '@bfc/code-editor';
import { LuFile, filterSectionDiagnostics } from '@bfc/indexers';
import { LuIntentSection } from '@bfc/shared';

import { FormContext } from '../types';
import { WidgetLabel } from './WidgetLabel';

interface LuEditorWidgetProps {
formContext: FormContext;
name: string;
height?: number | string;
onChange: (template?: string) => void;
onChange?: (template?: string) => void;
}

export class LuEditorWidget extends React.Component<LuEditorWidgetProps> {
Expand All @@ -33,7 +35,7 @@ export class LuEditorWidget extends React.Component<LuEditorWidgetProps> {
formContext: FormContext;
name: string;
luFileId: string;
luFile: LuFile | null;
luFile?: LuFile;
luIntent: LuIntentSection;
state = { localValue: '' };
debounceUpdate;
Expand Down Expand Up @@ -64,44 +66,50 @@ export class LuEditorWidget extends React.Component<LuEditorWidgetProps> {
});
if (this.luFileId) {
if (body) {
this.updateLuIntent(body);
this.debounceUpdate(body);
} else {
this.formContext.shellApi.removeLuIntent(this.luFileId, this.name);
}
}
};

render() {
const diagnostic = this.luFile && filterSectionDiagnostics(this.luFile.diagnostics, this.luIntent)[0];
const { height = 250 } = this.props;
const { luFile, luFileId, luIntent, name } = this;
const diagnostic = luFile && filterSectionDiagnostics(luFile.diagnostics, luIntent)[0];

const errorMsg = diagnostic
? diagnostic.message.split('error message: ')[diagnostic.message.split('error message: ').length - 1]
: '';
const luOption = {
fileId: this.luFileId,
sectionId: this.luIntent?.Name,
};
const height = this.props.height || 250;

const label = formatMessage('Trigger phrases (intent: #{name})', { name });

return (
<LuEditor
onChange={this.onChange}
value={this.state.localValue}
errorMsg={errorMsg}
hidePlaceholder={true}
luOption={luOption}
options={{
lineNumbers: 'off',
minimap: {
enabled: false,
},
lineDecorationsWidth: 10,
lineNumbersMinChars: 0,
glyphMargin: false,
folding: false,
renderLineHighlight: 'none',
}}
height={height}
/>
<>
<WidgetLabel label={label} />
<LuEditor
onChange={this.onChange}
value={this.state.localValue}
errorMsg={errorMsg}
hidePlaceholder={true}
luOption={{
fileId: luFileId,
sectionId: luIntent?.Name,
}}
options={{
lineNumbers: 'off',
minimap: {
enabled: false,
},
lineDecorationsWidth: 10,
lineNumbersMinChars: 0,
glyphMargin: false,
folding: false,
renderLineHighlight: 'none',
}}
height={height}
/>
</>
);
}
}