+
{ props.children }
implements ShellFunctions {
private textInput: HTMLTextAreaElement | HTMLInputElement;
private fileInput: HTMLInputElement;
+ private addFileTimeout: any
constructor(props: Props) {
super(props);
@@ -59,6 +67,15 @@ class ShellContainer extends React.Component implements ShellFunct
if ((forceText || "").trim().length > 0 || this.props.inputText.trim().length > 0) {
this.props.sendMessage((forceText || "").trim() || this.props.inputText);
}
+ if (this.props.attachmentUrl && (!this.state.attachmentQrCode)) {
+ QRCode.toDataURL(this.props.attachmentUrl, {
+ color: {
+ dark: '#000',
+ light: '#0000' // transparent
+ }
+ }).then((attachmentQrCode: string) => this.setState({ attachmentQrCode }))
+ }
+ (window as any).props = this.props
}
componentDidUpdate(prevProps: Props) {
@@ -127,10 +144,19 @@ class ShellContainer extends React.Component implements ShellFunct
}
private onChangeFile() {
- this.props.sendFiles(this.fileInput.files);
- this.fileInput.value = null;
- this.textInput.focus();
- }
+ const fileList = this.fileInput.files;
+ let files: File[] = [];
+
+ for (let i = 0; i < fileList.length; i++) {
+ const file = fileList[i];
+ files.push(file);
+ }
+
+ this.props.sendFiles(files, location.hash.includes('#feedbot-direct-upload'));
+ this.fileInput.value = null;
+ this.textInput.focus();
+ }
+
private onTextInputFocus() {
if (this.props.listeningState === ListeningState.STARTED) {
@@ -154,6 +180,44 @@ class ShellContainer extends React.Component implements ShellFunct
}
}
+ addFile(file: File) {
+ // onDrop called multiple times, need to debounce
+ clearTimeout(this.addFileTimeout)
+
+ this.addFileTimeout = setTimeout(() => {
+ console.log('addFile timeout')
+
+ if (file.size > 3 * 1024 * 1024 || location.hash.includes('#feedbot-direct-upload')) {
+ const attachmentUrl = this.props.attachmentUrl
+ const f = file
+ const reader = new FileReader()
+
+ reader.onload = (function (file) {
+ return async function (e: any) {
+ console.log(e)
+ var binaryData = e.target.result
+ //Converting Binary Data to base 64
+ var base64String = 'data:' + file.type + ';base64,' + window.btoa(binaryData)
+ const body = JSON.stringify([{ data: base64String, fileName: file.name }])
+ try {
+ const response = await fetch(attachmentUrl, {
+ method: 'POST',
+ body
+ })
+
+ console.log("File successfully uploaded", response.status, response.statusText)
+ } catch (error) {
+ console.log("File upload failed", error)
+ }
+ }
+ })(f)
+
+ reader.readAsBinaryString(f)
+ }
+ this.props.sendFiles([file], file.size > 3 * 1024 * 1024 || location.hash.includes('#feedbot-direct-upload'))
+ }, 75)
+ }
+
private async takeScreenshot() {
const screen = await html2canvas(document.body, { allowTaint: true, useCORS: true }).then((canvas) => {
const dataURI = canvas.toDataURL("image/png");
@@ -168,14 +232,14 @@ class ShellContainer extends React.Component implements ShellFunct
'wc-console',
this.props.inputText.length > 0 && 'has-text',
this.props.showUploadButton && 'has-upload-button',
- this.props.disableInput && 'disable-input'
+ this.props.disableInput && (this.props.uploadUsingDndAndQrCode || this.props.uploadUsingQrCodeOnly) && 'disable-input'
);
const showMicButton = this.props.listeningState !== ListeningState.STOPPED || (Speech.SpeechRecognizer.speechIsAvailable() && !this.props.inputText.length);
const sendButtonClassName = classList(
'wc-send',
- showMicButton && 'hidden'
+ showMicButton || (this.props.showUploadButton && this.props.disableInput) && (this.props.uploadUsingDndAndQrCode || this.props.uploadUsingQrCodeOnly) && 'hidden'
);
const micButtonClassName = classList(
@@ -187,23 +251,24 @@ class ShellContainer extends React.Component implements ShellFunct
const placeholder = this.props.listeningState === ListeningState.STARTED ? this.props.strings.listeningIndicator : this.props.strings.consolePlaceholder;
- return (
-
- {
- this.props.showUploadButton &&
-
- }
- {
- this.props.showUploadButton &&
+ const localAndQrAttachment = [
+ this.addFile(file)} />,
+ {
- this.sendMessage(selection)
- return
- }}
- onInputValueChange={(inputValue) => {
- if(this.props.autoSuggestType === "static") {
- return
- }
- this.props.onChangeText(inputValue)
- return
- }}
- itemToString={(item) => {
- return item ? item : "";
- }}
- >
- {({
- getInputProps,
- getItemProps,
- getMenuProps,
- isOpen,
- inputValue,
- highlightedIndex,
- selectedItem,
- getRootProps,
- }) => (
-
-
- ) : (
+ {this.props.strings.attachmentInfo}
+ alert(this.props.strings.attachmentAlert + '\n\n' + this.props.attachmentUrl)}>
+
+ ]
+
+ const qrOnlyAttachment = [
+
+ {this.props.strings.attachmentInfoQrOnly}
{this.props.attachmentUrl} + alert(this.props.strings.attachmentAlert + '\n\n' + this.props.attachmentUrl)}>
+
+ ]
+
+ const buttonAttachment =
+ [
+ ,
implements ShellFunct
role="button"
capture={!!this.props.uploadCapture}
accept={this.props.uploadCapture}
- />
- }
- {
- this.props.showUploadButton &&
+ />,
- }
-
-{this.props.showAutoSuggest ? (
- {this.props.attachmentUrl} + alert(this.props.strings.attachmentAlert + '\n\n' + this.props.attachmentUrl)}>
- (this.textInput = input)}
- autoFocus
- value={this.props.inputText}
- onBlur={async () => {
+ ]
+
+ const autosuggestInput = {
+ this.sendMessage(selection)
+ return
+ }}
+ onInputValueChange={(inputValue) => {
if(this.props.autoSuggestType === "static") {
- return this.props.onChangeText("");
+ return
}
- }}
- onKeyPress={(e) => {
- this.onKeyPress(e);
- }}
- onKeyUp={this.autoSuggestOnKeyUp}
- onFocus={() => this.onTextInputFocus()}
- placeholder={placeholder}
- disabled={this.props.disableInput}
- aria-label={this.props.inputText ? null : placeholder}
- aria-live="polite"
- {...getInputProps()}
- />
-
- )}
- -
- {isOpen
- ? Array.from(fuzzysort.go(inputValue, (this.props.autoSuggestItems.length > 0
- ? this.props.autoSuggestItems
- : this.state.items), {keys: ["answer"], limit: 10}))
- .reverse()
- .map((item: any, index: number) => {
- return
- - {item.obj.answer} - - }) - : null} -
-
-
)}
+ this.props.onChangeText(inputValue)
+ return
+ }}
+ itemToString={(item) => {
+ return item ? item : "";
+ }}
+ >
+ {({
+ getInputProps,
+ getItemProps,
+ getMenuProps,
+ isOpen,
+ inputValue,
+ highlightedIndex,
+ selectedItem,
+ getRootProps,
+ }) => (
+
+ (this.textInput = input)}
+ autoFocus
+ value={this.props.inputText}
+ onBlur={async () => {
+ if(this.props.autoSuggestType === "static") {
+ return this.props.onChangeText("");
+ }
+ }}
+ onKeyPress={(e) => {
+ this.onKeyPress(e);
+ }}
+ onKeyUp={this.autoSuggestOnKeyUp}
+ onFocus={() => this.onTextInputFocus()}
+ placeholder={placeholder}
+ disabled={this.props.disableInput}
+ aria-label={this.props.inputText ? null : placeholder}
+ aria-live="polite"
+ {...getInputProps()}
+ />
+
+ )}
+
+
+ const defaultInput = -
+ {isOpen
+ ? Array.from(fuzzysort.go(inputValue, (this.props.autoSuggestItems.length > 0
+ ? this.props.autoSuggestItems
+ : this.state.items), {keys: ["answer"], limit: 10}))
+ .reverse()
+ .map((item: any, index: number) => {
+ return
- + {item.obj.answer} + + }) + : null} +
+
+
+
+ return (
+
+ {
+ this.props.showUploadButton && (this.props.uploadUsingQrCodeOnly ? qrOnlyAttachment : this.props.uploadUsingDndAndQrCode ? localAndQrAttachment : buttonAttachment)
+ }
+
+ {this.props.showAutoSuggest ? autosuggestInput : defaultInput}