botframework-webchat - npm Package Compare versions

Comparing version 0.11.3 to 0.11.4

built/Attachment.js

@@ -80,4 +80,6 @@ "use strict";
     else if (props.contentUrl) {
-        return React.createElement("span", null,
-            React.createElement("a", { href: props.contentUrl, title: props.contentUrl, target: '_blank' }, props.name || props.format.strings.unknownFile.replace('%1', props.contentType)));
+        return React.createElement("div", null,
+            React.createElement("a", { className: "wc-link-download", href: props.contentUrl, target: "_blank", title: props.contentUrl },
+                React.createElement("div", { className: "wc-text-download" }, props.name || props.format.strings.unknownFile.replace('%1', props.contentType)),
+                React.createElement("div", { className: "wc-icon-download" })));
     }
@@ -198,2 +200,3 @@ else {
             return (React.createElement(AdaptiveCardContainer_1.AdaptiveCardContainer, { className: "flex", card: CardBuilder.buildCommonCard(attachment.content), onCardAction: props.onCardAction }, attachedImage(attachment.content.images)));
+        case "image/svg+xml":
         case "image/png":
@@ -200,0 +203,0 @@ case "image/jpg":

built/Chat.d.ts

@@ -26,5 +26,9 @@ /// <reference types="react" />
     private shellRef;
-    private chatviewPanel;
+    private historyRef;
+    private chatviewPanelRef;
     private resizeListener;
+    private _handleCardAction;
     private _handleKeyDownCapture;
+    private _saveChatviewPanelRef;
+    private _saveHistoryRef;
     private _saveShellRef;
@@ -34,3 +38,6 @@ constructor(props: ChatProps);
     private setSize();
+    private handleCardAction();
     private handleKeyDownCapture(evt);
+    private saveChatviewPanelRef(chatviewPanelRef);
+    private saveHistoryRef(historyWrapper);
     private saveShellRef(shellWrapper);
@@ -37,0 +44,0 @@ componentDidMount(): void;

built/Chat.js

@@ -21,3 +21,6 @@ "use strict";
         _this.resizeListener = function () { return _this.setSize(); };
+        _this._handleCardAction = _this.handleCardAction.bind(_this);
         _this._handleKeyDownCapture = _this.handleKeyDownCapture.bind(_this);
+        _this._saveChatviewPanelRef = _this.saveChatviewPanelRef.bind(_this);
+        _this._saveHistoryRef = _this.saveHistoryRef.bind(_this);
         _this._saveShellRef = _this.saveShellRef.bind(_this);
@@ -54,10 +57,27 @@ konsole.log("BotChat.Chat props", props);
             type: 'Set_Size',
-            width: this.chatviewPanel.offsetWidth,
-            height: this.chatviewPanel.offsetHeight
+            width: this.chatviewPanelRef.offsetWidth,
+            height: this.chatviewPanelRef.offsetHeight
         });
     };
