Enhancement request: Add support for copy/paste files from clipboard

[tasdflkjweio]

I am having a hard time convincing my collaborators to use deep-chat because attaching files to the chat requires the usage of a file dialog. I would be happy to collaborate on this if it would be of value.

[OvidijusParsiunas]

Hi @tasdflkjweio.

Could you elaborate on the meaning of "file dialog". I am not quite sure what you mean. Thankyou!

[tasdflkjweio]

@OvidijusParsiunas Sure, it's the file selection window that opens when I click the image icon. I'd like the ability to simply paste some content from my clipboard using copy + paste.

[OvidijusParsiunas]

Hey, I'll explore this when I get a chance tomorrow. I'd also like to mention that you can simply drag and drop files into the chat. E.g. if you set the images property to true, you can simply drag your images into the chat.

[tasdflkjweio]

Appreciate it! Drag and drop is great, but requires you to have a file saved locally first. It's a slightly different use case.

I was looking at the minified code, but very rudimentary support for this would look like:

{
    key: "addEvents",
    value: function addEvents(e, t, i) {
      t.ondragenter = function (n) {
        n.preventDefault(), ue.display(e);
      }, e.ondragleave = function (n) {
        n.preventDefault(), ue.hide(e);
      }, e.ondragover = function (n) {
        n.preventDefault();
      }, e.ondrop = function (n) {
        n.preventDefault(), ue.uploadFile(i, n), ue.hide(e);
      }, t.addEventListener('paste', evt => { // add another event listener
        evt.preventDefault();
        const files = Array.from(evt.clipboardData.files);
        i.addFilesToAnyType(files);
      })
    }
  }

It may already be handled by one of your functions, but the edge cases that would need to be solved I believe are...

1. Choose a behavior for enforcing the max number of attachments. You can have multiple files and text all in your clipboard. Few options I was thinking...attach all and show an error message until the count is below the limit; truncate at the limit; or do nothing.

2. Validate that the attached filetypes, max filesize, etc. are allowed by the config, and exclude anything that's not.

3. Mixed filetypes allowed or not.

This is another enhancement request, but somewhat related is the ability to programmatically attach files. We've got a use case where the user would want to click an export button and automatically attach it to the chat window. I'd like to be able to pass the filecontents or blob to the function from js code.

Thanks for your consideration!

[OvidijusParsiunas]

Hi @tasdflkjweio, I have updated our deep-chat-dev and deep-chat-react-dev packages version 9.0.161 to allow you to copy and paste files. These packages behave the same way as the core ones except their names are different. To note, we are preparing for a big release, so some properties are called differently - e.g. request is called connect etc. Nevertheless, all of the old properties should work just fine - but you might get TS/console warnings which you can ignore.

In regards to the functionality, the paste functionality will only work if you enable the corresponding file properties. E.g to be able to insert images - enable the images property. The new functionality also ticks all of the 3 points that you have listed.

Let me know if this works for you.

[OvidijusParsiunas]

In regards to programatically attaching files, I am currently working on a couple of other issues as well as balancing my free time after work, hence I will try to investigate this in a couple of days.

Thanks!

[tasdflkjweio]

Thank you!

[tasdflkjweio]

@OvidijusParsiunas I've tested the functionality and it seems to work well overall. However, I encountered a minor problem. When the attachment limit is reached and I attempt to paste additional files, the first attachment gets overwritten. This happens even if multiple files are selected for pasting; only one gets pasted.

I'd recommend the behavior should be as follows: once the attachment limit is reached, any new files that are pasted should not be accepted. Pasting additional files beyond the limit should have no effect and the existing attachments should remain unchanged.

This actually is an issue for drag and drop as well.

Second issue - it looks like the change broke text copying. I think you can inspect the content type as it's pasting. Probably should only conditionally preventDefault.

[OvidijusParsiunas]

Hi @OvidijusParsiunas.

Thankyou for your feedback.

I have fixed the text paste issue in dev versions 9.0.162. Let me know if it works for you.

In regards to new files overwriting the old ones; this was an intentional UX implementation. The rationale behind it is that users may not be aware of the file limit, hence they might think that the problem is on their end. Hence we indicate that they can still upload files within a limit by overwriting the existing ones. I understand this may be problematic for your specific case, but since the component is utilized by many users/developers in the world, this is the best unified approach.

Thanks!

[tasdflkjweio]

Appreciate it!

I have fixed the text paste issue in dev versions 9.0.162. Let me know if it works for you.

I'll check this out today.

The rationale behind it is that users may not be aware of the file limit, hence they might think that the problem is on their end. Hence we indicate that they can still upload files within a limit by overwriting the existing ones.

I think there is a somewhat standard pattern for this. I'm thinking of how Slack and Teams work. Examples:

MSFT Teams when trying to drag/drop > 10 files at once:

MSFT Teams when trying to drag/drop an additional file when 10 files have already been attached:

Slack when trying to copy/paste > 10 files at once:

Slack when trying to drag/drop an additional file when 10 files have already been attached:

This is another one shown by the Twilio design system when the file is too large:

In all of those examples, it accepts the files it can and rejects the ones it can't. If at the limit, it starts rejecting. That said, I won't push on this anymore. I appreciate your consideration!

[OvidijusParsiunas]

Hi @tasdflkjweio.

Thankyou for your suggestion. I will consider adding this feature in the future. One other problem that Deep Chat presents is its dynamicity in allowing the dev to set different file limits for different types, hence displaying a limit for each type would simply clutter the interface. Nevertheless I will see what I can do in late releases.