Possibility to send attachments as part of a conversation

[rasmusei]

AS AN End User and CSA I WANT TO be able to send attachments via chatbot SO THAT I could provide other party necessary information

Acceptance Criteria

• [ ] End User has the possibility to send attachments to CSA
• [ ] CSA has the possibility to send attachments to End User
• [ ] Limit file size that can be uploaded
• [ ] ~Attachment possible file types: pdf, png, jpeg, txt, docx, xlsx, bdoc, asice, voice and video files~
• [ ] Any type of file extension can be sent as attachments
• [ ] Compress file before actual upload
• [ ] Virus check for attachments applied
• [ ] Define naming convention for files
• [ ] Pre-defined file types will be opened for preview without downloading the file

Settings

• [ ] Administrative GUI tool to define appropriate settings in "Chatbot -> Settings"

  Possible options for processing attachments are as following:

• [ ] end-user to CSA attachments allowed/not allowed
• [ ] end-user to CSA attachments allowed only if end-user is authenticated (needs authentication to be triggered after pressing attachment button)
• [ ] CSA to end-user attachments allowed/not allowed

DSL

• [ ] Define allowed file types in Chat Widget / Backoffice settings
• [ ] Define allowed maximum file size in Chat Widget / Backoffice settings
• [ ] Use buerokratt/File-Storage#2 to send attachments from GUI for further processing
• [ ] Use buerokratt/File-Storage#3 via SSE and use it in Chat Widget

GUI

• [ ] Uploading files from the computer without a chance to drag and drop
• [ ] Only 1 file can be sent as an attachment at a time
• [ ] After choosing the files to send as an attachment, the End User can preview the file before actually sending it
• [ ] ~Make a REST request to send input in a format of base64 via~ ~#67~
• [ ] An additional functionality initiated by a CSA to ask the End User to upload an attachment, design similar to

To Consider

• [ ] Upload files by using pre-signed URLs straight from React to S3 bucket

[turnerrainer]

• No need to restrict file types, unless it makes sense business-wise;
• Virus check for attachments applied slows down this issue.

[PaulaMerle]

DSL for phase 3 development

[sergeirudz]

@turnerrainer This is how its currently implemented: PR which will have to be updated: https://github.com/buerokratt/Chat-Widget/pull/12

Implementation:

• Add file input to the Chat widget
• Convert the file to base64
• Add new property with the data to the message.

export interface MessageFile {
   name: string;
   type: MessageFileTypes;
   size: number;
   base64: string;
}

export interface Message {
   chatId: string | null;
   id?: string;
   content?: string;
   file?: MessageFile; // ←—------ Added this
   event?: string;
   rating?: string;
   authorId?: string;
   authorTimestamp: string;
   authorFirstName?: string;
   authorLastName?: string;
   authorRole?: string;
   created?: string;
   updated?: string;
   data?: {
       forwarding_validation?: string;
   };
}

export enum MessageFileTypes {
   // TODO add correct file types Ticket: https://github.com/buerokratt/Buerokratt-Chatbot/issues/30
   PDF = 'application/pdf',
   PNG = 'image/png',
   JPEG = 'image/jpeg',
   TXT = 'text/plain', // TODO SLICE NAME
   DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // TODO SLICE NAME
   ODT = 'application/vnd.oasis.opendocument.text', // NOT SPECIFIED
   XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // TODO SLICE NAME
   // ODS = 'ods', // NOT SPECIFIED
   BDOC = 'application/vnd.etsi.asic-e+zip', // TODO VERIFY, could not find an example
   CDOC = 'application/x-cdoc', // NOT SPECIFIED
   ASICE = 'application/vnd.etsi.asic-e+zip', // TODO SLICE NAME
   MP3 = 'audio/mpeg', // TODO VERIFY, could not find an example
   WAV = 'audio/wav', // TODO VERIFY, could not find an example
   M4A = 'audio/x-m4a',
   MP4 = 'video/mp4',// TODO
   WEBM = 'video/webm',// TODO
   OGG = 'video/ogg',// TODO
   MOV = 'video/quicktime',// TODO
}

Questions:

1. Where is the data structure that specifies message with file attachment? Will the file message just contain the URL to CDN to download the file?
2. Where is the design for the chatbot widget file upload? Upload file paperclip icon, chat bubble with file sent/received, delete file and cancel the upload.
3. Upload progress bar for slow connections.
4. Are the file formats sufficient? I added some additional.
5. Implementation on the CSA side should be identical?
6. How to pick the correct object structure for file message?

export interface MessageFile {
   name: string;
   type: MessageFileTypes;
   size: number;
   base64?: string; ←— base64 file when sending message. Empty when receiving.
   url?: string;  ←— file download link will be added here when receiving message! Or combine them both into data: ""?
}`

[sergeirudz]

Chat-Widget implementation

https://github.com/buerokratt/Chat-Widget/pull/12 Currently, Work In Progress!

[turnerrainer]

@sergeirudz

Will the file message just contain the URL to CDN to download the file?

Ruuter DSL will contain appropriate headers to force the browser to download the file. No need for a CDN link.

[turnerrainer]

@sergeirudz

GUI has to make a POST request towards Ruuter endpoint /attachments/add with the content described by you:

export interface MessageFile {
   name: string;
   type: MessageFileTypes;
   size: number;
   base64: string;
}

[sergeirudz]

PR: https://github.com/buerokratt/Chat-Widget/pull/12 Added POST request to '/attachments/add'

I added chatId key!!!

export interface Attachment {
    chatId: string;
    name: string;
    type: AttachmentTypes;
    size: number;
    base64: string;
}
export enum AttachmentTypes {
    PDF = 'application/pdf',
    PNG = 'image/png',
    JPEG = 'image/jpeg',
    TXT = 'text/plain',
    DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    ODT = 'application/vnd.oasis.opendocument.text',
    XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ODS = 'ods',
    BDOC = 'application/vnd.etsi.asic-e+zip',
    CDOC = 'application/x-cdoc',
    ASICE = 'application/vnd.etsi.asic-e+zip',
    MP3 = 'audio/mpeg',
    WAV = 'audio/wav',
    M4A = 'audio/x-m4a',
    MP4 = 'video/mp4',
    WEBM = 'video/webm',
    OGG = 'video/ogg',
    MOV = 'video/quicktime',
}

[sergeirudz]

Widget Branch https://github.com/sergeirudz/Chat-Widget/tree/30-possibility-to-send-attachments PR: https://github.com/buerokratt/Chat-Widget/pull/12

Admin Ticket buerokratt/Buerokratt-Chatbot#30 Admin poolne tehtud https://github.com/buerokratt/Buerokratt-Chatbot/issues/30 PR: https://github.com/buerokratt/Buerokratt-Chatbot/pull/180

[PaulaMerle]

@turnerrainer lets have 3 options in admin module (in Vestlusrobot -> Seaded page) for attachments: 1) end-user to CSA attachments allowed/not allowed; 2) end-user to CSA attachments allowed only if end-user is authenticated (needs authentication to be triggered after pressing attachment button); 3) CSA to end-user attachments allowed/not allowed. Each organization can decide by themselves whether they allow attachments to be sent. In case allowed - should the attachments be downloaded first in order to open or can be opened immediately from chat?