powr-sdk-web 5.4.0 → 5.4.2

package/dist/chat/index.js

@@ -35,6 +35,11 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
     apiUrl = _ref.apiUrl,
     projectGroupName = _ref.projectGroupName,
     participantIds = _ref.participantIds,
+    _ref$projects = _ref.projects,
+    projects = _ref$projects === void 0 ? [] : _ref$projects,
+    _ref$selectedProject = _ref.selectedProject,
+    selectedProject = _ref$selectedProject === void 0 ? null : _ref$selectedProject,
+    onProjectChange = _ref.onProjectChange,
     onMessageSent = _ref.onMessageSent,
     onConversationCreated = _ref.onConversationCreated,
     onError = _ref.onError,
@@ -76,10 +81,14 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     showNewChat = _useState14[0],
     setShowNewChat = _useState14[1];
-  var _useState15 = (0, _react.useState)([]),
+  var _useState15 = (0, _react.useState)('chat'),
     _useState16 = _slicedToArray(_useState15, 2),
-    users = _useState16[0],
-    setUsers = _useState16[1];
+    newChatTab = _useState16[0],
+    setNewChatTab = _useState16[1];
+  var _useState17 = (0, _react.useState)([]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    users = _useState18[0],
+    setUsers = _useState18[1];
   var messagesEndRef = (0, _react.useRef)(null);
   var pollingInterval = (0, _react.useRef)(undefined);
   var hasSelectedProjectGroup = (0, _react.useRef)(false);
@@ -99,45 +108,51 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
       return _regenerator().w(function (_context) {
         while (1) switch (_context.n) {
           case 0:
-            _context.p = 0;
-            _context.n = 1;
-            return (0, _auth.apiCall)(apiUrl, "/chat/conversations", projectId);
+            if (!(!projectId || !apiUrl)) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
           case 1:
+            _context.p = 1;
+            _context.n = 2;
+            return (0, _auth.apiCall)(apiUrl, "/chat/conversations", projectId);
+          case 2:
             _yield$apiCall = _context.v;
             data = _yield$apiCall.data;
             ok = _yield$apiCall.ok;
             if (!(ok && data.success && Array.isArray(data.data))) {
-              _context.n = 5;
+              _context.n = 6;
               break;
             }
             convos = data.data; // Ensure project group exists when projectGroupName + participantIds provided
             if (!(projectGroupName && participantIds !== null && participantIds !== void 0 && participantIds.length && projectId)) {
-              _context.n = 4;
+              _context.n = 5;
               break;
             }
-            _context.n = 2;
+            _context.n = 3;
             return ensureProjectGroup();
-          case 2:
+          case 3:
             groupId = _context.v;
             if (!groupId) {
-              _context.n = 4;
+              _context.n = 5;
               break;
             }
             hasGroup = convos.some(function (c) {
               return c.id === groupId;
             });
             if (hasGroup) {
-              _context.n = 4;
+              _context.n = 5;
               break;
             }
-            _context.n = 3;
+            _context.n = 4;
             return (0, _auth.apiCall)(apiUrl, "/chat/conversations", projectId);
-          case 3:
+          case 4:
             refetch = _context.v;
             if (refetch.ok && (_refetch$data = refetch.data) !== null && _refetch$data !== void 0 && _refetch$data.success && Array.isArray((_refetch$data2 = refetch.data) === null || _refetch$data2 === void 0 ? void 0 : _refetch$data2.data)) {
               convos = refetch.data.data;
             }
-          case 4:
+          case 5:
             setConversations(convos);
             // Default to project group on first load when available
             if (projectGroupName && !hasSelectedProjectGroup.current) {
@@ -149,23 +164,23 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
                 hasSelectedProjectGroup.current = true;
               }
             }
-            _context.n = 6;
+            _context.n = 7;
             break;
-          case 5:
-            setConversations([]);
           case 6:
-            _context.n = 8;
-            break;
+            setConversations([]);
           case 7:
-            _context.p = 7;
+            _context.n = 9;
+            break;
+          case 8:
+            _context.p = 8;
             _t = _context.v;
             console.error('Error fetching conversations:', _t);
             setConversations([]);
             onError === null || onError === void 0 || onError(_t);
-          case 8:
+          case 9:
             return _context.a(2);
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[1, 8]]);
     }));
     return function fetchConversations() {
       return _ref2.apply(this, arguments);
@@ -179,11 +194,17 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
           case 0:
-            _context2.p = 0;
+            if (!(!projectId || !apiUrl)) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            _context2.p = 1;
             console.log('Fetching users...');
-            _context2.n = 1;
+            _context2.n = 2;
             return (0, _auth.apiCall)(apiUrl, "/chat/users", projectId);
-          case 1:
+          case 2:
             _yield$apiCall2 = _context2.v;
             data = _yield$apiCall2.data;
             ok = _yield$apiCall2.ok;
@@ -194,18 +215,18 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
               console.error('Invalid users data:', data);
               setUsers([]);
             }
