@xapp/chat-widget 1.32.1 → 1.35.0-alpha.0

package/dist/index.js

@@ -1475,7 +1475,7 @@ var logOnce = function (key) {
     var map = {};
     if (!map[key]) {
         map[key] = true;
-        log(args);
+        log.apply(void 0, args);
     }
 };
 
@@ -2157,16 +2157,25 @@ var RichTextBoldSpan = function (props) {
 };
 
 var RichTextInputSpan = function (props) {
-    var format = props.format, text = props.text, readOnly = props.readOnly;
+    var format = props.format, text = props.text, readOnly = props.readOnly, onClick = props.onClick;
     var defaultValue = format.text || text.substring(format.start, format.end);
     var _a = React.useState(defaultValue), value = _a[0], setValue = _a[1];
     var handleChange = React.useCallback(function (ev) {
         setValue(ev.target.value);
     }, []);
+    var handleClick = React.useCallback(function (ev) {
+        if (onClick) {
+            var res = onClick(format);
+            if (res === false) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        }
+    }, [onClick, format]);
     if (readOnly) {
-        return (React__default["default"].createElement("span", { className: "xapp-search-rich-text-input-span xapp-search-rich-text-input-span--readonly" }, defaultValue));
+        return (React__default["default"].createElement("span", { className: "xapp-search-rich-text-input-span xapp-search-rich-text-input-span--readonly", onClick: handleClick }, defaultValue));
     }
-    return (React__default["default"].createElement("input", { type: "text", value: value, className: "xapp-search-rich-text-input-span", "data-rich-text-type": "inputText", onChange: handleChange, readOnly: readOnly }));
+    return (React__default["default"].createElement("input", { type: "text", value: value, className: "xapp-search-rich-text-input-span", "data-rich-text-type": "inputText", onChange: handleChange, onClick: handleClick, readOnly: readOnly }));
 };
 
 var RichTextNormalSpan = function (props) {
@@ -2175,7 +2184,7 @@ var RichTextNormalSpan = function (props) {
 };
 
 var RichTextSpan = function (props) {
-    var format = props.format, text = props.text, readOnly = props.readOnly;
+    var format = props.format, text = props.text, readOnly = props.readOnly, onClick = props.onClick;
     var type = format.type;
     switch (type) {
         case "normal":
@@ -2183,7 +2192,7 @@ var RichTextSpan = function (props) {
         case "bold":
             return (React__default["default"].createElement(RichTextBoldSpan, { text: text, format: format, readOnly: readOnly }));
         case "inputText":
-            return (React__default["default"].createElement(RichTextInputSpan, { text: text, format: format, readOnly: readOnly }));
+            return (React__default["default"].createElement(RichTextInputSpan, { text: text, format: format, readOnly: readOnly, onClick: onClick }));
         default:
             throwBadKind(type);
     }
@@ -2310,7 +2319,7 @@ function cleanContent(node) {
     }
 }
 var RichText = function (props) {
-    var value = props.value, className = props.className, readOnly = props.readOnly, onInput = props.onInput, onChange = props.onChange;
+    var value = props.value, className = props.className, readOnly = props.readOnly, onInput = props.onInput, onChange = props.onChange, onSpanClick = props.onSpanClick;
     var formatsRaw = value.formats, text = value.text;
     var formats = React.useMemo(function () { return extendFormat(formatsRaw, text.length); }, [formatsRaw, text.length]);
     var handleInput = React.useCallback(function (ev) {
@@ -2328,7 +2337,7 @@ var RichText = function (props) {
             onChange(newValue);
         }
     }, [onChange]);
-    return (React__default["default"].createElement("div", { id: props.id, className: "xapp-search-rich-text ".concat(className || ""), contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onBlur: handleBlur }, formats.map(function (format, index) { return (React__default["default"].createElement(RichTextSpan, { format: format, text: text, key: index, readOnly: readOnly })); })));
+    return (React__default["default"].createElement("div", { id: props.id, className: "xapp-search-rich-text ".concat(className || ""), contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onBlur: handleBlur, onKeyDown: props.onKeyDown }, formats.map(function (format, index) { return (React__default["default"].createElement(RichTextSpan, { key: index, format: format, text: text, readOnly: readOnly, onClick: onSpanClick })); })));
 };
 
 var RichInput = function (props) {
@@ -2382,7 +2391,7 @@ var RichInput = function (props) {
         return undefined;
     }, [inputNode, onSearch]);
     return (React__default["default"].createElement("div", { className: "xappw-rich-input ".concat(props.className) }, rich ?
-        React__default["default"].createElement(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, className: "xappw-rich-input__input ".concat(props.className, "__input") }) : React__default["default"].createElement("input", { id: id, ref: inputRef, type: type, value: value.text, autoFocus: autoFocus, placeholder: props.placeholder, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })));
+        React__default["default"].createElement(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") }) : React__default["default"].createElement("input", { id: id, ref: inputRef, type: type, value: value.text, autoFocus: autoFocus, placeholder: props.placeholder, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })));
 };
 
 var SuggestionsGroupHeading = function (props) {
@@ -2397,7 +2406,7 @@ function getScrollContainer(node) {
     return walker || undefined;
 }
 var SuggestionsItem = function (props) {
-    var data = props.data, current = props.current, ActionsComponent = props.actions, onClick = props.onClick, onHover = props.onHover;
+    var data = props.data, current = props.current, ActionsComponent = props.actions, onClick = props.onClick, onHover = props.onHover, onSpanClick = props.onSpanClick;
     var handleClick = React.useCallback(function () {
         onClick(data);
     }, [data, onClick]);
@@ -2406,6 +2415,12 @@ var SuggestionsItem = function (props) {
             onHover(data);
         }
     }, [data, onHover]);
+    var handleSpanClick = React.useCallback(function (span) {
+        if (onSpanClick) {
+            return onSpanClick(data, span);
+        }
+        return undefined;
+    }, [onSpanClick, data]);
     var ref = React.useRef(null);
     React.useEffect(function () {
         var node = ref.current;
@@ -2425,7 +2440,7 @@ var SuggestionsItem = function (props) {
         }
     }, [current]);
     return (React__default["default"].createElement("div", { ref: ref, className: "xappw-suggestions-item ".concat(current ? "xappw-suggestions-item--current" : ""), onClick: handleClick, onMouseEnter: handleHover },
-        React__default["default"].createElement(RichText, { value: data, className: "xappw-suggestions-item__texts", readOnly: true }),
+        React__default["default"].createElement(RichText, { value: data, className: "xappw-suggestions-item__texts", readOnly: true, onSpanClick: handleSpanClick }),
         ActionsComponent &&
             React__default["default"].createElement("div", { className: "xappw-suggestions-item__actions" },
                 React__default["default"].createElement(ActionsComponent, { data: data, current: current }))));
@@ -2438,7 +2453,7 @@ var SuggestionsGroup = function (props) {
         React__default["default"].createElement("div", { className: "xappw-suggestions-group__heading" },
             React__default["default"].createElement(SuggestionsGroupHeading, { label: heading })),
         React__default["default"].createElement("div", { className: "xappw-suggestions-group__items" }, items.map(function (item, itemIndex) {
-            return React__default["default"].createElement(SuggestionsItem, { key: itemIndex, data: item, current: currentIndex === itemIndex, actions: itemActions, onClick: props.onItemClick, onHover: props.onItemHover });
+            return React__default["default"].createElement(SuggestionsItem, { key: itemIndex, data: item, current: currentIndex === itemIndex, actions: itemActions, onClick: props.onItemClick, onHover: props.onItemHover, onSpanClick: props.onSpanClick });
         }))));
 };
 
