new prompt UI

BotProject/CSharp/Schemas/sdk.schema

@@ -645,7 +645,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]
@@ -1033,7 +1033,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]
@@ -1410,7 +1410,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]
@@ -1814,7 +1814,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]
@@ -4333,7 +4333,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]
@@ -4572,7 +4572,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]
@@ -6885,7 +6885,7 @@
                     "type": "integer",
                     "title": "Max Turn Count",
                     "description": "The max retry count for this prompt.",
-                    "default": 2147483647,
+                    "default": 3,
                     "examples": [
                         3
                     ]

Composer/packages/extensions/obiformeditor/package.json

@@ -24,7 +24,8 @@
     "watch": "yarn build:ts --watch"
   },
   "dependencies": {
-    "@bfcomposer/react-jsonschema-form": "1.6.2",
+    "@bfcomposer/react-jsonschema-form": "1.6.5",
+    "@emotion/core": "^10.0.17",
     "@uifabric/fluent-theme": "7.1.4",
     "@uifabric/styling": "7.7.1",
     "classnames": "^2.2.6",
@@ -35,6 +36,7 @@
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.1",
     "lodash.omit": "^4.5.0",
+    "lodash.pick": "^4.4.0",
     "nanoid": "^2.0.1",
     "office-ui-fabric-react": "7.37.1",
     "react-error-boundary": "^1.2.5",
@@ -60,6 +62,7 @@
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.omit": "^4.5.6",
+    "@types/lodash.pick": "^4.4.6",
     "@types/lodash.startcase": "^4.4.6",
     "@types/nanoid": "^1.2.1",
     "@types/react": "16.9.0",

Composer/packages/extensions/obiformeditor/src/Form/FieldTemplate.tsx

@@ -13,5 +13,5 @@ export default function FieldTemplate(props: FieldTemplateProps) {
     return null;
   }
 
-  return <>{children}</>;
+  return <div className="FieldTemplate">{children}</div>;
 }