-            _context2.n = 3;
+            _context2.n = 4;
             break;
-          case 2:
-            _context2.p = 2;
+          case 3:
+            _context2.p = 3;
             _t2 = _context2.v;
             console.error('Error fetching users:', _t2);
             setUsers([]);
             onError === null || onError === void 0 || onError(_t2);
-          case 3:
+          case 4:
             return _context2.a(2);
         }
-      }, _callee2, null, [[0, 2]]);
+      }, _callee2, null, [[1, 3]]);
     }));
     return function fetchUsers() {
       return _ref3.apply(this, arguments);
@@ -424,20 +445,22 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
     }
   }, [selectedChat]);
 
-  // Initial load of conversations
+  // Initial load of conversations; reset project group selection when project changes
   (0, _react.useEffect)(function () {
-    fetchConversations();
-  }, []);
+    hasSelectedProjectGroup.current = false;
+    if (projectId && apiUrl) fetchConversations();
+  }, [projectId]);
 
   // Poll for new conversations every 30 seconds
   (0, _react.useEffect)(function () {
+    if (!projectId || !apiUrl) return;
     var conversationPolling = setInterval(function () {
       fetchConversations();
     }, 30000);
     return function () {
       return clearInterval(conversationPolling);
     };
-  }, []);
+  }, [projectId]);
   var filteredConversations = Array.isArray(conversations) ? conversations.filter(function (conv) {
     return (conv.name || '').toLowerCase().includes((searchQuery || '').toLowerCase());
   }) : [];
@@ -626,9 +649,27 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
     style: styles.sidebar
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.header
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: '12px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("h2", {
-    style: styles.title
-  }, "Messages"), /*#__PURE__*/_react["default"].createElement("input", {
+    style: _objectSpread(_objectSpread({}, styles.title), {}, {
+      margin: 0
+    })
+  }, "Messages"), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      if (!showNewChat) fetchUsers();
+      setShowNewChat(true);
+    },
+    style: _objectSpread(_objectSpread({}, styles.sendButton), {}, {
+      padding: '8px 14px',
+      fontSize: '13px'
+    })
+  }, "New Chat")), /*#__PURE__*/_react["default"].createElement("input", {
     type: "text",
     placeholder: "Search conversations...",
     value: searchQuery,
@@ -636,51 +677,125 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
       return setSearchQuery(e.target.value);
     },
     style: styles.searchInput
-  }), /*#__PURE__*/_react["default"].createElement("button", {
-    onClick: function onClick() {
-      if (!showNewChat) {
-        fetchUsers(); // Load users only when opening new chat
-      }
-      setShowNewChat(!showNewChat);
-    },
-    style: _objectSpread(_objectSpread({}, styles.sendButton), {}, {
-      marginTop: '12px',
-      width: '100%'
-    })
-  }, showNewChat ? 'Cancel' : 'New Chat')), /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.conversationList
   }, showNewChat && /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      padding: '16px',
-      borderBottom: '1px solid #e5e7eb'
+      position: 'fixed',
+      inset: 0,
+      zIndex: 50,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    onClick: function onClick() {
+      return setShowNewChat(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: '#fff',
+      borderRadius: '8px',
+      padding: '24px',
+      maxWidth: '28rem',
+      maxHeight: '80vh',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)'
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '16px'
     }
   }, /*#__PURE__*/_react["default"].createElement("h3", {
     style: {
-      fontSize: '16px',
-      fontWeight: '600',
-      margin: '0 0 12px 0'
+      margin: 0,
+      fontSize: '18px',
+      fontWeight: 600
+    }
+  }, "New Chat"), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      return setShowNewChat(false);
+    },
+    style: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      fontSize: '20px',
+      fontWeight: 300
     }
-  }, "Start a new conversation"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, "\xD7")), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       display: 'flex',
-      flexDirection: 'column',
-      gap: '8px'
+      gap: '4px',
+      marginBottom: '16px'
     }
-  }, users.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      return setNewChatTab('chat');
+    },
+    style: {
+      flex: 1,
+      padding: '8px 12px',
+      border: 'none',
+      borderRadius: '6px',
+      cursor: 'pointer',
+      fontWeight: 500,
+      backgroundColor: newChatTab === 'chat' ? '#eff6ff' : '#f3f4f6',
+      color: newChatTab === 'chat' ? '#1d4ed8' : '#6b7280'
+    }
+  }, "Direct message"), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      return setNewChatTab('project');
+    },
+    style: {
+      flex: 1,
+      padding: '8px 12px',
+      border: 'none',
+      borderRadius: '6px',
+      cursor: 'pointer',
+      fontWeight: 500,
+      backgroundColor: newChatTab === 'project' ? '#eff6ff' : '#f3f4f6',
+      color: newChatTab === 'project' ? '#1d4ed8' : '#6b7280'
+    }
+  }, "Project")), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      flex: 1,
+      overflowY: 'auto',
+      maxHeight: '50vh'
+    }
+  }, newChatTab === 'chat' && (projectId ? users.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       textAlign: 'center',
       color: '#6b7280',
-      padding: '20px'
+      padding: '24px',
+      fontSize: '14px'
     }
   }, /*#__PURE__*/_react["default"].createElement("p", null, "No users available"), /*#__PURE__*/_react["default"].createElement("p", {
     style: {
-      fontSize: '12px'
+      fontSize: '12px',
+      marginTop: '4px'
+    }
+  }, "Select a project first or add users to your project")) : /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px'
     }
