EmbeddedChat enhancements

.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/playground/index.html

@@ -24,6 +24,14 @@
 		.playground-output #output{
 			white-space: pre-wrap;
 		}
+		#togglePassword {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+		cursor: pointer;
+        vertical-align: middle;
+		width: 50px;
+    	}
 	</style>
 </head>
 <body>
@@ -43,6 +51,9 @@
 			<div class="input-group">
 				<input type="text" id="email" placeholder="Email">
 				<input type="password" id="password" placeholder="Password">
+				<button id="togglePassword" class="toggle-icon">
+					Show
+				</button>
 				<button id="loginWithPassword">Sign in</button>
 			</div>
 			<div class="input-group">

packages/api/playground/playground.js

@@ -1,4 +1,5 @@
 import EmbeddedChatApi from '../src/EmbeddedChatApi';
+
 let messages = [];
 async function saveToken(token) {
 	localStorage.setItem("ec_token", token);
@@ -96,6 +97,7 @@ const callApi = async (e) => {
 	const result  = await api[fn].apply(api, params);
 	printResult(result);
 }
+
 window.addEventListener('DOMContentLoaded', () => {
 	console.log('Ready')
 	document.getElementById("loginWithPassword").addEventListener("click", loginWithPassword)
@@ -113,8 +115,25 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	document.getElementById("logoutBtn").addEventListener("click", () => api.auth.logout())
 	document.getElementById("call-api").addEventListener("click", callApi)
+	const passwordField = document.getElementById('password')
+	const togglePassword = document.getElementById('togglePassword')
+	togglePassword.addEventListener('click',() => toggle(passwordField, togglePassword))
 })
 
+let isPasswordVisible = false
+
+const toggle = (passwordField, togglePassword) => {
+	isPasswordVisible = !isPasswordVisible
+
+	if(isPasswordVisible){
+		passwordField.type = "text"
+		togglePassword.innerText = "Hide";
+	} else {
+		passwordField.type = "password";	
+		togglePassword.innerText = "Show";
+	}	
+}
+
 function escapeHTML(str) {
   return str.replace(
     /[&<>'"]/g,