+    Chat.prototype.handleCardAction = function () {
+        // After the user click on any card action, we will "blur" the focus, by setting focus on message pane
+        // This is for after click on card action, the user press "A", it should go into the chat box
+        var historyDOM = react_dom_1.findDOMNode(this.historyRef);
+        if (historyDOM) {
+            historyDOM.focus();
+        }
+    };
     Chat.prototype.handleKeyDownCapture = function (evt) {
         var target = evt.target;
         var tabIndex = getTabIndex_1.getTabIndex(target);
-        if (target === react_dom_1.findDOMNode(this.chatviewPanel)
+        if (evt.altKey
+            || evt.ctrlKey
+            || evt.metaKey
+            || (!inputtableKey(evt.key) && evt.key !== 'Backspace')) {
+            // Ignore if one of the utility key (except SHIFT) is pressed
+            // E.g. CTRL-C on a link in one of the message should not jump to chat box
+            // E.g. "A" or "Backspace" should jump to chat box
+            return;
+        }
+        if (target === react_dom_1.findDOMNode(this.historyRef)
             || typeof tabIndex !== 'number'
@@ -76,2 +96,8 @@ || tabIndex < 0) {
     };
+    Chat.prototype.saveChatviewPanelRef = function (chatviewPanelRef) {
+        this.chatviewPanelRef = chatviewPanelRef;
+    };
+    Chat.prototype.saveHistoryRef = function (historyWrapper) {
+        this.historyRef = historyWrapper.getWrappedInstance();
+    };
     Chat.prototype.saveShellRef = function (shellWrapper) {
@@ -122,3 +148,2 @@ this.shellRef = shellWrapper.getWrappedInstance();
     Chat.prototype.render = function () {
-        var _this = this;
         var state = this.store.getState();
@@ -137,6 +162,6 @@ konsole.log("BotChat.Chat state", state);
         return (React.createElement(react_redux_1.Provider, { store: this.store },
-            React.createElement("div", { className: "wc-chatview-panel", onKeyDownCapture: this._handleKeyDownCapture, ref: function (div) { return _this.chatviewPanel = div; }, tabIndex: 0 },
+            React.createElement("div", { className: "wc-chatview-panel", onKeyDownCapture: this._handleKeyDownCapture, ref: this._saveChatviewPanelRef },
                 header,
                 React.createElement(MessagePane_1.MessagePane, null,
-                    React.createElement(History_1.History, null)),
+                    React.createElement(History_1.History, { onCardAction: this._handleCardAction, ref: this._saveHistoryRef })),
                 React.createElement(Shell_1.Shell, { ref: this._saveShellRef }),
@@ -143,0 +168,0 @@ resize)));

built/FormattedText.js

@@ -23,3 +23,3 @@ "use strict";
 };
-var markdownIt = new MarkdownIt({ html: false, linkify: true, typographer: true });
+var markdownIt = new MarkdownIt({ html: false, xhtmlOut: true, breaks: true, linkify: true, typographer: true });
 //configure MarkdownIt to open links in new tab
@@ -44,8 +44,17 @@ //from https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
 var renderMarkdown = function (text, onImageLoad) {
-    var src = text
-        .replace(/<br\s*\/?>/ig, '\r\n\r\n')
-        .replace(/\[(.*?)\]\((.*?)\)/ig, function (match, text, url) { return "[" + text + "](" + markdownIt.normalizeLink(url) + ")"; });
-    var __html = markdownIt.render(src);
+    var __html;
+    if (text.trim()) {
+        var src = text
+            .replace(/<br\s*\/?>/ig, '\n')
+            .replace(/\[(.*?)\]\((.*?)( +".*?"){0,1}\)/ig, function (match, text, url, title) { return "[" + text + "](" + markdownIt.normalizeLink(url) + (title === undefined ? '' : title) + ")"; });
+        var arr = src.split(/\n *\n|\r\n *\r\n|\r *\r/);
+        var ma = arr.map(function (a) { return markdownIt.render(a); });
+        __html = ma.join('<br/>');
+    }
+    else {
+        // Replace spaces with non-breaking space Unicode characters
+        __html = text.replace(/ */, '\u00A0');
+    }
     return React.createElement("div", { className: "format-markdown", dangerouslySetInnerHTML: { __html: __html } });
 };
 //# sourceMappingURL=FormattedText.js.map

built/History.d.ts

@@ -16,2 +16,3 @@ /// <reference types="react" />
     onClickActivity: (activity: Activity) => React.MouseEventHandler<HTMLDivElement>;
+    onCardAction: () => void;
     doCardAction: IDoCardAction;
@@ -18,0 +19,0 @@ }

built/History.js

@@ -65,2 +65,3 @@ "use strict";
         this.props.onClickCardAction();
+        this.props.onCardAction && this.props.onCardAction();
         return this.props.doCardAction(type, value);
@@ -92,3 +93,3 @@ };
         var groupsClassName = Chat_1.classList('wc-message-groups', !this.props.format.options.showHeader && 'no-header');
-        return (React.createElement("div", { className: groupsClassName, ref: function (div) { return _this.scrollMe = div || _this.scrollMe; } },
+        return (React.createElement("div", { className: groupsClassName, ref: function (div) { return _this.scrollMe = div || _this.scrollMe; }, role: "log", tabIndex: 0 },
             React.createElement("div", { className: "wc-message-group-content", ref: function (div) { if (div)
@@ -129,4 +130,7 @@ _this.scrollContent = div; } }, content)));
     isSelected: function (activity) { return activity === stateProps.selectedActivity; },
-    onClickActivity: function (activity) { return stateProps.connectionSelectedActivity && (function () { return stateProps.connectionSelectedActivity.next({ activity: activity }); }); }
-}); })(HistoryView);
+    onClickActivity: function (activity) { return stateProps.connectionSelectedActivity && (function () { return stateProps.connectionSelectedActivity.next({ activity: activity }); }); },
+    onCardAction: ownProps.onCardAction
+}); }, {
+    withRef: true
+})(HistoryView);
 var getComputedStyleValues = function (el, stylePropertyNames) {
@@ -133,0 +137,0 @@ var s = window.getComputedStyle(el);

built/Shell.js

@@ -11,12 +11,27 @@ "use strict";
     tslib_1.__extends(ShellContainer, _super);
-    function ShellContainer(props) {
-        return _super.call(this, props) || this;
+    function ShellContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     ShellContainer.prototype.sendMessage = function () {
-        if (this.props.inputText.trim().length > 0)
+        if (this.props.inputText.trim().length > 0) {
             this.props.sendMessage(this.props.inputText);
+        }
     };
+    ShellContainer.prototype.handleSendButtonKeyPress = function (evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            evt.preventDefault();
+            this.sendMessage();
+            this.textInput.focus();
+        }
+    };
+    ShellContainer.prototype.handleUploadButtonKeyPress = function (evt) {
+        if (evt.key === 'Enter' || evt.key === ' ') {
+            evt.preventDefault();
+            this.fileInput.click();
+        }
+    };
     ShellContainer.prototype.onKeyPress = function (e) {
-        if (e.key === 'Enter')
+        if (e.key === 'Enter') {
             this.sendMessage();
+        }
     };
@@ -29,2 +44,3 @@ ShellContainer.prototype.onClickSend = function () {
         this.fileInput.value = null;
+        this.textInput.focus();
     };
@@ -52,19 +68,18 @@ ShellContainer.prototype.onTextInputFocus = function () {
         var _this = this;
-        var className = 'wc-console';
-        if (this.props.inputText.length > 0)
-            className += ' has-text';
+        var className = Chat_1.classList('wc-console', this.props.inputText.length > 0 && 'has-text');
         var showMicButton = this.props.listening || (SpeechModule_1.Speech.SpeechRecognizer.speechIsAvailable() && !this.props.inputText.length);
         var sendButtonClassName = Chat_1.classList('wc-send', showMicButton && 'hidden');
         var micButtonClassName = Chat_1.classList('wc-mic', !showMicButton && 'hidden', this.props.listening && 'active', !this.props.listening && 'inactive');
+        var placeholder = this.props.listening ? this.props.strings.listeningIndicator : this.props.strings.consolePlaceholder;
         return (React.createElement("div", { className: className },
-            React.createElement("input", { id: "wc-upload-input", type: "file", ref: function (input) { return _this.fileInput = input; }, multiple: true, onChange: function () { return _this.onChangeFile(); } }),
-            React.createElement("label", { className: "wc-upload", htmlFor: "wc-upload-input" },
+            React.createElement("label", { className: "wc-upload", onKeyPress: function (evt) { return _this.handleUploadButtonKeyPress(evt); }, tabIndex: 0 },
                 React.createElement("svg", null,
-                    React.createElement("path", { d: "M19.96 4.79m-2 0a2 2 0 0 1 4 0 2 2 0 0 1-4 0zM8.32 4.19L2.5 15.53 22.45 15.53 17.46 8.56 14.42 11.18 8.32 4.19ZM1.04 1L1.04 17 24.96 17 24.96 1 1.04 1ZM1.03 0L24.96 0C25.54 0 26 0.45 26 0.99L26 17.01C26 17.55 25.53 18 24.96 18L1.03 18C0.46 18 0 17.55 0 17.01L0 0.99C0 0.45 0.47 0 1.03 0Z" }))),
+                    React.createElement("path", { d: "M19.96 4.79m-2 0a2 2 0 0 1 4 0 2 2 0 0 1-4 0zM8.32 4.19L2.5 15.53 22.45 15.53 17.46 8.56 14.42 11.18 8.32 4.19ZM1.04 1L1.04 17 24.96 17 24.96 1 1.04 1ZM1.03 0L24.96 0C25.54 0 26 0.45 26 0.99L26 17.01C26 17.55 25.53 18 24.96 18L1.03 18C0.46 18 0 17.55 0 17.01L0 0.99C0 0.45 0.47 0 1.03 0Z" })),
+                React.createElement("input", { id: "wc-upload-input", tabIndex: -1, type: "file", ref: function (input) { return _this.fileInput = input; }, multiple: true, onChange: function () { return _this.onChangeFile(); }, "aria-label": this.props.strings.uploadFile, role: "button" })),
             React.createElement("div", { className: "wc-textbox" },
-                React.createElement("input", { type: "text", className: "wc-shellinput", ref: function (input) { return _this.textInput = input; }, autoFocus: true, value: this.props.inputText, onChange: function (_) { return _this.props.onChangeText(_this.textInput.value); }, onKeyPress: function (e) { return _this.onKeyPress(e); }, onFocus: function () { return _this.onTextInputFocus(); }, placeholder: this.props.listening ? this.props.strings.listeningIndicator : this.props.strings.consolePlaceholder })),
-            React.createElement("label", { className: sendButtonClassName, onClick: function () { return _this.onClickSend(); } },
+                React.createElement("input", { type: "text", className: "wc-shellinput", ref: function (input) { return _this.textInput = input; }, autoFocus: true, value: this.props.inputText, onChange: function (_) { return _this.props.onChangeText(_this.textInput.value); }, onKeyPress: function (e) { return _this.onKeyPress(e); }, onFocus: function () { return _this.onTextInputFocus(); }, placeholder: placeholder, "aria-label": this.props.inputText ? null : placeholder, "aria-live": "polite" })),
+            React.createElement("button", { className: sendButtonClassName, onClick: function () { return _this.onClickSend(); }, "aria-label": this.props.strings.send, role: "button", onKeyPress: function (evt) { return _this.handleSendButtonKeyPress(evt); }, tabIndex: 0 },
                 React.createElement("svg", null,
                     React.createElement("path", { d: "M26.79 9.38A0.31 0.31 0 0 0 26.79 8.79L0.41 0.02C0.36 0 0.34 0 0.32 0 0.14 0 0 0.13 0 0.29 0 0.33 0.01 0.37 0.03 0.41L3.44 9.08 0.03 17.76A0.29 0.29 0 0 0 0.01 17.8 0.28 0.28 0 0 0 0.01 17.86C0.01 18.02 0.14 18.16 0.3 18.16A0.3 0.3 0 0 0 0.41 18.14L26.79 9.38ZM0.81 0.79L24.84 8.79 3.98 8.79 0.81 0.79ZM3.98 9.37L24.84 9.37 0.81 17.37 3.98 9.37Z" }))),
-            React.createElement("label", { className: micButtonClassName, onClick: function () { return _this.onClickMic(); } },
+            React.createElement("button", { className: micButtonClassName, onClick: function () { return _this.onClickMic(); }, "aria-label": this.props.strings.speak, role: "button", tabIndex: 0 },
                 React.createElement("svg", { width: "28", height: "22", viewBox: "0 0 58 58" },
@@ -71,0 +86,0 @@ React.createElement("path", { d: "M 44 28 C 43.448 28 43 28.447 43 29 L 43 35 C 43 42.72 36.72 49 29 49 C 21.28 49 15 42.72 15 35 L 15 29 C 15 28.447 14.552 28 14 28 C 13.448 28 13 28.447 13 29 L 13 35 C 13 43.485 19.644 50.429 28 50.949 L 28 56 L 23 56 C 22.448 56 22 56.447 22 57 C 22 57.553 22.448 58 23 58 L 35 58 C 35.552 58 36 57.553 36 57 C 36 56.447 35.552 56 35 56 L 30 56 L 30 50.949 C 38.356 50.429 45 43.484 45 35 L 45 29 C 45 28.447 44.552 28 44 28 Z" }),

built/Strings.d.ts

@@ -15,4 +15,6 @@ export interface Strings {
     listeningIndicator: string;
+    uploadFile: string;
+    speak: string;
 }
 export declare const defaultStrings: Strings;
 export declare const strings: (locale: string) => Strings;

built/Strings.js

@@ -17,5 +17,7 @@ "use strict";
         consolePlaceholder: "Type your message...",
-        listeningIndicator: "Listening..."
+        listeningIndicator: "Listening...",
+        uploadFile: "Upload file",
+        speak: "Speak"
     },
-    'ja': {
+    'ja-jp': {
         title: "チャット",
@@ -33,3 +35,5 @@ send: "送信",
         consolePlaceholder: "メッセージを入力してください...",
-        listeningIndicator: "聴いてます..."
+        listeningIndicator: "聴いてます...",
+        uploadFile: "",
+        speak: ""
     },
@@ -49,3 +53,5 @@ 'nb-no': {
         consolePlaceholder: "Skriv inn melding...",
-        listeningIndicator: "Lytter..."
+        listeningIndicator: "Lytter...",
+        uploadFile: "",
+        speak: ""
     },
@@ -65,3 +71,5 @@ 'da-dk': {
         consolePlaceholder: "Skriv din besked...",
-        listeningIndicator: "Lytter..."
+        listeningIndicator: "Lytter...",
+        uploadFile: "",
+        speak: ""
     },
@@ -81,3 +89,5 @@ 'de-de': {
         consolePlaceholder: "Verfasse eine Nachricht...",
-        listeningIndicator: "Hören..."
+        listeningIndicator: "Hören...",
+        uploadFile: "",
+        speak: ""
     },
@@ -97,3 +107,5 @@ 'pl-pl': {
         consolePlaceholder: "Wpisz swoją wiadomość...",
-        listeningIndicator: "Słuchający..."
+        listeningIndicator: "Słuchający...",
+        uploadFile: "",
+        speak: ""
     },
@@ -113,3 +125,5 @@ 'ru-ru': {
         consolePlaceholder: "Введите ваше сообщение...",
-        listeningIndicator: "прослушивание..."
+        listeningIndicator: "прослушивание...",
+        uploadFile: "",
+        speak: ""
     },
@@ -129,3 +143,5 @@ 'nl-nl': {
         consolePlaceholder: "Typ je bericht...",
-        listeningIndicator: "het luisteren..."
+        listeningIndicator: "het luisteren...",
+        uploadFile: "",
+        speak: ""
     },
@@ -145,3 +161,5 @@ 'lv-lv': {
         consolePlaceholder: "Ierakstiet savu ziņu...",
-        listeningIndicator: "Klausoties..."
+        listeningIndicator: "Klausoties...",
+        uploadFile: "",
+        speak: ""
     },
@@ -161,3 +179,5 @@ 'pt-br': {
         consolePlaceholder: "Digite sua mensagem...",
-        listeningIndicator: "Ouvindo..."
+        listeningIndicator: "Ouvindo...",
+        uploadFile: "",
+        speak: ""
     },
@@ -177,3 +197,5 @@ 'fr-fr': {
         consolePlaceholder: "Écrivez votre message...",
-        listeningIndicator: "Écoute..."
+        listeningIndicator: "Écoute...",
+        uploadFile: "",
+        speak: ""
     },
@@ -193,3 +215,5 @@ 'es-es': {
         consolePlaceholder: "Escribe tu mensaje...",
-        listeningIndicator: "Escuchando..."
+        listeningIndicator: "Escuchando...",
+        uploadFile: "",
+        speak: ""
     },
@@ -209,3 +233,5 @@ 'el-gr': {
         consolePlaceholder: "Πληκτρολόγηση μηνύματος...",
-        listeningIndicator: "Ακούγοντας..."
+        listeningIndicator: "Ακούγοντας...",
+        uploadFile: "",
+        speak: ""
     },
@@ -223,5 +249,7 @@ 'it-it': {
         messageSending: "invio",
-        timeSent: " il %1",
+        timeSent: " %1",
         consolePlaceholder: "Scrivi il tuo messaggio...",
-        listeningIndicator: "Ascoltando..."
+        listeningIndicator: "Ascoltando...",
+        uploadFile: "",
+        speak: ""
     },
@@ -241,3 +269,5 @@ 'zh-hans': {
         consolePlaceholder: "输入你的消息...",
-        listeningIndicator: "正在倾听..."
+        listeningIndicator: "正在倾听...",
+        uploadFile: "",
+        speak: ""
     },
@@ -257,3 +287,5 @@ 'zh-hant': {
         consolePlaceholder: "輸入你的訊息...",
-        listeningIndicator: "正在聆聽..."
+        listeningIndicator: "正在聆聽...",
+        uploadFile: "上載檔案",
+        speak: "發言"
     },
@@ -273,3 +305,5 @@ 'zh-yue': {
         consolePlaceholder: "輸入你嘅訊息...",
-        listeningIndicator: "聽緊你講嘢..."
+        listeningIndicator: "聽緊你講嘢...",
+        uploadFile: "上載檔案",
+        speak: "講嘢"
     },
@@ -289,3 +323,22 @@ 'cs-cz': {
         consolePlaceholder: "Napište svou zprávu...",
-        listeningIndicator: "Poslouchám..."
+        listeningIndicator: "Poslouchám...",
+        uploadFile: "",
+        speak: ""
+    },
+    'ko-kr': {
+        title: "채팅",
+        send: "전송",
+        unknownFile: "[파일 형식 '%1']",
+        unknownCard: "[알수없는 타입의 카드 '%1']",
+        receiptVat: "부가세",
+        receiptTax: "세액",
+        receiptTotal: "합계",
+        messageRetry: "재전송",
+        messageFailed: "전송할 수 없습니다",
+        messageSending: "전송중",
+        timeSent: " %1",
+        consolePlaceholder: "메세지를 입력하세요...",
+        listeningIndicator: "수신중...",
+        uploadFile: "",
+        speak: ""
     }
@@ -328,2 +381,6 @@ };
         locale = 'cs-cz';
+    else if (locale.startsWith('ko'))
+        locale = 'ko-kr';
+    else if (locale.startsWith('ja'))
+        locale = 'ja-jp';
     else if (locale in localizedStrings === false)
@@ -330,0 +387,0 @@ locale = 'en-us';

package.json

 {
   "name": "botframework-webchat",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "Embeddable web chat control for the Microsoft Bot Framework",
@@ -32,3 +32,3 @@ "main": "built/BotChat.js",
     "@types/react": "15.0.38",
-    "botframework-directlinejs": "0.9.12",
+    "botframework-directlinejs": "0.9.13",
     "core-js": "2.4.1",
@@ -43,3 +43,3 @@ "markdown-it": "8.3.1",
     "redux-observable": "0.13.0",
-    "rxjs": "5.3.3",
+    "rxjs": "5.4.3",
     "tslib": "1.7.1"
@@ -46,0 +46,0 @@ },

README.md

@@ -175,3 +175,3 @@ # Microsoft Bot Framework Web Chat
 
-You can alter or add localized strings in `/src/Strings.ts`:
+You can alter or add localized strings in [/src/Strings.ts](src/Strings.ts):
 
@@ -178,0 +178,0 @@ * Add one or more locales (with associated localized strings) to `localizedStrings`

No alert changes

Improved metrics

Total package byte prevSize

847788

increased by2.25%

Lines of code

4224

increased by5.13%

Dependency changes

• + Addedbotframework-directlinejs@0.9.13(transitive)

• + Addedrxjs@5.4.3(transitive)

• - Removedbotframework-directlinejs@0.9.12(transitive)

• - Removedrxjs@5.3.3(transitive)

• Updatedbotframework-directlinejs@0.9.13

• Updatedrxjs@5.4.3