feat: enabled multiline text fields in LG Editor (microsoft#6209)

* feat: enabled multiline text fields in LG Editor

* Extract textFieldResizeMaxCharsThreshold to variable

* add new item on enter

* Removed debounce from string array enditor

* Focus text

* minor change

* small refactor

Composer/packages/lib/code-editor/src/lg/ModalityPivot.tsx

@@ -88,6 +88,7 @@ const renderModalityEditor = ({
   lgOption,
   lgTemplates,
   memoryVariables,
+  modalities,
   telemetryClient,
   editorSettings,
   onRemoveModality,
@@ -103,6 +104,7 @@ const renderModalityEditor = ({
   lgOption?: LGOption;
   lgTemplates?: readonly LgTemplate[];
   memoryVariables?: readonly string[];
+  modalities: ModalityType[];
   telemetryClient: TelemetryClient;
   editorSettings?: Partial<CodeEditorSettings>;
   onRemoveModality: (modality: ModalityType) => void;
@@ -152,7 +154,13 @@ const renderModalityEditor = ({
         />
       );
     case 'Text':
-      return <TextModalityEditor {...commonProps} response={structuredResponse?.Text as TextStructuredResponseItem} />;
+      return (
+        <TextModalityEditor
+          {...commonProps}
+          focusOnMount={modalities.length === 1 && modalities[0] === 'Text'}
+          response={structuredResponse?.Text as TextStructuredResponseItem}
+        />
+      );
   }
 };
 
@@ -391,6 +399,7 @@ export const ModalityPivot = React.memo((props: Props) => {
           lgOption,
           lgTemplates,
           memoryVariables,
+          modalities,
           telemetryClient,
           editorSettings,
           onRemoveModality,

Composer/packages/lib/code-editor/src/lg/hooks/useStringArray.ts

@@ -10,13 +10,14 @@ import { LGOption } from '../../utils/types';
 
 const getInitialItems = <T extends ArrayBasedStructuredResponseItem>(
   response: T,
-  lgTemplates?: readonly LgTemplate[]
+  lgTemplates?: readonly LgTemplate[],
+  focusOnMount?: boolean
 ): string[] => {
   const templateId = getTemplateId(response);
   const template = lgTemplates?.find(({ name }) => name === templateId);
   return response?.value && template?.body
     ? template?.body?.replace(/- /g, '').split(/\r?\n/g) || []
-    : response?.value || [];
+    : response?.value || (focusOnMount ? [''] : []);
 };
 
 export const useStringArray = <T extends ArrayBasedStructuredResponseItem>(
@@ -28,17 +29,18 @@ export const useStringArray = <T extends ArrayBasedStructuredResponseItem>(
     onUpdateResponseTemplate: (response: PartialStructuredResponse) => void;
   },
   options?: {
+    focusOnMount?: boolean;
     lgOption?: LGOption;
     lgTemplates?: readonly LgTemplate[];
   }
 ) => {
   const newTemplateNameSuffix = React.useMemo(() => kind.toLowerCase(), [kind]);
 
   const { onRemoveTemplate, onTemplateChange, onUpdateResponseTemplate } = callbacks;
-  const { lgOption, lgTemplates } = options || {};
+  const { lgOption, lgTemplates, focusOnMount } = options || {};
 
   const [templateId, setTemplateId] = React.useState(getTemplateId(structuredResponse));
-  const [items, setItems] = React.useState<string[]>(getInitialItems(structuredResponse, lgTemplates));
+  const [items, setItems] = React.useState<string[]>(getInitialItems(structuredResponse, lgTemplates, focusOnMount));
 
   const onChange = React.useCallback(
     (newItems: string[]) => {

Composer/packages/lib/code-editor/src/lg/modalityEditors/StringArrayEditor.tsx

@@ -4,7 +4,6 @@
 import { LgTemplate, TelemetryClient } from '@bfc/shared';
 import { FluentTheme } from '@uifabric/fluent-theme';
 import formatMessage from 'format-message';
-import debounce from 'lodash/debounce';
 import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
 import { ILinkStyles, Link } from 'office-ui-fabric-react/lib/Link';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -77,23 +76,16 @@ export const StringArrayEditor = React.memo(
   }: StringArrayEditorProps) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
 
-    const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+    const [currentIndex, setCurrentIndex] = useState<number | null>(items.length === 1 && items[0] === '' ? 0 : null);
     const [calloutTargetElement, setCalloutTargetElement] = useState<HTMLInputElement | null>(null);
 
-    const debouncedChange = React.useCallback(
-      debounce((items: string[], callback: (arr: string[]) => void) => {
-        callback(items);
-      }, 300),
-      []
-    );
-
     const onItemChange = useCallback(
       (index: number) => (_, newValue?: string) => {
         const updatedItems = [...items];
         updatedItems[index] = newValue ?? '';
-        debouncedChange(updatedItems, onChange);
+        onChange(updatedItems);
       },
-      [debouncedChange, items, onChange]
+      [items, onChange]
     );
 
     const onItemFocus = useCallback(
@@ -107,8 +99,12 @@ export const StringArrayEditor = React.memo(
       (index: number) => () => {
         const newItems = items.filter((_, idx) => idx !== index);
         onChange(newItems);
+
+        if (currentIndex) {
+          setCurrentIndex(newItems.length - 1);
+        }
       },
-      [items, onChange]
+      [currentIndex, items, onChange]
     );
 
     const onClickAddVariation = useCallback(() => {
@@ -124,10 +120,19 @@ export const StringArrayEditor = React.memo(
       const keydownHandler = (e: KeyboardEvent) => {
         if (submitKeys.includes(e.key)) {
           setCalloutTargetElement(null);
-          setCurrentIndex(null);
-          // Remove empty variations only if necessary
-          if (items.some((item) => !item)) {
-            onChange(items.filter(Boolean));
+
+          const filteredItems = items.filter(Boolean);
+
+          if (e.key === 'Enter') {
+            onChange([...filteredItems, '']);
+            setCurrentIndex(filteredItems.length);
+          } else {
+            setCurrentIndex(null);
+
+            // Remove empty variations only if necessary
+            if (items.length !== filteredItems.length) {
+              onChange(filteredItems);
+            }
           }
         }
       };

Composer/packages/lib/code-editor/src/lg/modalityEditors/StringArrayItem.tsx

@@ -38,7 +38,7 @@ const Input = styled(TextField)({
   padding: '8px 0 8px 4px',
   width: '100%',
   position: 'relative',
-  '& input': {
+  '& input, & textarea': {
     fontSize: FluentTheme.fonts.small.fontSize,
   },
   '& .ms-TextField-fieldGroup::after': {
@@ -89,6 +89,8 @@ const textFieldStyles = {
   },
 };
 
+const textFieldResizeMaxCharsThreshold = 25;
+
 type Props = {
   mode: 'edit' | 'view';
   editorMode?: 'single' | 'editor';
@@ -155,7 +157,7 @@ type TextFieldItemProps = Omit<Props, 'onRemove' | 'mode' | 'onFocus' | 'telemet
 const TextFieldItem = React.memo(({ value, onShowCallout, onChange }: TextFieldItemProps) => {
   const itemRef = useRef<ITextField | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
     itemRef.current?.focus();
@@ -196,6 +198,8 @@ const TextFieldItem = React.memo(({ value, onShowCallout, onChange }: TextFieldI
       <Input
         componentRef={(ref) => (itemRef.current = ref)}
         defaultValue={value}
+        multiline={value.length > textFieldResizeMaxCharsThreshold}
+        resizable={false}
         styles={textFieldStyles}
         onChange={onChange}
         onClick={click}

Composer/packages/lib/code-editor/src/lg/modalityEditors/TextModalityEditor.tsx

@@ -10,10 +10,11 @@ import { CommonModalityEditorProps, TextStructuredResponseItem } from '../types'
 import { ModalityEditorContainer } from './ModalityEditorContainer';
 import { StringArrayEditor } from './StringArrayEditor';
 
-type Props = CommonModalityEditorProps & { response: TextStructuredResponseItem };
+type Props = CommonModalityEditorProps & { focusOnMount: boolean; response: TextStructuredResponseItem };
 
 const TextModalityEditor = React.memo(
   ({
+    focusOnMount,
     response,
     removeModalityDisabled: disableRemoveModality,
     lgOption,
@@ -33,7 +34,7 @@ const TextModalityEditor = React.memo(
         onTemplateChange,
         onUpdateResponseTemplate,
       },
-      { lgOption, lgTemplates }
+      { lgOption, lgTemplates, focusOnMount }
     );
 
     return (