-  }, "Make sure you have other users registered in the system")) : users.map(function (user) {
+  }, users.map(function (user) {
     var _user$name;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: user.id,
-      style: _objectSpread(_objectSpread({}, styles.conversationItem), styles.conversationItemHover),
+      style: _objectSpread(_objectSpread(_objectSpread({}, styles.conversationItem), styles.conversationItemHover), {}, {
+        padding: '12px'
+      }),
       onClick: function onClick() {
         return createConversation(user.id);
       }
@@ -699,26 +814,81 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: '#ffffff',
-        fontWeight: '600',
+        color: '#fff',
+        fontWeight: 600,
         fontSize: '14px'
       }
     }, (_user$name = user.name) === null || _user$name === void 0 ? void 0 : _user$name.split(' ').map(function (n) {
       return n[0];
     }).join('')), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
       style: {
-        margin: '0',
-        fontWeight: '500',
+        margin: 0,
+        fontWeight: 500,
         fontSize: '14px'
       }
     }, user.name), /*#__PURE__*/_react["default"].createElement("p", {
       style: {
-        margin: '0',
+        margin: 0,
         fontSize: '12px',
         color: '#6b7280'
       }
     }, user.username))));
-  }))), filteredConversations.map(function (conversation) {
+  })) : /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      textAlign: 'center',
+      color: '#6b7280',
+      padding: '24px',
+      fontSize: '14px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("p", null, "Select a project first"))), newChatTab === 'project' && ((projects === null || projects === void 0 ? void 0 : projects.length) > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px'
+    }
+  }, projects.map(function (project) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: project._id,
+      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles.conversationItem), styles.conversationItemHover), (selectedProject === null || selectedProject === void 0 ? void 0 : selectedProject._id) === project._id ? styles.conversationItemSelected : {}), {}, {
+        padding: '12px'
+      }),
+      onClick: function onClick() {
+        onProjectChange === null || onProjectChange === void 0 || onProjectChange(project);
+        setShowNewChat(false);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '8px',
+        backgroundColor: '#10b981',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#fff',
+        fontSize: '18px'
+      }
+    }, "\uD83D\uDC65"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        margin: 0,
+        fontWeight: 500,
+        fontSize: '14px'
+      }
+    }, project.name))));
+  })) : /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      textAlign: 'center',
+      color: '#6b7280',
+      padding: '24px',
+      fontSize: '14px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("p", null, "No projects available")))))), filteredConversations.map(function (conversation) {
     var _conversation$name;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: conversation.id,
@@ -885,7 +1055,32 @@ var PowrBaseChat = function PowrBaseChat(_ref) {
     onClick: handleSendMessage,
     disabled: sending || !message.trim(),
     style: _objectSpread(_objectSpread({}, styles.sendButton), sending || !message.trim() ? styles.sendButtonDisabled : {})
-  }, sending ? 'Sending...' : 'Send'))) :
+  }, sending ? 'Sending...' : 'Send'))) : projects !== null && projects !== void 0 && projects.length && !selectedProject ?
+  /*#__PURE__*/
+  /* No project selected - prompt to select */
+  _react["default"].createElement("div", {
+    style: styles.emptyState
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: '48px',
+      marginBottom: '16px'
+    }
+  }, "\uD83D\uDC65"), /*#__PURE__*/_react["default"].createElement("h3", {
+    style: {
+      margin: '0 0 8px 0',
+      fontSize: '18px',
+      fontWeight: '600'
+    }
+  }, "Select a project"), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      margin: '0',
+      fontSize: '14px'
+    }
+  }, "Click \"Select project\" in the sidebar to choose a project and start chatting"))) :
   /*#__PURE__*/
   /* Empty State */
   _react["default"].createElement("div", {
@@ -917,6 +1112,12 @@ PowrBaseChat.propTypes = {
   apiUrl: _propTypes["default"].string,
   projectGroupName: _propTypes["default"].string,
   participantIds: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  projects: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    _id: _propTypes["default"].string,
+    name: _propTypes["default"].string
+  })),
+  selectedProject: _propTypes["default"].object,
+  onProjectChange: _propTypes["default"].func,
   onMessageSent: _propTypes["default"].func,
   onConversationCreated: _propTypes["default"].func,
   onError: _propTypes["default"].func,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "5.4.0",
+    "version": "5.4.2",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",