@@ -2452,7 +2467,7 @@ var SuggestionsList = function (props) {
     var currentIndex = length >= 0 ? props.index : NaN;
     var indexWalker = 0;
     return (React__default["default"].createElement("div", { className: "xappw-suggestions-list ".concat(className || "") }, suggestions.map(function (group, index) {
-        var res = (React__default["default"].createElement(SuggestionsGroup, { key: index, group: group, currentIndex: currentIndex - indexWalker, itemActions: itemActions, onItemClick: props.onItemClick, onItemHover: props.onItemHover }));
+        var res = (React__default["default"].createElement(SuggestionsGroup, { key: index, group: group, currentIndex: currentIndex - indexWalker, itemActions: itemActions, onItemClick: props.onItemClick, onItemHover: props.onItemHover, onSpanClick: props.onSpanClick }));
         indexWalker += group.items.length;
         return res;
     })));
@@ -2947,115 +2962,111 @@ function getPermissionResponse(botResponse, now) {
 }
 
 var PERMISSION_QUESTION_EXPIRATION_MS = 300000; // 5 minutes
+// interface UserLeaveMessage {
+//     readonly user: ChatUserInfo;
+//     readonly token: string; //todo: what is this
+// }
 var StentorDirectChat = /** @class */ (function () {
-    function StentorDirectChat(config) {
-        var _this = this;
+    function StentorDirectChat(config, options) {
         this._userId = "";
         this._sessionId = "";
-        /*
-         *   FROM STENTOR TO WIDGET
-         */
-        this.widget = {
-            setConnectionStatus: function (status) {
-                log("SERVER: connection_update: ".concat(JSON.stringify(status)));
-                _this.dispatch(setConnectionStatus(status));
-            },
-            setAccountStatus: function (status) {
-                log("SERVER: account_status: ".concat(JSON.stringify(status)));
-                _this.dispatch(setAccountStatus(status));
-            },
-            sendNewMessage: function (data) {
-                log("SERVER: new message: ".concat(JSON.stringify(data)));
-                _this.dispatch({
-                    type: "chat",
-                    detail: {
-                        type: "chat.msg",
-                        user: __assign(__assign({}, data.user), { nick: "agent:robot" }),
-                        msg: data.msg,
-                        timestamp: +new Date()
-                    }
-                });
-            },
-            userJoined: function (data) {
-                log("SERVER: user joined: ".concat(JSON.stringify(data)));
-                _this.visitorInfo.token = data.token;
-                _this.dispatch({
-                    type: "chat",
-                    detail: {
-                        type: "chat.memberjoin",
-                        user: __assign(__assign({}, data.user), { nick: "agent:robot" }),
-                        timestamp: +new Date(),
-                    }
-                });
-            },
-            userLeft: function (data) {
-                log("SERVER: user left: ".concat(JSON.stringify(data)));
-                _this.dispatch({
-                    type: "chat",
-                    detail: {
-                        type: "chat.memberleave",
-                        user: __assign(__assign({}, data.user), { nick: "agent:robot" }),
-                        timestamp: +new Date()
-                    }
-                });
-            },
-            typing: function () {
-                _this.dispatch({
-                    type: "chat",
-                    detail: {
-                        type: "chat.typing",
-                        user: {
-                            nick: "agent:robot",
-                        },
-                        typing: true,
-                        timestamp: +new Date()
-                    }
-                });
-            },
-            stopTyping: function () {
-                _this.dispatch({
-                    type: "chat",
-                    detail: {
-                        type: "chat.typing",
-                        user: {
-                            nick: "agent:robot",
-                        },
-                        typing: false,
-                        timestamp: +new Date()
-                    }
-                });
-            },
-            disconnect: function () {
-                log("SERVER: disconnect");
-                _this.dispatch(setAccountStatus("offline"));
-                _this.dispatch(setConnectionStatus("offline"));
-            },
-            reconnect: function () {
-                log("SERVER: reconnect");
-                _this.dispatch(setAccountStatus("online"));
-            },
-            reconnectError: function () {
-                log("SERVER: reconnect error");
-                _this.dispatch(setAccountStatus("offline"));
-            }
-        };
         this.config = config;
+        this.options = options;
         this.isNewSession = false;
     }
-    StentorDirectChat.prototype.getAvatarPath = function () {
-        return this.avatarPath;
-    };
     StentorDirectChat.prototype.init = function (dispatch) {
         this.dispatch = dispatch;
         // TODO: Authenticate - or at least tell the server who you are
         log("got init auth: ".concat(this.config.key));
         // We are connected
-        this.widget.setConnectionStatus("online");
-        this.widget.setAccountStatus("online");
+        this.setConnectionStatus("online");
+        this.setAccountStatus("online");
     };
-    /*
-     *   FROM WIDGET TO STENTOR
-     */
+    StentorDirectChat.prototype.setConnectionStatus = function (status) {
+        log("SERVER: connection_update: ".concat(JSON.stringify(status)));
+        this.dispatch(setConnectionStatus(status));
+    };
+    StentorDirectChat.prototype.setAccountStatus = function (status) {
+        log("SERVER: account_status: ".concat(JSON.stringify(status)));
+        this.dispatch(setAccountStatus(status));
+    };
+    StentorDirectChat.prototype.sendNewMessage = function (data) {
+        log("SERVER: new message: ".concat(JSON.stringify(data)));
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.msg",
+                user: __assign(__assign({}, data.user), { nick: "agent:robot" }),
+                msg: data.msg,
+                timestamp: +new Date()
+            }
+        });
+    };
+    StentorDirectChat.prototype.userJoined = function (data) {
+        log("SERVER: user joined: ".concat(JSON.stringify(data)));
+        this.visitorInfo.token = data.token;
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.memberjoin",
+                user: __assign(__assign({}, data.user), { nick: "agent:robot" }),
+                timestamp: +new Date(),
+            }
+        });
+    };
+    // private userLeft(data: UserLeaveMessage) {
+    //     log(`SERVER: user left: ${JSON.stringify(data)}`);
+    //     this.dispatch({
+    //         type: "chat",
+    //         detail: {
+    //             type: "chat.memberleave",
+    //             user: {
+    //                 ...data.user,
+    //                 nick: "agent:robot",//todo: why change nick?
+    //             },
+    //             timestamp: +new Date()
+    //         }
+    //     });
+    // }
+    StentorDirectChat.prototype.typing = function () {
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.typing",
+                user: {
+                    nick: "agent:robot",
+                },
+                typing: true,
+                timestamp: +new Date()
+            }
+        });
+    };
+    StentorDirectChat.prototype.stopTyping = function () {
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.typing",
+                user: {
+                    nick: "agent:robot",
+                },
+                typing: false,
+                timestamp: +new Date()
+            }
+        });
+    };
+    // private disconnect() {
+    //     log("SERVER: disconnect");
+    //     this.dispatch(setAccountStatus("offline"));
+    //     this.dispatch(setConnectionStatus("offline"));
+    // }
+    // private reconnect() {
+    //     log("SERVER: reconnect");
+    //     this.dispatch(setAccountStatus("online"));
+    // }
+    // private reconnectError() {
+    //     log("SERVER: reconnect error");
+    //     this.dispatch(setAccountStatus("offline"));
+    // }
     StentorDirectChat.prototype.sendOfflineMsg = function (_, cb) {
         cb();
     };
