Merge branch 'RocketChat:develop' into develop

.github/pull_request_template.md

@@ -9,3 +9,7 @@
 Fixes # (issue)
 
 ## Video/Screenshots
+
+## PR Test Details
+
+**Note**: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-<pr_number> after approval. Contributors are requested to replace `<pr_number>` with the actual PR number.

.github/workflows/build-and-lint.yml

@@ -34,7 +34,7 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install
 
       - name: Format check
         run: yarn format:check

.github/workflows/build-pr.yml

@@ -0,0 +1,65 @@
+name: Build PR-Preview
+
+on:
+  pull_request_review:
+    types: submitted
+
+concurrency:
+  group: ${{github.workflow}}-${{github.ref}}
+  cancel-in-progress: true
+
+env:
+  LAYOUT_EDITOR_BASE_URL: "/EmbeddedChat/pulls/pr-${{github.event.pull_request.number}}/layout_editor"
+  DOCS_BASE_URL: "/EmbeddedChat/pulls/pr-${{github.event.pull_request.number}}/docs"
+  STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat"
+
+jobs:
+  build:
+    if: github.event.review.state == 'approved' && (github.event.review.author_association == 'COLLABORATOR' || github.event.review.author_association == 'OWNER')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "16.19.0"
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Build packages
+        run: yarn build && yarn build:storybook
+
+      - name: Setup Node.js for Docs
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18.x"
+
+      - name: "Install dependencies for docs"
+        run: yarn install
+        working-directory: packages/docs/
+
+      - name: Build Docs
+        run: yarn build
+        working-directory: packages/docs/
+
+      - name: Prepare Build Folder
+        run: |
+          mkdir -p build/pulls/pr-${{github.event.pull_request.number}}/
+          mkdir -p build/pulls/pr-${{github.event.pull_request.number}}/ui-elements
+          mkdir -p build/pulls/pr-${{github.event.pull_request.number}}/layout_editor
+          mkdir -p build/pulls/pr-${{github.event.pull_request.number}}/docs
+
+          mv -v packages/react/storybook-static/* build/pulls/pr-${{github.event.pull_request.number}}/
+          mv -v packages/ui-elements/storybook-static/* build/pulls/pr-${{github.event.pull_request.number}}/ui-elements/
+          mv -v packages/layout_editor/dist/* build/pulls/pr-${{github.event.pull_request.number}}/layout_editor/
+          mv -v packages/docs/build/* build/pulls/pr-${{github.event.pull_request.number}}/docs/
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: github-pages
+          path: build/

.github/workflows/deploy-pr.yml

@@ -0,0 +1,36 @@
+name: Deploy PR-Preview
+
+on:
+  workflow_run:
+    workflows: ["Build PR-Preview"]
+    types:
+      - completed
+
+permissions:
+  contents: write
+  pages: write
+
+jobs:
+  deploy:
+    if: github.event.workflow_run.conclusion == 'success'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: github-pages
+          path: build/
+          github-token: ${{github.token}}
+          repository: ${{github.repository}}
+          run-id: ${{github.event.workflow_run.id}}
+
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v2
+        with:
+          target_branch: gh-deploy
+          build_dir: build/
+          commit_message: "Deploy to Github Pages"
+          jekyll: false
+          keep_history: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Build and Publish Storybook to GitHub Pages
+name: Build and Publish
 
 on:
   push:
@@ -30,19 +30,10 @@ jobs:
           node-version: "16.19.0"
 
       - name: Install Dependencies
-        run: yarn
-
-      - name: Build Storybook
-        run: yarn build:storybook
-        working-directory: packages/react
-
-      - name: Build UI-Elements
-        run: yarn build:storybook
-        working-directory: packages/ui-elements
+        run: yarn install
 
-      - name: Build Layout Editor
-        run: npm run build
-        working-directory: packages/layout_editor
+      - name: Build packages
+        run: yarn build && yarn build:storybook
 
       - name: Setup Node.js for Docs
         uses: actions/setup-node@v4

.github/workflows/pr-cleanup.yml

@@ -0,0 +1,34 @@
+name: Pull Request Cleanup
+on:
+  pull_request_target:
+    types: [closed]
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          ref: gh-deploy
+
+      - name: Check if Deployment Exists
+        id: check_deployment
+        run: |
+          if [ -d "pulls/pr-${{ github.event.pull_request.number }}" ]; then
+          echo "deployment_exists=true" >> $GITHUB_ENV
+          else
+          echo "deployment_exists=false" >> $GITHUB_ENV
+          fi
+
+      - name: Remove Deployment
+        if: env.deployment_exists == 'true'
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          git fetch origin gh-deploy
+          git checkout gh-deploy
+          git rm -r pulls/pr-${{github.event.pull_request.number}}
+          git commit -m "Remove deployment for PR #${{github.event.pull_request.number}}"
+          git push origin gh-deploy

packages/api/src/EmbeddedChatApi.ts

@@ -121,12 +121,12 @@ export default class EmbeddedChatApi {
     let credentials;
     if (!code) {
       credentials = credentials = {
-        user: userOrEmail,
+        user: userOrEmail.trim(),
         password,
       };
     } else {
       credentials = {
-        user: userOrEmail,
+        user: userOrEmail.trim(),
         password,
         code,
       };

packages/docs/docusaurus.config.js

@@ -17,7 +17,7 @@ const config = {
   url: "https://rocketchat.github.io/",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/EmbeddedChat/docs/",
+  baseUrl: process.env.DOCS_BASE_URL || "/EmbeddedChat/docs/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

packages/layout_editor/vite.config.ts

@@ -11,5 +11,5 @@ export default defineConfig({
       },
     }),
   ],
-  base: "/EmbeddedChat/layout_editor"
+  base: process.env.LAYOUT_EDITOR_BASE_URL || '/EmbeddedChat/layout_editor',
 });

packages/react/src/hooks/useSetMessageList.js

@@ -1,16 +1,14 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
 export const useSetMessageList = (messages, shouldRender) => {
   const [loading, setLoading] = useState(true);
-  const [messageList, setMessageList] = useState([]);
 
-  useEffect(() => {
-    setLoading(true);
-    const filteredMessages = messages.filter((message) =>
-      shouldRender(message)
-    );
+  const messageList = useMemo(
+    () => messages.filter(shouldRender),
+    [messages, shouldRender]
+  );
 
-    setMessageList(filteredMessages);
+  useEffect(() => {
     setLoading(false);
   }, [messages, shouldRender]);
 

packages/react/src/views/ChatHeader/ChatHeader.js

@@ -88,8 +88,9 @@ const ChatHeader = ({
   const dispatchToastMessage = useToastBarDispatch();
   const getMessagesAndRoles = useFetchChatData(showRoles);
   const setMessageLimit = useSettingsStore((state) => state.setMessageLimit);
-
+  const setMessages = useMessageStore((state) => state.setMessages);
   const avatarUrl = useUserStore((state) => state.avatarUrl);
+  const setUserAvatarUrl = useUserStore((state) => state.setUserAvatarUrl);
   const headerTitle = useMessageStore((state) => state.headerTitle);
   const filtered = useMessageStore((state) => state.filtered);
   const setFilter = useMessageStore((state) => state.setFilter);
@@ -128,6 +129,9 @@ const ChatHeader = ({
   const handleLogout = useCallback(async () => {
     try {
       await RCInstance.logout();
+      setMessages([]);
+      setUserAvatarUrl(null);
+      useMessageStore.setState({ isMessageLoaded: false });
     } catch (e) {
       console.error(e);
     } finally {

packages/react/src/views/ChatInput/ChatInput.js

@@ -25,7 +25,6 @@ import useAttachmentWindowStore from '../../store/attachmentwindow';
 import MembersList from '../Mentions/MembersList';
 import { TypingUsers } from '../TypingUsers';
 import createPendingMessage from '../../lib/createPendingMessage';
-import { parseEmoji } from '../../lib/emoji';
 import { CommandsList } from '../CommandList';
 import useSettingsStore from '../../store/settingsStore';
 import ChannelState from '../ChannelState/ChannelState';
@@ -34,6 +33,7 @@ import { getChatInputStyles } from './ChatInput.styles';
 import useShowCommands from '../../hooks/useShowCommands';
 import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 import formatSelection from '../../lib/formatSelection';
+import { parseEmoji } from '../../lib/emoji';
 
 const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
@@ -362,14 +362,16 @@ const ChatInput = ({ scrollToBottom }) => {
     setData(event.target.files[0]);
   };
 
-  const onTextChange = (e) => {
+  const onTextChange = (e, val) => {
     sendTypingStart();
-    const message = e.target.value;
+    const message = val || e.target.value;
     messageRef.current.value = parseEmoji(message);
     setDisableButton(!messageRef.current.value.length);
-    handleNewLine(e, false);
-    searchMentionUser(message);
-    showCommands(e);
+    if (e !== null) {
+      handleNewLine(e, false);
+      searchMentionUser(message);
+      showCommands(e);
+    }
   };
 
   const handleFocus = () => {
@@ -423,7 +425,11 @@ const ChatInput = ({ scrollToBottom }) => {
 
   return (
     <Box className={`ec-chat-input ${classNames}`} style={styleOverrides}>
-      <Box>
+      <Box
+        css={css`
+          max-width: 100%;
+        `}
+      >
         {(quoteMessage.msg || quoteMessage.attachments) && (
           <QuoteMessage message={quoteMessage} />
         )}
@@ -528,6 +534,7 @@ const ChatInput = ({ scrollToBottom }) => {
           <ChatInputFormattingToolbar
             messageRef={messageRef}
             inputRef={inputRef}
+            triggerButton={onTextChange}
           />
         )}
       </Box>

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -19,6 +19,7 @@ import formatSelection from '../../lib/formatSelection';
 const ChatInputFormattingToolbar = ({
   messageRef,
   inputRef,
+  triggerButton,
   optionConfig = {
     surfaceItems: ['emoji', 'formatter', 'audio', 'video', 'file'],
     formatters: ['bold', 'italic', 'strike', 'code', 'multiline'],
@@ -46,7 +47,11 @@ const ChatInputFormattingToolbar = ({
 
   const handleEmojiClick = (emojiEvent) => {
     const [emoji] = emojiEvent.names;
-    messageRef.current.value += ` :${emoji.replace(/[\s-]+/g, '_')}: `;
+    const message = `${messageRef.current.value} :${emoji.replace(
+      /[\s-]+/g,
+      '_'
+    )}: `;
+    triggerButton?.(null, message);
   };
 
   const chatToolMap = {

packages/react/src/views/MessageAggregators/StarredMessages.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import { useUserStore } from '../../store';
 import { MessageAggregator } from './common/MessageAggregator';
@@ -7,15 +7,18 @@ const StarredMessages = () => {
   const authenticatedUserId = useUserStore((state) => state.userId);
   const { variantOverrides } = useComponentOverrides('StarredMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
+  const shouldRender = useCallback(
+    (msg) =>
+      msg.starred &&
+      msg.starred.some((star) => star._id === authenticatedUserId),
+    [authenticatedUserId]
+  );
   return (
     <MessageAggregator
       title="Starred Messages"
       iconName="star"
       noMessageInfo="No Starred Messages"
-      shouldRender={(msg) =>
-        msg.starred &&
-        msg.starred.some((star) => star._id === authenticatedUserId)
-      }
+      shouldRender={shouldRender}
       viewType={viewType}
     />
   );

packages/react/src/views/MessageAggregators/common/MessageAggregator.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { isSameDay, format } from 'date-fns';
 import { Box, Sidebar, Popup, useTheme } from '@embeddedchat/ui-elements';
 import { MessageDivider } from '../../Message/MessageDivider';
@@ -27,7 +27,10 @@ export const MessageAggregator = ({
   const setExclusiveState = useSetExclusiveState();
   const messages = useMessageStore((state) => state.messages);
   const threadMessages = useMessageStore((state) => state.threadMessages) || [];
-  const allMessages = [...messages, ...threadMessages];
+  const allMessages = useMemo(
+    () => [...messages, ...threadMessages],
+    [messages, threadMessages]
+  );
   const [messageRendered, setMessageRendered] = useState(false);
   const { loading, messageList } = useSetMessageList(
     searchFiltered || allMessages,