feat: LSDV-5242: TextArea Suggestions for LLM labeling (#1438)

* feat: LSDV-5242: MVP for dynamic LLM chat

* Add "requesting" flag to main container during fetch

* Add comments

* Fix input height, increasing on every key press

* Fix textarea regions `notifyFinishedDrawing` for continuous flow

* Cleanup

* More cleanup

* Fix area access in TextArea `onChange` handler

* Fix textarea `onChange`

* Fix region deletion with `onChange`

---------

Co-authored-by: hlomzik <hlomzik@users.noreply.github.com>
Co-authored-by: Nick Skriabin <nr@fenelon.ru>

Author: hlomzik

src/common/TextArea/TextArea.tsx

@@ -1,4 +1,4 @@
-import { FC, MutableRefObject, RefObject, useCallback, useEffect, useRef } from 'react';
+import { FC, FocusEvent, MutableRefObject, RefObject, useCallback, useEffect, useRef } from 'react';
 import { debounce } from 'lodash';
 import { cn } from '../../utils/bem';
 import { isMacOS } from '../../utils/utilities';
@@ -156,6 +156,13 @@ export const TextArea: FC<TextAreaProps> = ({
 
 
   return (
-    <textarea ref={mergeRefs(textAreaRef, ref)} className={classList} rows={autoGrowRef.current.rows} onChange={onChange} onInput={onInput} {...props}></textarea>
+    <textarea
+      ref={mergeRefs(textAreaRef, ref)}
+      className={classList}
+      rows={autoGrowRef.current.rows}
+      onChange={onChange}
+      onInput={onInput}
+      {...props}
+    />
   );
 };

src/components/App/App.js

@@ -208,8 +208,9 @@ class App extends Component {
 
     const viewingAll = as.viewingAllAnnotations || as.viewingAllPredictions;
 
+    // tags can be styled in config when user is awaiting for suggestions from ML backend
     const mainContent = (
-      <Block name="main-content">
+      <Block name="main-content" mix={store.awaitingSuggestions ? ['requesting'] : []}>
         {as.validation === null
           ? this._renderUI(as.selectedHistory?.root ?? root, as)
           : this.renderConfigValidationException(store)}

src/components/HtxTextBox/HtxTextBox.js

@@ -85,8 +85,7 @@ export class HtxTextBox extends React.Component {
   };
 
   updateHeight = throttle(() => {
-    const borders = 2;
-    const height = (this.inputRef.current?.scrollHeight || 0) + borders;
+    const height = this.inputRef.current?.scrollHeight || 0;
 
     if (height && height !== this.state.height) {
       this.setState({ height });

src/mixins/Regions.js

@@ -80,13 +80,16 @@ const RegionsMixin = types
       return self.parent.findImageEntity(self.item_index ?? 0);
     },
 
-    getConnectedDynamicRegions(selfExcluding) {
+    getConnectedDynamicRegions(excludeSelf) {
       const { regions = [] } = getRoot(self).annotationStore?.selected || {};
+      const { type, labelName } = self;
 
-      return regions.filter(r => {
-        if (selfExcluding && r === self) return false;
-        return r.dynamic && r.type === self.type && r.labelName === self.labelName;
+      const result = regions.filter(region => {
+        if (excludeSelf && region === self) return false;
+        return region.dynamic && region.type === type && region.labelName === labelName;
       });
+
+      return result;
     },
 
   }))
@@ -225,6 +228,10 @@ const RegionsMixin = types
         self.perRegionFocusRequest = null;
       },
 
+      revokeSuggestion(){
+        self.fromSuggestion = false;
+      }, 
+
       setHighlight(val) {
         self._highlighted = val;
       },
@@ -250,7 +257,7 @@ const RegionsMixin = types
           self.origin = 'prediction-changed';
         }
 
-        // everything above is related to dynamic preannotations
+        // everything below is related to dynamic preannotations
         if (!self.dynamic || self.fromSuggestion) return;
 
         clearTimeout(self.drawingTimeout);
@@ -260,7 +267,9 @@ const RegionsMixin = types
           const env = getEnv(self);
 
           self.drawingTimeout = setTimeout(() => {
-            env.events.invoke('regionFinishedDrawing', self, self.getConnectedDynamicRegions(destroy));
+            const connectedRegions = self.getConnectedDynamicRegions(destroy);
+
+            env.events.invoke('regionFinishedDrawing', self, connectedRegions);
           }, timeout);
         }
       },

src/stores/Annotation/Annotation.js

@@ -1044,7 +1044,15 @@ export const Annotation = types
         self.acceptAllSuggestions();
       } else {
         self.suggestions.forEach((suggestion) => {
-          if (['richtextregion', 'text', 'textrange'].includes(suggestion.type)) {
+          // regions that can't be accepted in usual way, should be auto-accepted;
+          // textarea will have simple classification area with no type, so check result.
+          // @todo per-regions is tough thing here as they can be in generated result,
+          // connected to manual region, will check it later
+          const results = suggestion.results ?? [];
+          const onlyAutoAccept = ['richtextregion', 'text', 'textrange'].includes(suggestion.type)
+            || results.findIndex(r => r.type === 'textarea') >= 0;
+
+          if (onlyAutoAccept) {
             self.acceptSuggestion(suggestion.id);
             if (isFF(FF_DEV_1284)) {
               // This is necessary to prevent the occurrence of new steps in the history after updating objects at the end of current method
@@ -1057,7 +1065,7 @@ export const Annotation = types
       if (!isFF(FF_DEV_1284)) {
         history.freeze('richtext:suggestions');
       }
-      self.objects.forEach(obj => obj.needsUpdate?.({ suggestions: true }));
+      self.names.forEach(tag => tag.needsUpdate?.({ suggestions: true }));
       if (!isFF(FF_DEV_1284)) {
         history.setReplaceNextUndoState(true);
         history.unfreeze('richtext:suggestions');
@@ -1278,6 +1286,13 @@ export const Annotation = types
         area.setValue(state);
       });
       self.suggestions.delete(id);
+      
+      // hack to unlock sending textarea results
+      // to the ML backen every time
+      // it just sets `fromSuggestion` back to `false`
+      const isTextArea = area.results.findIndex(r => r.type === 'textarea') >= 0; 
+
+      if (isTextArea) area.revokeSuggestion();
     },
 
     rejectSuggestion(id) {

src/tags/control/TextArea/TextArea.js

@@ -215,7 +215,7 @@ const Model = types.model({
       if (index < 0) return;
       self.regions.splice(index, 1);
       destroy(region);
-      self.onChange();
+      self.onChange(region);
     },
 
     perRegionCleanup() {
@@ -229,8 +229,11 @@ const Model = types.model({
       return r;
     },
 
-    onChange() {
+    onChange(area) {
       self.updateResult();
+      const currentArea = (area ?? self.result?.area);
+
+      currentArea?.notifyDrawingFinished();
     },
 
     validateValue(text) {
@@ -418,7 +421,17 @@ const HtxTextArea = observer(({ item }) => {
   );
 });
 
-const HtxTextAreaResultLine = forwardRef(({ idx, value, readOnly, onChange, onDelete, onFocus, validate, control, collapsed }, ref) => {
+const HtxTextAreaResultLine = forwardRef(({
+  idx,
+  value,
+  readOnly,
+  onChange,
+  onDelete,
+  onFocus,
+  validate,
+  control,
+  collapsed,
+}, ref) => {
   const rows = parseInt(control.rows);
   const isTextarea = rows > 1;
   const [stateValue, setStateValue] = useState(value ?? '');

tests/functional/specs/image_segmentation/tools/rect3point.cy.ts

@@ -1,6 +1,6 @@
 import { ImageView, LabelStudio } from '@heartexlabs/ls-test/helpers/LSF';
 import { rect3Config, simpleImageData } from '../../../data/image_segmentation/tools/rect3point';
-import { FF_DEV_2132, FF_DEV_3793, FF_LSDV_4673 } from '../../../../../src/utils/feature-flags';
+import { FF_DEV_2132, FF_DEV_3793 } from '../../../../../src/utils/feature-flags';
 
 describe('Rect3Point tool', () => {
   beforeEach(() => {
@@ -173,4 +173,4 @@ describe('Rect3Point tool', () => {
       expect(result.value.rotation).to.be.eq(0);
     });
   });
-});
+});