Show progress while gpt do calculations (#2538)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/text-editor/src/components/ReferenceInput.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { getResource, IntlString, Asset } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { Button, Icon, showPopup, tooltip } from '@hcengineering/ui'
+  import { Button, Icon, showPopup, Spinner, tooltip } from '@hcengineering/ui'
   import type { AnySvelteComponent } from '@hcengineering/ui'
   import { AnyExtension } from '@tiptap/core'
   import { createEventDispatcher } from 'svelte'
@@ -51,6 +51,7 @@
   export let withoutTopBorder = false
   export let placeholder: IntlString | undefined = undefined
   export let extraActions: RefAction[] | undefined = undefined
+  export let loading: boolean = false
   const client = getClient()
 
   let textEditor: TextEditor
@@ -299,9 +300,17 @@
         class="sendButton"
         on:click={submit}
         use:tooltip={{ label: labelSend ?? textEditorPlugin.string.Send }}
-        disabled={isEmpty && !haveAttachment}
+        disabled={(isEmpty && !haveAttachment) || loading}
       >
-        <div class="icon"><Icon icon={iconSend ?? Send} size={'medium'} /></div>
+        <div class="icon">
+          {#if loading}
+            <div class="pointer-events-none spinner">
+              <Spinner size={'medium'} />
+            </div>
+          {:else}
+            <Icon icon={iconSend ?? Send} size={'medium'} />
+          {/if}
+        </div>
       </button>
     {/if}
   </div>

plugins/attachment-resources/src/components/AttachmentRefInput.svelte

@@ -34,6 +34,7 @@
   export let showSend = true
   export let shouldSaveDraft: boolean = false
   export let attachments: IdMap<Attachment> = new Map()
+  export let loading = false
   export function submit (): void {
     refInput.submit()
   }
@@ -208,6 +209,7 @@
   }
 
   async function onMessage (event: CustomEvent) {
+    loading = true
     await createAttachments()
     dispatch('message', { message: event.detail, attachments: attachments.size })
   }
@@ -281,6 +283,7 @@
       {iconSend}
       {labelSend}
       {showSend}
+      {loading}
       on:message={onMessage}
       haveAttachment={attachments.size > 0}
       withoutTopBorder={attachments.size > 0}

plugins/chunter-resources/src/components/CommentInput.svelte

@@ -108,26 +108,33 @@
     return newDraft
   }
 
+  let loading = false
+
   async function onMessage (event: CustomEvent) {
-    const { message, attachments } = event.detail
-    await client.addCollection<Doc, Comment>(
-      _class,
-      object.space,
-      object._id,
-      object._class,
-      'comments',
-      { message, attachments },
-      _id
-    )
+    loading = true
+    try {
+      const { message, attachments } = event.detail
+      await client.addCollection<Doc, Comment>(
+        _class,
+        object.space,
+        object._id,
+        object._class,
+        'comments',
+        { message, attachments },
+        _id
+      )
 
-    // Create an backlink to document
-    await createBacklinks(client, object._id, object._class, _id, message)
+      // Create an backlink to document
+      await createBacklinks(client, object._id, object._class, _id, message)
 
-    // Remove draft from Local Storage
-    _id = generateId()
-    draftComment = undefined
-    await saveDraft(object)
-    commentInputBox.removeDraft(false)
+      // Remove draft from Local Storage
+      _id = generateId()
+      draftComment = undefined
+      await saveDraft(object)
+      commentInputBox.removeDraft(false)
+    } finally {
+      loading = false
+    }
   }
 </script>
 
@@ -140,4 +147,5 @@
   {shouldSaveDraft}
   on:message={onMessage}
   on:update={onUpdate}
+  {loading}
 />

plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte

@@ -33,30 +33,36 @@
   const editing = false
 
   async function onMessage (event: CustomEvent<AttachedData<Comment>>) {
-    const { message, attachments } = event.detail
-    await client.updateCollection(
-      tx.objectClass,
-      tx.objectSpace,
-      tx.objectId,
-      value.attachedTo,
-      value.attachedToClass,
-      value.collection,
-      {
-        message,
-        attachments
-      }
-    )
-    // We need to update backlinks before and after.
-    await updateBacklinks(client, value.attachedTo, value.attachedToClass, value._id, message)
-
+    loading = true
+    try {
+      const { message, attachments } = event.detail
+      await client.updateCollection(
+        tx.objectClass,
+        tx.objectSpace,
+        tx.objectId,
+        value.attachedTo,
+        value.attachedToClass,
+        value.collection,
+        {
+          message,
+          attachments
+        }
+      )
+      // We need to update backlinks before and after.
+      await updateBacklinks(client, value.attachedTo, value.attachedToClass, value._id, message)
+    } finally {
+      loading = false
+    }
     dispatch('close', false)
   }
   let refInput: AttachmentRefInput
+  let loading = false
 </script>
 
 <div class:editing class="content-accent-color">
   {#if edit}
     <AttachmentRefInput
+      {loading}
       bind:this={refInput}
       _class={value._class}
       objectId={value._id}