Composer/packages/extensions/obiformeditor/src/Form/fields/EditableField.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import { TextField, ITextFieldStyles, ITextFieldProps } from 'office-ui-fabric-react';
+import { NeutralColors } from '@uifabric/fluent-theme';
+import { mergeStyles } from '@uifabric/styling';
+
+interface EditableFieldProps extends ITextFieldProps {
+  onChange: (e: any, newTitle?: string) => void;
+  styleOverrides?: Partial<ITextFieldStyles>;
+  placeholder?: string;
+  fontSize?: string;
+}
+
+export const EditableField: React.FC<EditableFieldProps> = props => {
+  const { styleOverrides = {}, placeholder, fontSize, onChange, onBlur, value, ...rest } = props;
+  const [editing, setEditing] = useState<boolean>(false);
+  const [hasFocus, setHasFocus] = useState<boolean>(false);
+  const [localValue, setLocalValue] = useState<string | undefined>(value);
+  const [hasBeenEdited, setHasBeenEdited] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!hasBeenEdited) {
+      setLocalValue(value);
+    }
+  }, [value]);
+
+  const handleChange = (_e: any, newValue?: string) => {
+    setLocalValue(newValue);
+    setHasBeenEdited(true);
+    onChange(_e, newValue);
+  };
+
+  const handleCommit = (e: React.FocusEvent<HTMLInputElement>) => {
+    setHasFocus(false);
+    setEditing(false);
+    onBlur && onBlur(e);
+  };
+
+  let borderColor: string | undefined = undefined;
+
+  if (!editing) {
+    borderColor = localValue ? 'transparent' : NeutralColors.gray30;
+  }
+
+  return (
+    <div onMouseEnter={() => setEditing(true)} onMouseLeave={() => !hasFocus && setEditing(false)}>
+      <TextField
+        placeholder={placeholder || value}
+        value={localValue}
+        styles={{
+          root: mergeStyles({ margin: '5px 0 7px -9px' }, styleOverrides.root),
+          field: mergeStyles(
+            {
+              fontSize: fontSize,
+              selectors: {
+                '::placeholder': {
+                  fontSize: fontSize,
+                },
+              },
+            },
+            styleOverrides.field
+          ),
+          fieldGroup: mergeStyles(
+            {
+              borderColor,
+              transition: 'border-color 0.1s linear',
+              selectors: {
+                ':hover': {
+                  borderColor: hasFocus ? undefined : NeutralColors.gray30,
+                },
+              },
+            },
+            styleOverrides.fieldGroup
+          ),
+        }}
+        onBlur={handleCommit}
+        onFocus={() => setHasFocus(true)}
+        onChange={handleChange}
+        autoComplete="off"
+        {...rest}
+      />
+    </div>
+  );
+};

Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FieldProps } from '@bfcomposer/react-jsonschema-form';
+import formatMessage from 'format-message';
+
+import { TextareaWidget } from '../../widgets';
+
+import { GetSchema, PromptFieldChangeHandler } from './types';
+
+interface BotAsksProps extends FieldProps<MicrosoftInputDialog> {
+  onChange: PromptFieldChangeHandler;
+  getSchema: GetSchema;
+}
+
+export const BotAsks: React.FC<BotAsksProps> = props => {
+  const { onChange, getSchema, idSchema, formData, formContext } = props;
+
+  return (
+    <>
+      <TextareaWidget
+        onChange={onChange('prompt')}
+        schema={getSchema('prompt')}
+        id={idSchema.prompt.__id}
+        value={formData.prompt}
+        label={formatMessage('Prompt')}
+        formContext={formContext}
+      />
+    </>
+  );
+};

Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/ChoiceOptions.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import formatMessage from 'format-message';
+import { IdSchema } from '@bfcomposer/react-jsonschema-form';
+import { JSONSchema6 } from 'json-schema';
+import get from 'lodash.get';
+
+import { field } from '../styles';
+import { TextWidget, CheckboxWidget } from '../../../widgets';
+import { FormContext } from '../../../types';
+
+interface ChoiceOptionsProps {
+  idSchema: IdSchema;
+  schema: JSONSchema6;
+  formData: IChoiceOption;
+  onChange: (field: keyof IChoiceOption) => (data: any) => void;
+  formContext: FormContext;
+}
+
+export const ChoiceOptions: React.FC<ChoiceOptionsProps> = props => {
+  const { schema, formData, onChange, idSchema, formContext } = props;
+
+  const optionSchema = (field: keyof IChoiceOption): JSONSchema6 => {
+    return get(schema, ['properties', field]);
+  };
+
+  return (
+    <>
+      <div css={field}>
+        <TextWidget
+          onChange={onChange('inlineSeparator')}
+          schema={optionSchema('inlineSeparator')}
+          id={idSchema.inlineSeparator && idSchema.inlineSeparator.__id}
+          value={formData.inlineSeparator}
+          label={formatMessage('Inline separator')}
+          formContext={formContext}
+        />
+      </div>
+      <div css={field}>
+        <TextWidget
+          onChange={onChange('inlineOr')}
+          schema={optionSchema('inlineOr')}
+          id={idSchema.inlineOr && idSchema.inlineOr.__id}
+          value={formData.inlineOr}
+          label={formatMessage('Inline or')}
+          formContext={formContext}
+        />
+      </div>
+      <div css={field}>
+        <TextWidget
+          onChange={onChange('inlineOrMore')}
+          schema={optionSchema('inlineOrMore')}
+          id={idSchema.inlineOrMore && idSchema.inlineOrMore.__id}
+          value={formData.inlineOrMore}
+          label={formatMessage('Inline or more')}
+          formContext={formContext}
+        />
+      </div>
+      <div css={field}>
+        <CheckboxWidget
+          onChange={onChange('includeNumbers')}
+          schema={optionSchema('includeNumbers')}
+          id={idSchema.includeNumbers && idSchema.includeNumbers.__id}
+          value={formData.includeNumbers}
+          label={formatMessage('Include numbers')}
+          formContext={formContext}
+        />
+      </div>
+    </>
+  );
+};