Test assistant prompt

src/components/Assistant/Assistant.styl

@@ -45,6 +45,30 @@
     gap 4px
     width 100%
 
+    &_disabled
+      opacity .5 !important
+      pointer-events none
+
+    &_loading
+      --borderWidth: 3px;
+      background: #FFF;
+      position: relative;
+      border-radius 4px
+      pointer-events: none;
+
+      &:after
+        content: '';
+        position: absolute;
+        top: calc(-1 * var(--borderWidth));
+        left: calc(-1 * var(--borderWidth));
+        height: calc(100% + var(--borderWidth) * 2);
+        width: calc(100% + var(--borderWidth) * 2);
+        background: linear-gradient(60deg, #9254DE, #9254DE, #13C2C2, #13C2C2);
+        border-radius: calc(2 * var(--borderWidth));
+        z-index: -1;
+        animation: animatedgradient 3s ease alternate infinite;
+        background-size: 300% 300%;
+
     &__primary-action
       height 100%
       width 100%
@@ -56,6 +80,10 @@
       grid-row 1 / 2
       grid-column 2 / -1
 
+      &_loading
+        filter grayscale(1)
+        opacity .6
+
       button
         margin-top 4px
         display flex
@@ -78,3 +106,18 @@
     &__tooltipMessage
       color var(--tooltip-text-color)
       font-size 0.9em
+
+
+@keyframes animatedgradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+

src/components/Assistant/Assistant.tsx

@@ -7,7 +7,7 @@ import { IconCross } from '../../assets/icons';
 import './Assistant.styl';
 import { TextArea } from '../../common/TextArea/TextArea';
 
-export const Assistant: FC<{ onPrompt: (prompt: string) => void }> = observer(({ onPrompt }) => {
+export const Assistant: FC<{ onPrompt: (prompt: string) => void, awaitingSuggestions: boolean }> = observer(({ onPrompt, awaitingSuggestions }) => {
   const [historyValue, setHistoryValue] = useState<string[]>([]);
   const [value, setValue] = useState('');
 
@@ -55,6 +55,7 @@ export const Assistant: FC<{ onPrompt: (prompt: string) => void }> = observer(({
 
   const setValueFromHistory = useCallback((item: string) => {
     setValue(item);
+    onPrompt(item);
     setHistory(item);
   }, [historyValue]);
 
@@ -88,15 +89,18 @@ export const Assistant: FC<{ onPrompt: (prompt: string) => void }> = observer(({
 
   return (
     <Block name="assistant">
-      <Block tag="form" name="assist-form" mod={{ inline: true }} onSubmit={onSubmit}>
+      <Block tag="form" name="assist-form" mod={{ inline: true, loading: awaitingSuggestions }} onSubmit={onSubmit}>
         <TextArea
+          className={awaitingSuggestions ? 'lsf-assist-form_disabled' : ''}
           name="assist-text"
           placeholder="Type your message here"
           value={value}
           onChange={setValue}
           onSubmit={onSubmit}
         />
-        <Elem tag="div" name="primary-action">
+        <Elem tag="div" name="primary-action"
+          mod={{ loading: awaitingSuggestions }}
+        >
           <button type="submit">
             <IconSend />
           </button>

src/components/SidePanels/DetailsPanel/DetailsPanel.tsx

@@ -77,7 +77,7 @@ const AssistTab: FC<any> = inject('store')(observer(({ store }) => {
     <Block name={'assistant-panel'}>
       <Elem name="section-tab">
         <Elem name="section-content">
-          <Assistant onPrompt={store.onAssistantPrompt} />
+          <Assistant onPrompt={store.onAssistantPrompt} awaitingSuggestions={store.awaitingSuggestions} />
         </Elem>
       </Elem>
     </Block>

src/stores/AppStore.js

@@ -1,15 +1,6 @@
 /* global LSF_VERSION */
 
-import {
-  destroy,
-  detach,
-  flow,
-  getEnv, getParent,
-  getSnapshot,
-  isRoot,
-  types,
-  walk
-} from 'mobx-state-tree';
+import { destroy, detach, flow, getEnv, getParent, getSnapshot, isRoot, types, walk } from 'mobx-state-tree';
 
 import uniqBy from 'lodash/uniqBy';
 import InfoModal from '../components/Infomodal/Infomodal';
@@ -637,11 +628,15 @@ export default types
     }
 
     async function onAssistantPrompt(prompt) {
+      self.setFlags({ awaitingSuggestions: true });
+
       const result = await self.events.invoke('assistantPrompt', self, prompt);
 
       self.annotationStore.selected.deserializeResults(result[0]);
       self.annotationStore.selected.updateObjects();
 
+      self.setFlags({ awaitingSuggestions: false });
+
       return result;
     }