@@ -3072,6 +3083,17 @@ var StentorDirectChat = /** @class */ (function () {
             });
         });
     };
+    StentorDirectChat.prototype.getBot = function (user) {
+        var _a;
+        var bot = (_a = this.options) === null || _a === void 0 ? void 0 : _a.bot;
+        if (!user) {
+            return bot;
+        }
+        if (user.displayName && user.nick && user.avatarPath) {
+            return user;
+        }
+        return __assign(__assign({}, user), { nick: user.nick || bot.nick || "Bot", displayName: user.displayName || bot.displayName || "Bot", avatarPath: user.avatarPath || bot.avatarPath });
+    };
     StentorDirectChat.prototype.sendChatMsgRequest = function (serviceRequest, cb) {
         var _a;
         return __awaiter$1(this, void 0, void 0, function () {
@@ -3082,9 +3104,9 @@ var StentorDirectChat = /** @class */ (function () {
                     case 1:
                         agentResponse = _b.sent();
                         if (!((_a = agentResponse.user) === null || _a === void 0 ? void 0 : _a.displayName)) {
-                            agentResponse = __assign(__assign({}, agentResponse), { user: __assign(__assign({}, agentResponse.user), { displayName: "Bot" }) });
+                            agentResponse = __assign(__assign({}, agentResponse), { user: this.getBot(agentResponse.user) });
                         }
-                        this.widget.sendNewMessage(agentResponse);
+                        this.sendNewMessage(agentResponse);
                         cb();
                         return [2 /*return*/];
                 }
@@ -3096,12 +3118,8 @@ var StentorDirectChat = /** @class */ (function () {
     StentorDirectChat.prototype.setVisitorInfo = function (visitorInfo, cb) {
         this.visitorInfo = visitorInfo;
         this.startSession();
-        this.widget.userJoined({
-            user: {
-                displayName: "Bot",
-                nick: "Bot",
-                avatarPath: this.getAvatarPath()
-            },
+        this.userJoined({
+            user: this.getBot(undefined),
             token: ""
         });
         cb();
@@ -3210,7 +3228,7 @@ var StentorDirectChat = /** @class */ (function () {
                         }
                         log("Visitor says: ".concat(JSON.stringify(request, undefined, 2)));
                         // Bot is "typing"
-                        this.widget.typing();
+                        this.typing();
                         return [4 /*yield*/, postMessageToStentor(request, this.config.url, this.config.key).catch(function (postError) {
                                 err("POST failed: ".concat(postError.message));
                                 return {
@@ -3220,7 +3238,7 @@ var StentorDirectChat = /** @class */ (function () {
                     case 1:
                         botResponse = _e.sent();
                         // Bot stopped "typing"
-                        this.widget.stopTyping();
+                        this.stopTyping();
                         log("Bot says: ".concat(JSON.stringify(botResponse, undefined, 2)));
                         // Now translate the response to server dialect
                         // new session no more
@@ -6618,9 +6636,11 @@ Object.assign(lookup, {
 });
 
 var StentorServerChat = /** @class */ (function () {
-    function StentorServerChat(config) {
+    // private readonly options: ChatServerOptions | undefined;
+    function StentorServerChat(config, options) {
         this.config = config;
-        this.token = config.token;
+        // this.options = options;
+        this.token = options.token;
     }
     StentorServerChat.prototype.init = function (dispatch) {
         var _this = this;
@@ -6780,40 +6800,38 @@ var StentorServerChat = /** @class */ (function () {
     return StentorServerChat;
 }());
 
-function createChatServerCore(config, token) {
+function createChatServerCore(config, options) {
     switch (config.type) {
         case "direct":
             return new StentorDirectChat({
                 url: config.serverUrl,
                 key: config.accountKey
-            });
+            }, options);
         case "websocket":
             return new StentorServerChat({
-                url: config.serverUrl,
-                token: token
-            });
+                url: config.serverUrl
+            }, options);
         case "local":
             return new StentorLocalChat();
         default:
             throw throwBadKind$1(config.type);
     }
 }
-function createChatServer(config, token) {
-    return new LogChat(createChatServerCore(config, token));
+function createChatServer(config, options) {
+    return new LogChat(createChatServerCore(config, options));
 }
 var ChatServerContext = React$1.createContext(null);
-function useChatServer(config) {
+function useChatServer(config, options) {
     var _a = React$1.useState(), server = _a[0], setServer = _a[1];
-    var token = reactRedux.useSelector(function (state) { return state.connection.token; });
     var dispatch = useChatDispatch();
     React$1.useEffect(function () {
-        var newServer = createChatServer(config, token);
+        var newServer = createChatServer(config, options);
         newServer.init(dispatch);
         setServer(newServer);
         return function () {
             newServer.dispose();
         };
-    }, [token, config, dispatch]);
+    }, [options, config, dispatch]);
     return server;
 }
 
@@ -7199,7 +7217,7 @@ var MultiSelect = function (props) {
         var id = ev.target.value;
         onChange(__assign(__assign({}, checked), (_a = {}, _a[id] = !checked[id], _a)));
     }, [checked, onChange]);
-    return (React__default$1["default"].createElement("ul", { className: "xappw-multiselect" }, items.map(function (item) { return (React__default$1["default"].createElement("li", { key: item.id },
+    return (React__default$1["default"].createElement("ul", { className: "xappw-multiselect" }, items === null || items === void 0 ? void 0 : items.map(function (item) { return (React__default$1["default"].createElement("li", { key: item.id },
         React__default$1["default"].createElement("label", null,
             React__default$1["default"].createElement("input", { type: "checkbox", checked: checked[item.id] || false, onChange: handleToggle, value: item.id }),
             React__default$1["default"].createElement("span", null, item.title)))); })));
@@ -7705,6 +7723,13 @@ var Suggestions = function (props) {
     var currentIndex = len > 0 ? props.index : NaN;
     var _a = React$1.useState(), activeItem = _a[0], setActiveItem = _a[1];
     var item = React$1.useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
+    var handleSpanClick = React$1.useCallback(function (target, span) {
+        if (span.type === "inputText") {
+            onItemUse(target);
+            return false;
+        }
+        return undefined;
+    }, [onItemUse]);
     React$1.useEffect(function () {
         setActiveItem(item);
     }, [item]);
@@ -7712,7 +7737,7 @@ var Suggestions = function (props) {
     return (React__default$1["default"].createElement("div", { className: "xappw-suggestions ".concat(props.className || "") },
         (activeItem === null || activeItem === void 0 ? void 0 : activeItem.content) && React__default$1["default"].createElement("div", { className: "xappw-suggestions__answer" }, activeItem.content),
         !!data.length &&
-            React__default$1["default"].createElement(SuggestionsList_1, { suggestions: data, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem })));
+            React__default$1["default"].createElement(SuggestionsList_1, { suggestions: data, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem, onSpanClick: handleSpanClick })));
 };
 
 var ChatFooter = function (props) {
@@ -7970,9 +7995,9 @@ var QueuePosition = function (props) {
 function getMessageByType(msg) {
     switch (msg.type) {
         case "chat.memberjoin":
-            return "".concat(msg.user.displayName, " has joined the chat");
+            return "".concat(msg.user.displayName || "Bot", " has joined the chat");
         case "chat.memberleave":
-            return "".concat(msg.user.displayName, " has left the chat");
+            return "".concat(msg.user.displayName || "Bot", " has left the chat");
         case "chat.rating":
             if (!msg.newRating) {
                 return "You have removed the chat rating";
@@ -8036,7 +8061,7 @@ var MessageList = function (props) {
     var messagesEndRef = React$1.useRef(null);
     React$1.useEffect(function () {
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }, [props.messages]);
+    }, [props.messages, props.agents]);
     var handleSend = React$1.useCallback(function (msg) {
         onSend(msg);
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -8401,7 +8426,18 @@ var ChatWidgetWrapper = function (props) {
         var _a;
         return (__assign(__assign({}, rawConfig), { connection: connection, assetUrl: (_a = connection === null || connection === void 0 ? void 0 : connection.serverUrl) !== null && _a !== void 0 ? _a : defaultServerUrl, env: rawConfig }));
     }, [connection, rawConfig]);
-    var chatServer = useChatServer(connection);
+    var token = reactRedux.useSelector(function (state) { return state.connection.token; });
+    var options = React$1.useMemo(function () {
+        return {
+            token: token,
+            bot: {
+                nick: "Bot",
+                displayName: rawConfig.botName,
+                avatarPath: rawConfig.avatarUrl
+            }
+        };
+    }, [token, rawConfig]);
+    var chatServer = useChatServer(connection, options);
     return (React__default$1["default"].createElement(ChatConfigContext.Provider, { value: config },
         React__default$1["default"].createElement(ChatServerContext.Provider, { value: chatServer },
             React__default$1["default"].createElement(ChatWidget, __assign({}, props)))));
@@ -8631,7 +8667,7 @@ function memberJoin(state, detail) {
     var _a;
     if (isAgent(detail.user.nick)) {
         var prevAgentInfo = state.agents[detail.user.nick];
-        return __assign(__assign({}, state), { isChatting: true, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? state.chats : joinMessages(state.chats, detail), agents: (_a = {},
+        return __assign(__assign({}, state), { isChatting: true, chats: (prevAgentInfo === null || prevAgentInfo === void 0 ? void 0 : prevAgentInfo.joined) ? joinMessages([], detail) : joinMessages(state.chats, detail), agents: (_a = {},
                 _a[detail.user.nick] = __assign(__assign({}, prevAgentInfo), { user: __assign(__assign({}, detail.user), { displayName: detail.user.displayName || "Agent" }), joined: true, typing: false }),
                 _a) });
     }