Merge pull request #3841 from frappe/ci/pilot-prebuilt-assets

ci: Publish prebuilt assets for Pilot

.eslintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   env: {
     browser: true,
     es2021: true,

.github/helpers/install.sh

@@ -6,11 +6,10 @@ cd ~ || ex
 
 sudo apt update
 sudo apt remove mysql-server mysql-client
-sudo apt install libcups2-dev redis-server mariadb-client-10.6
+sudo apt install libcups2-dev redis-server mariadb-client libmariadb-dev
 
 pip install frappe-bench
-
-git clone "https://github.com/frappe/frappe" --branch "develop" --depth 1
+git clone "https://github.com/frappe/frappe" --branch "develop" --depth 1 
 bench init --skip-assets --frappe-path ~/frappe --python "$(which python)" frappe-bench
 
 mkdir ~/frappe-bench/sites/test_site
@@ -19,23 +18,20 @@ cp -r "${GITHUB_WORKSPACE}/.github/helpers/site_config_mariadb.json" ~/frappe-be
 
 mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
 mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
 mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "CREATE USER 'test_frappe'@'localhost' IDENTIFIED BY 'test_frappe'"
 mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "CREATE DATABASE test_frappe"
 mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "GRANT ALL PRIVILEGES ON \`test_frappe\`.* TO 'test_frappe'@'localhost'"
+
 mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "FLUSH PRIVILEGES"
 
 install_whktml() {
-	if [ "$(lsb_release -rs)" = "22.04" ]; then
-		wget -O /tmp/wkhtmltox.deb https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6.1-2/wkhtmltox_0.12.6.1-2.jammy_amd64.deb
-		sudo apt install /tmp/wkhtmltox.deb
-	else
-		echo "Please update this script to support wkhtmltopdf for $(lsb_release -ds)"
-		exit 1
-	fi
+    wget -O /tmp/wkhtmltox.tar.xz https://github.com/frappe/wkhtmltopdf/raw/master/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
+    tar -xf /tmp/wkhtmltox.tar.xz -C /tmp
+    sudo mv /tmp/wkhtmltox/bin/wkhtmltopdf /usr/local/bin/wkhtmltopdf
+    sudo chmod o+x /usr/local/bin/wkhtmltopdf
 }
 install_whktml &
-wkpid=$!
-
 
 cd ~/frappe-bench || exit
 
@@ -44,11 +40,16 @@ sed -i 's/schedule:/# schedule:/g' Procfile
 sed -i 's/socketio:/# socketio:/g' Procfile
 sed -i 's/redis_socketio:/# redis_socketio:/g' Procfile
 
+bench get-app erpnext --branch "develop"
+bench get-app telephony
 bench get-app helpdesk "${GITHUB_WORKSPACE}"
 bench setup requirements --dev
 
-wait $wkpid
 
-bench start &> bench_run_logs.txt &
-CI=Yes bench build &
+bench start &>> ~/frappe-bench/bench_start.log &
+CI=Yes bench build --app frappe &
 bench --site test_site reinstall --yes
+
+bench --verbose --site test_site install-app erpnext
+bench --verbose --site test_site install-app telephony
+bench --verbose --site test_site install-app helpdesk

.github/helpers/update_pot_file.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+set -e
+cd ~ || exit
+
+echo "Setting Up Bench..."
+
+pip install frappe-bench
+bench -v init frappe-bench --skip-assets --skip-redis-config-generation --python "$(which python)" --frappe-branch develop
+
+cd ./frappe-bench || exit
+
+echo "Get Helpdesk..."
+bench get-app --skip-assets helpdesk "${GITHUB_WORKSPACE}"
+
+echo "Generating POT file..."
+bench generate-pot-file --app helpdesk
+
+cd ./apps/helpdesk || exit
+
+echo "Configuring git user..."
+git config user.email "developers@erpnext.com"
+git config user.name "frappe-pr-bot"
+
+echo "Setting the correct git remote..."
+# Here, the git remote is a local file path by default. Let's change it to the upstream repo.
+git remote set-url upstream https://github.com/frappe/helpdesk.git
+
+echo "Creating a new branch..."
+isodate=$(date -u +"%Y-%m-%d")
+branch_name="pot_${BASE_BRANCH}_${isodate}"
+git checkout -b "${branch_name}"
+
+echo "Commiting changes..."
+git add helpdesk/locale/main.pot
+git commit -m "chore: update POT file"
+
+gh auth setup-git
+git push -u upstream "${branch_name}"
+
+echo "Creating a PR..."
+gh pr create --fill --base "${BASE_BRANCH}" --head "${branch_name}" -R frappe/helpdesk

.github/release.yml

@@ -1,15 +0,0 @@
-changelog:
-  exclude:
-    authors:
-      - octocat
-  categories:
-    - title: Breaking Changes 🛠
-      labels:
-        - breaking-change
-    - title: Bug Fixes 🐛
-      labels:
-        - bug-fix
-    - title: Exciting New Features 🎉
-      labels:
-        - enhancement
-        - feature

.github/workflows/assets.yml

@@ -0,0 +1,15 @@
+name: Pre-build assets
+
+on:
+  push:
+    branches: [develop, main]
+
+jobs:
+  assets:
+    name: Pre-build assets
+    uses: frappe/pilot/.github/workflows/app-assets.yml@develop
+    with:
+      # main supports Frappe v15 and v16; Pilot benches run v16 or later.
+      frappe-branch: ${{ github.ref_name == 'main' && 'version-16' || 'develop' }}
+    permissions:
+      contents: write

.github/workflows/build.yml

@@ -13,21 +13,15 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        arch: [amd64, arm64]
+    permissions:
+      packages: write
 
     steps:
       - name: Checkout Entire Repository
         uses: actions/checkout@v4
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-        with:
-          platforms: linux/${{ matrix.arch }}
 
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v2
@@ -38,8 +32,7 @@ jobs:
 
       - name: Set Branch
         run: |
-          export APPS_JSON='[{"url": "https://github.com/frappe/helpdesk","branch": "main"}]'
-          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
+          echo '[{"url": "https://github.com/frappe/telephony","branch": "develop"},{"url": "https://github.com/frappe/helpdesk","branch": "main"}]' > apps.json
           echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
 
       - name: Set Image Tag
@@ -51,10 +44,10 @@ jobs:
           repository: frappe/frappe_docker
           path: builds
 
-      - name: Build and push
+      - name: Build
         uses: docker/build-push-action@v6
         with:
-          push: true
+          load: true
           context: builds
           file: builds/images/layered/Containerfile
           tags: >
@@ -62,4 +55,14 @@ jobs:
             ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
           build-args: |
             "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
-            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"
+          secret-files: |
+            apps_json=apps.json
+
+      - name: Verify apps are installed
+        run: |
+          apps=$(docker run --rm --entrypoint ls ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }} apps)
+          echo "$apps"
+          grep -qx helpdesk <<< "$apps" && grep -qx telephony <<< "$apps"
+
+      - name: Push
+        run: docker push --all-tags ghcr.io/${{ github.repository }}

.github/workflows/generate-pot-file.yml

@@ -0,0 +1,40 @@
+name: Regenerate POT file (translatable strings)
+on:
+  schedule:
+    # 9:30 UTC => 4 PM IST Sunday
+    - cron: "30 10 * * 0"
+  workflow_dispatch:
+
+jobs:
+  regenerate-pot-file:
+    name: Regenerate POT file
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        branch: ["develop", "main-hotfix"]
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ matrix.branch }}
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.14"
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+
+      - name: Run script to update POT file
+        run: |
+          bash ${GITHUB_WORKSPACE}/.github/helpers/update_pot_file.sh
+        env:
+          GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          BASE_BRANCH: ${{ matrix.branch }}

.github/workflows/lint.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+      - main-hotfix
       - develop
 
 jobs:
@@ -16,7 +17,7 @@ jobs:
           fetch-depth: 200
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 24
           check-latest: true
       - name: Check commit titles
         run: |
@@ -34,10 +35,10 @@ jobs:
       - name: Set up Python 3.10
         uses: actions/setup-python@v2
         with:
-          python-version: '3.10'
+          python-version: '3.14'
 
       - name: Install and Run Pre-commit
-        uses: pre-commit/action@v2.0.3
+        uses: pre-commit/action@v3.0.1
 
       - name: Download Semgrep rules
         run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules

.github/workflows/on_release.yml

@@ -0,0 +1,32 @@
+name: Generate Semantic Release
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - name: Setup dependencies
+        run: |
+          npm install @semantic-release/git @semantic-release/exec --no-save
+      - name: Create Release
+        env:
+          GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+          GIT_AUTHOR_NAME: "Frappe PR Bot"
+          GIT_AUTHOR_EMAIL: "developers@frappe.io"
+          GIT_COMMITTER_NAME: "Frappe PR Bot"
+          GIT_COMMITTER_EMAIL: "developers@frappe.io"
+        run: npx semantic-release

.github/workflows/release.yml

@@ -0,0 +1,40 @@
+# This action:
+#
+# 1. Generates release notes using github API.
+# 2. Strips unnecessary info like chore/style etc from notes.
+# 3. Updates release info.
+
+name: 'Release Notes'
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag_name:
+        description: 'Tag of release like v1.0.0'
+        required: true
+        type: string
+  release:
+    types: [released]
+
+permissions:
+  contents: read
+
+jobs:
+  regen-notes:
+    name: 'Regenerate release notes'
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Update notes
+      run: |
+        NEW_NOTES=$(gh api --method POST -H "Accept: application/vnd.github+json"  /repos/frappe/helpdesk/releases/generate-notes  -f tag_name=$RELEASE_TAG \
+          | jq -r '.body' \
+          | sed -E '/^\* (chore|ci|test|docs|style)/d' \
+          | sed -E 's/by @mergify //'
+        )
+        RELEASE_ID=$(gh api -H "Accept: application/vnd.github+json" /repos/frappe/helpdesk/releases/tags/$RELEASE_TAG | jq -r '.id')
+        gh api --method PATCH -H "Accept: application/vnd.github+json" /repos/frappe/helpdesk/releases/$RELEASE_ID -f body="$NEW_NOTES"
+
+      env:
+        GH_TOKEN: ${{ secrets.RELEASE_TOKEN }}
+        RELEASE_TAG: ${{ github.event.inputs.tag_name || github.event.release.tag_name }}

.github/workflows/server-tests.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     branches:
       - main
+      - main-hotfix
+      - develop
 
     paths-ignore:
       - '**.js'
@@ -11,53 +13,48 @@ on:
       - '**.md'
       - '**.html'
       - '**.csv'
-  workflow_dispatch:
-    inputs:
-      user:
-        description: 'Frappe Framework repository user (add your username for forks)'
-        required: true
-        default: 'frappe'
-        type: string
-      branch:
-        description: 'Frappe Framework branch'
-        default: 'develop'
-        required: false
-        type: string
 
 concurrency:
-  group: server-mariadb-develop-${{ github.event_name }}-${{ github.event.number || github.event_name == 'workflow_dispatch' && github.run_id || '' }}
+  group: develop-helpdesk-${{ github.event.number }}
   cancel-in-progress: true
 
 jobs:
-  test:
+  tests:
     name: Python Unit Tests
     runs-on: ubuntu-latest
     timeout-minutes: 60
 
-    strategy:
-      fail-fast: false
+    services:
+        mysql:
+          image: mariadb:10.6
+          env:
+            MARIADB_ROOT_PASSWORD: 'root'
+          ports:
+            - 3306:3306
+          options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
 
     steps:
       - name: Clone
         uses: actions/checkout@v2
 
       - name: Setup Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
-          python-version: '3.11'
+          python-version: '3.14'
 
       - name: Check for valid Python & Merge Conflicts
+        if: github.event.pull_request.base.ref == 'develop'
         run: |
           python -m compileall -f "${GITHUB_WORKSPACE}"
           if grep -lr --exclude-dir=node_modules "^<<<<<<< " "${GITHUB_WORKSPACE}"
-              then echo "Found merge conflicts"
-              exit 1
+            then echo "Found merge conflicts"
+            exit 1
           fi
 
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 18
+          node-version: 24
           check-latest: true
 
       - name: Install Yarn
@@ -99,13 +96,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Setup MariaDB
-        uses: getong/mariadb-action@v1.1
-        with:
-          collation server: 'utf8mb4_unicode_ci'
-          mariadb version: '10.6'
-          mysql root password: 'root'
-
       - name: Install
         run: bash ${GITHUB_WORKSPACE}/.github/helpers/install.sh
         env:
@@ -114,9 +104,32 @@ jobs:
           FRAPPE_BRANCH: ${{ github.event.inputs.branch }}
 
       - name: Run Tests
-        run: 'cd ~/frappe-bench/ && bench --site test_site run-tests --app helpdesk'
+        run: 'cd ~/frappe-bench/ && bench --site test_site run-tests --app helpdesk --coverage'
         env:
           TYPE: server
           CI_BUILD_ID: ${{ github.run_id }}
-          ORCHESTRATOR_URL: http://test-orchestrator.frappe.io
+      
+      - name: Upload coverage data
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-${{ matrix.container }}
+          path: /home/runner/frappe-bench/sites/coverage.xml
 
+  coverage:
+    name: Coverage Wrap Up
+    needs: tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone
+        uses: actions/checkout@v6
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+
+      - name: Upload coverage data
+        uses: codecov/codecov-action@v4
+        with:
+          name: MariaDB
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true
+          verbose: true

.github/workflows/ui-tests.yml

@@ -0,0 +1,187 @@
+name: UI Tests
+
+on:
+  pull_request:
+    branches:
+      - develop
+    paths:
+      - "desk/**"
+      - "e2e/**"
+      - "playwright.config.ts"
+      - "package.json"
+      - "yarn.lock"
+      - ".github/workflows/ui-tests.yml"
+  workflow_dispatch:
+
+concurrency:
+  group: ui-tests-helpdesk-${{ github.event.number || github.ref }}
+  cancel-in-progress: true
+
+env:
+  FRAPPE_BRANCH: develop
+  SITE: helpdesk.test
+
+jobs:
+  ui-tests:
+    name: Playwright E2E Tests (${{ matrix.shard }}/2)
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2]
+
+    services:
+      redis-cache:
+        image: redis/redis-stack-server:latest
+        ports:
+          - 13000:6379
+      redis-queue:
+        image: redis:alpine
+        ports:
+          - 11000:6379
+      mariadb:
+        image: mariadb:10.6
+        env:
+          MARIADB_ROOT_PASSWORD: root
+        ports:
+          - 3306:3306
+        options: --health-cmd="mariadb-admin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v4
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.14"
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          check-latest: true
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/pyproject.toml') }}
+          restore-keys: ${{ runner.os }}-pip-
+
+      - name: Cache yarn
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/yarn
+          key: ${{ runner.os }}-yarn-ui-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-yarn-ui-
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('yarn.lock') }}
+
+      - name: Install MariaDB Client
+        run: |
+          sudo apt update
+          sudo apt install -y mariadb-client
+
+      - name: Setup Bench
+        run: |
+          pip install frappe-bench
+          bench init --skip-redis-config-generation --skip-assets --frappe-branch "$FRAPPE_BRANCH" --python "$(which python)" ~/frappe-bench
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL character_set_server = 'utf8mb4'"
+          mariadb --host 127.0.0.1 --port 3306 -u root -proot -e "SET GLOBAL collation_server = 'utf8mb4_unicode_ci'"
+
+      - name: Install Helpdesk
+        working-directory: /home/runner/frappe-bench
+        run: |
+          bench get-app telephony
+          bench get-app helpdesk $GITHUB_WORKSPACE
+          bench setup requirements --dev
+          bench new-site --db-root-password root --admin-password admin --install-app helpdesk $SITE
+          bench use $SITE
+          bench --site $SITE set-config host_name "http://localhost:8000"
+          bench build --apps frappe,helpdesk
+        env:
+          CI: "Yes"
+
+      - name: Start Frappe Server
+        working-directory: /home/runner/frappe-bench
+        run: |
+          sed -i 's/^watch:/# watch:/g' Procfile
+          sed -i 's/^schedule:/# schedule:/g' Procfile
+          bench start &> bench_start.log &
+          timeout 120 bash -c "until curl -s http://localhost:8000 > /dev/null; do sleep 2; done"
+
+      - name: Install Playwright
+        run: |
+          yarn install --frozen-lockfile --ignore-scripts
+          npx playwright install --with-deps chromium
+
+      - name: Run Playwright Tests
+        run: npx playwright test --shard=${{ matrix.shard }}/2
+        env:
+          # localhost is a secure context, which crypto.randomUUID in frappe/ui needs.
+          BASE_URL: http://localhost:8000
+          ADMIN_PASSWORD: admin
+
+      - name: Upload Blob Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: blob-report-${{ matrix.shard }}
+          path: blob-report/
+          retention-days: 1
+
+      - name: Upload Test Results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results-${{ matrix.shard }}
+          path: test-results/
+          retention-days: 7
+
+      - name: Show Bench Logs on Failure
+        if: failure()
+        working-directory: /home/runner/frappe-bench
+        run: |
+          cat bench_start.log || true
+          cat logs/*.log || true
+
+  merge-reports:
+    name: Merge Playwright Reports
+    needs: ui-tests
+    if: always()
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Install Playwright
+        run: yarn install --frozen-lockfile --ignore-scripts
+
+      - name: Download Blob Reports
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge Into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -29,6 +29,12 @@ share/python-wheels/
 *.egg-info/
 .installed.cfg
 *.egg
+.playwright-mcp
+.claude-flow
+.claude
+.claude-worktrees
+CLAUDE.md
+
 
 helpdesk/docs/current
 helpdesk/public/desk
@@ -36,3 +42,8 @@ helpdesk/public/frontend
 helpdesk/public/node_modules
 helpdesk/www/helpdesk/index.html
 desk/components.d.ts
+desk/stats.html
+# Playwright
+e2e/.auth
+playwright-report
+test-results

.mergify.yml

@@ -0,0 +1,42 @@
+pull_request_rules:
+  - name: Auto-close PRs on stable branch
+    conditions:
+      - and:
+          - author != RitvikSardana
+          - author != frappe-pr-bot
+          - author != mergify[bot]
+          - author != aerodeval
+      - or:
+          - base = main
+    actions:
+      close:
+      comment:
+        message: |
+          @{{author}}, thanks for the contribution, but we do not accept pull requests on a stable branch. Please raise PR on develop branch.
+  - name: backport to develop
+    conditions:
+      - label = "backport develop"
+    actions:
+      backport:
+        branches:
+          - develop
+        assignees:
+          - "{{ author }}"
+  - name: backport to main-hotfix
+    conditions:
+      - label = "backport main-hotfix"
+    actions:
+      backport:
+        branches:
+          - main-hotfix
+        assignees:
+          - "{{ author }}"
+  - name: backport to main
+    conditions:
+      - label = "backport main"
+    actions:
+      backport:
+        branches:
+          - main
+        assignees:
+          - "{{ author }}"

.pre-commit-config.yaml

@@ -1,22 +1,22 @@
 exclude: "node_modules|.git"
-default_stages: [commit]
+default_stages: [pre-commit]
 fail_fast: false
 
 repos:
   - repo: https://github.com/psf/black
-    rev: 22.6.0
+    rev: 25.11.0
     hooks:
       - id: black
         types_or: [python, pyi]
 
   - repo: https://github.com/PyCQA/flake8
-    rev: 5.0.4
+    rev: 7.3.0
     hooks:
       - id: flake8
         additional_dependencies:
           - flake8-bugbear
           - flake8-comprehensions
-          - flake8-simplify
+          - flake8-simplify==0.30.0
         args: ['--config', '.github/helpers/.flake8_strict']
 
   - repo: https://github.com/pre-commit/mirrors-prettier

.releaserc

@@ -0,0 +1,21 @@
+{
+	"branches": ["main"],
+	"plugins": [
+		"@semantic-release/commit-analyzer", {
+			"preset": "angular"
+		},
+		"@semantic-release/release-notes-generator",
+		[
+			"@semantic-release/exec", {
+				"prepareCmd": 'sed -ir "s/[0-9]*\.[0-9]*\.[0-9]*/${nextRelease.version}/" helpdesk/__init__.py'
+			}
+		],
+		[
+			"@semantic-release/git", {
+				"assets": ["helpdesk/__init__.py"],
+				"message": "chore(release): Bumped to Version ${nextRelease.version}"
+			}
+		],
+		"@semantic-release/github"
+	]
+}

AGENTS.md

@@ -0,0 +1,471 @@
+# Copilot Instructions for Frappe Helpdesk
+
+## Skills
+
+For Frappe development tasks, reference the frappe-dev skill:
+- **Location**: `~/.agents/skills/frappe-dev/`
+- **Usage**: When working on DocType, controllers, whitelisted APIs, background jobs, permissions, or frontend tasks, read the relevant skill reference files:
+  - `doctype.md` — Creating/modifying DocTypes and fields
+  - `controllers.md` — Document lifecycle and server logic
+  - `api.md` — REST endpoints with `@frappe.whitelist()`
+  - `database.md` — `frappe.db`, queries, raw SQL
+  - `background-jobs.md` — `frappe.enqueue`, scheduled jobs
+  - `permissions.md` — Roles, DocType permissions
+  - `frontend-desk.md`, `frontend-vue.md`, `frontend-portal.md` — Frontend references
+
+## Project Overview
+
+Frappe Helpdesk is an open-source ticket management tool built on the [Frappe Framework](https://github.com/frappe/frappe) (Python backend) and [Frappe UI](https://github.com/frappe/frappe-ui) (Vue.js frontend). It provides agent/customer portals, SLAs, assignment rules, a knowledge base, and saved replies.
+
+## Tech Stack & Architecture
+
+- **Backend**: Frappe Framework with Python
+- **Frontend**: Vue 3 + TypeScript SPA with Vite dev server
+- **Database**: MariaDB with structured doctypes
+- **Real-time**: WebSockets via Socket.IO for live updates
+- **UI Library**: frappe-ui for consistent design components
+- **Styling**: Tailwind CSS with semantic design tokens
+
+## Architecture
+
+- **Backend (Python):** Located in `helpdesk/`.
+  - API endpoints: `helpdesk/api/`
+  - Business logic: `helpdesk/utils.py`, `helpdesk/search.py`, etc.
+  - Extensibility: `helpdesk/extends/`, `helpdesk/overrides/`
+- **Frontend (Vue.js):** Located in `desk/`.
+  - Main entry: `desk/src/main.js`, `desk/src/App.vue`
+  - Components: `desk/src/components/`
+  - State: `desk/src/stores/`
+  - Routing: `desk/src/router/`
+  - Styles: Tailwind via `desk/index.css`, config in `desk/tailwind.config.js`
+
+# Frontend: Vue 3 Development Standards
+
+## Frontend Project Context
+
+- `desk/src/` contains the main Vue 3 frontend source code
+- Vue 3.x with Composition API as default approach
+- TypeScript for type safety and better development experience
+- Single File Components (`.vue`) with `<script setup lang="ts">` syntax preferred
+- Vite as the build tool for fast development and optimized builds
+- Pinia for state management (unlike gameplan which avoids state libraries)
+- frappe-ui for UI components and data fetching utilities
+
+## Development Standards
+
+### Architecture & Component Design
+
+- Favor the Composition API (`setup` functions and composables) over the Options API
+- Organize components and composables by feature or domain for scalability
+- Separate UI-focused components (presentational) from logic-focused components (containers)
+- Use PascalCase for component names and file names
+- Keep components small and focused on one concern
+- Use `<script setup lang="ts">` syntax for brevity and performance
+- Favor slots and scoped slots for flexible composition
+
+### TypeScript Integration
+
+- TypeScript is enabled but not in strict mode (as per actual tsconfig.json)
+- Use `<script setup lang="ts">` with `defineProps` and `defineEmits`
+- Leverage `PropType<T>` for typed props and default values
+- Use interfaces or type aliases for complex prop and state shapes
+- Define types for event handlers, refs, and `useRoute`/`useRouter` hooks
+
+### Styling Guidelines
+
+- Always prefer Tailwind CSS for styling
+- Use utility classes for layout and spacing
+- Use semantic class names wherever possible:
+  - Background colors: `bg-surface-white`, `bg-surface-gray-1` through `bg-surface-gray-9`, `bg-surface-black`
+  - Text colors: `text-ink-white`, `text-ink-gray-1` through `text-ink-gray-9`, `text-ink-black`
+  - Fill colors: `fill-ink-*`
+  - Placeholder colors: `placeholder-ink-*`
+  - Border colors: `border-outline-white`, `border-outline-gray-1` through `border-outline-gray-5`, `border-outline-black`
+  - Font sizes: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`
+  - Multiline text: `text-p-xs`, `text-p-sm`, `text-p-base`, `text-p-lg`, `text-p-xl`, `text-p-2xl`
+- Always use gray shades for everything, never use color shades even for primary states
+- Implement mobile-first, responsive design with CSS Grid and Flexbox
+- Ensure styles are accessible (contrast, focus states)
+
+### Data Fetching with frappe-ui
+
+- Use `createResource`, `createListResource`, and `createDocumentResource` from frappe-ui for data fetching
+- Handle loading, error, and success states explicitly
+- These are the older but stable composables used throughout the project
+
+When working with a list of documents:
+
+```ts
+const tickets = createListResource({
+  doctype: "HD Ticket",
+  filters: { status: "Open" },
+  fields: ["name", "subject", "modified"],
+  limit: 20,
+  auto: true,
+});
+
+// Access data
+tickets.data; // Array of ticket objects
+tickets.loading; // Boolean loading state
+tickets.error; // Error object if any
+
+// Operations
+tickets.reload(); // Refresh the list
+tickets.update({ name: "<id>", subject: "Updated Subject" }); // Update item
+tickets.insert({ subject: "New Ticket" }); // Add new item
+tickets.delete("<id>"); // Delete item
+```
+
+When working with a single document:
+
+```ts
+const ticket = createDocumentResource({
+  doctype: "HD Ticket",
+  name: "<ticket-id>",
+  auto: true,
+});
+
+// Access data
+ticket.doc; // Document object
+ticket.loading; // Boolean loading state
+ticket.error; // Error object if any
+
+// Operations
+ticket.get(); // Fetch/refresh document
+ticket.setValue("status", "Resolved"); // Update field
+ticket.save(); // Save changes
+ticket.delete(); // Delete document
+```
+
+For API calls:
+
+```ts
+const apiCall = createResource({
+  url: "helpdesk.api.ticket.assign_ticket_to_agent",
+  onSuccess(data) {
+    // Handle success
+  },
+  onError(error) {
+    // Handle error
+  },
+});
+
+// Make the call
+apiCall.submit({ ticket_id: "<id>", agent_id: "<agent>" });
+```
+
+### Icons
+
+- **Primary icon system**: Lucide icons via unplugin-icons for consistency and modern design
+- **Secondary**: FeatherIcon component from frappe-ui (legacy usage only)
+- **Rule**: Never introduce `FeatherIcon` in new code. New components must use Lucide
+  icons (`<LucideInfo />`, `<LucidePlus />`, …) — no exceptions, including small
+  helper icons like tooltip/info glyphs.
+- Use Lucide icons for all new components. They are globally auto-registered
+  (see `desk/components.d.ts`), so no import is needed when used as a template tag:
+  ```vue
+  <template>
+    <LucidePlus class="size-4" />
+  </template>
+  ```
+- For script usage, import Lucide icons like this:
+  ```ts
+  import LucidePlus from "~icons/lucide/plus";
+  import LucideTicket from "~icons/lucide/ticket";
+  ```
+- Only use FeatherIcon for maintaining existing components:
+  ```vue
+  <template>
+    <FeatherIcon name="plus" class="h-4 w-4" />
+  </template>
+  ```
+
+### State Management
+
+- Use Pinia stores for complex shared state
+- For simple local state, use `ref` and `reactive` within `setup`
+- Use `computed` for derived state
+- Keep state normalized for complex structures
+
+### Performance & Accessibility
+
+- Apply `v-once` and `v-memo` for static or infrequently changing elements
+- Avoid unnecessary watchers; prefer `computed` where possible
+- Use semantic HTML elements and ARIA attributes
+- Manage focus for modals and dynamic content
+- Ensure keyboard navigation for interactive components
+
+# Backend: Frappe Framework Development Standards
+
+## Backend Project Context
+
+- Frappe Framework provides full-stack capabilities with ORM, permissions, and background jobs
+- MariaDB database with structured DocTypes for business entities
+- Redis for background workers and caching
+- Socket.IO for real-time updates
+
+## Critical Development Workflows
+
+**Local Development Setup**:
+
+- Backend runs via `bench start` from frappe-bench directory
+- Python web server: Assume server is already started on port 8000
+- Frontend dev server: `cd desk && yarn dev` (typically runs on port 8080)
+- Site-specific commands: `bench --site helpdesk.test <command>`
+
+**Data Query Patterns**:
+
+- Always prefer `frappe.get_list()` over `frappe.get_all()` for new code. It handles perms out of the box and is more flexible.
+- `frappe.get_all()` is fine for child tables (e.g. `Has Role`, `HD Customer Member`), which have no permissions of their own.
+- When `frappe.get_all()` is used on a parent DocType, make sure the caller may see the result some other way, for example a `frappe.has_permission(...)` check first, or `@agent_only` / `@agent_manager_only` (`helpdesk/utils.py`) on the endpoint.
+- Use `frappe.qb.get_query(..., ignore_permissions=False)` when permission checks are needed
+- Example query patterns from helpdesk context
+
+**Debugging Workflow**:
+
+- Create debug files like `./helpdesk/debug.py` with `def execute():` function
+- Run with `bench --site helpdesk.test execute helpdesk.debug.execute`
+- Use `print()` statements for console output during debugging
+
+## DocType Architecture Patterns
+
+- Follow Frappe's DocType conventions for business entities
+- Implement custom permission logic in `has_permission` hooks
+- Use proper field types and validation in DocType definitions
+- Leverage DocType methods for business logic encapsulation
+
+## Controller Code Structure
+
+All controller logic must follow this structure strictly:
+
+**Rule: Lifecycle hooks call methods. Methods are defined below on the class.**
+
+```python
+class HDFoo(Document):
+    # 1. Lifecycle hooks at the top — each hook calls methods, no inline logic
+    def after_insert(self):
+        self.do_a()
+        self.do_b()
+
+    def on_update(self):
+        self.do_a()
+
+    # 2. Methods below — one responsibility each
+    def do_a(self):
+        pass
+
+    def do_b(self):
+        pass
+
+
+```
+
+**Rules:**
+
+- Lifecycle hooks (`after_insert`, `on_update`, `before_save`, `on_trash`, `after_rename`, etc.) contain **no inline logic** — they only call `self.method()`.
+- All logic lives in methods on the class, not in module-level helper functions.
+- Methods that mutate a related document (e.g. an Assignment Rule) receive that doc as an argument and mutate it in memory. The **caller** is responsible for the final `doc.save()` — this keeps saves to a minimum (one save per hook).
+- Never fetch the same document twice in one hook. Fetch once, pass the doc through the call chain.
+- `@staticmethod` is allowed for pure transformations (e.g. building a condition string) that don't touch `self` or any Frappe doc.
+- If there is an issue in framework/ui or frappe-ui or frappe framework, dont do a workaround. Instead, raise a blocker in the spec and wait for a fix. Do not implement workarounds that will be removed later. If possible, raise a PR to fix the issue in the framework instead of implementing a workaround in helpdesk.
+
+**Save discipline:**
+
+- Mutate all fields on a document before calling `.save()` once.
+- Never call `.save()` inside a helper method — save in the hook or the method that owns the full mutation.
+- Exception: if a method truly owns a complete document lifecycle (e.g. `create_assignment_rule` creates and fully initialises a new doc), it may save internally.
+Take inspiration from "helpdesk.doctype.hd_team.hd_team.HDTeam" for examples of this pattern in practice.
+
+## Conventions & Patterns
+
+- **API Design:** Python modules in `helpdesk/api/` follow RESTful patterns. Extend via `helpdesk/extends/`.
+- **Frontend:** Vue 3 + Vite with TypeScript. Use Pinia for state management. Components auto-imported via `desk/components.d.ts`.
+- **Testing:** Follow Frappe's conventions for backend tests.
+- **Localization:** Add translations in `helpdesk/locale/`.
+- **Custom Logic:** Use `helpdesk/overrides/` for customizations.
+
+## Utilities and Composables
+
+- @vueuse/core is available for common Vue utilities
+- Prefer vueuse composables over custom implementations where applicable
+- Common composables: `useLocalStorage`, `useDebounce`, `useElementSize`
+- Always use frappe-ui's data fetching composables (`createResource`, `createListResource`, `createDocumentResource`), never `useFetch`
+
+## Error Handling & Forms
+
+- Use global error handlers for uncaught errors
+- Wrap risky logic in `try/catch` with user-friendly messages
+- Build forms with controlled `v-model` bindings
+- Validate on blur or input with debouncing for performance
+- Ensure accessible labeling and error announcements
+
+## Integration Points
+
+- **Frappe Framework:** All backend logic integrates with Frappe ORM, permissions, and hooks (`helpdesk/hooks.py`).
+- **Frappe UI:** Frontend uses Frappe UI for consistent design components and data fetching.
+- **Real-time Updates:** WebSockets via Socket.IO for live ticket updates.
+- **Crowdin:** Translation sync via `crowdin.yml`.
+
+## Examples
+
+### Adding a New API Endpoint
+
+1. Create a Python file in `helpdesk/api/`
+2. Add `@frappe.whitelist()` decorator to functions
+3. Register in `helpdesk/hooks.py` if needed
+4. Use `frappe.qb.get_query()` for database queries
+
+### Adding a Frontend Component
+
+1. Create Vue component in `desk/src/components/` or `desk/src/pages/`
+2. Use `<script setup lang="ts">` syntax
+3. Follow Tailwind semantic class conventions
+4. Use frappe-ui composables for data fetching
+5. Add route in `desk/src/router/` if it's a page component
+
+### Styling Example
+
+```vue
+<template>
+  <div class="bg-surface-white border border-outline-gray-2 rounded-lg p-4">
+    <h2 class="text-lg text-ink-gray-9 font-semibold mb-2">Ticket Details</h2>
+    <p class="text-p-sm text-ink-gray-7">{{ ticket.doc.subject }}</p>
+    <LucideTicket class="size-4 text-ink-gray-6" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createDocumentResource } from "frappe-ui";
+import LucideTicket from "~icons/lucide/ticket";
+
+const ticket = createDocumentResource({
+  doctype: "HD Ticket",
+  name: props.ticketId,
+  auto: true,
+});
+</script>
+```
+
+## Key Files & Directories
+
+### Backend
+
+- `helpdesk/api/` — Backend API endpoints with @frappe.whitelist() decorators
+- `helpdesk/utils.py` — Shared backend utilities and helper functions
+- `helpdesk/hooks.py` — Frappe hooks
+- `helpdesk/overrides/` — Custom logic and extensions
+
+### Frontend
+
+- `desk/src/` — Main Vue 3 frontend source code
+- `desk/src/components/` — Reusable Vue components
+- `desk/src/pages/` — Page-level components and routes
+- `desk/src/stores/` — Pinia stores for state management
+- `desk/tailwind.config.js` — Tailwind CSS configuration with semantic tokens
+- `desk/components.d.ts` — Auto-generated component type definitions
+
+### Development
+
+- `docker/` — Docker setup for containerized development
+
+## Code Quality & Standards
+
+- Follow Vue's official style guide and best practices
+- Use ESLint with Vue 3 recommended rules and Prettier for consistency
+- Write meaningful commit messages and maintain clean git history
+- Document complex logic with JSDoc/TSDoc comments
+- Keep a comment to 2 lines at most. If it needs more to explain, simplify the code instead
+- Keep dependencies updated and audit for security vulnerabilities
+
+## References
+
+- [README.md](../README.md) — Full setup and feature list
+- [Frappe Docs](https://frappeframework.com/docs/) — Framework documentation
+- [Frappe Helpdesk Docs](https://docs.frappe.io/helpdesk) — Project-specific docs
+- [Vue 3 Style Guide](https://vuejs.org/style-guide/) — Vue.js best practices
+- [Tailwind CSS](https://tailwindcss.com/docs) — Utility-first CSS framework
+
+---
+
+## Agent Working Rules
+
+These rules apply to all agents working in this codebase. Follow them without exception.
+
+### 1. Site Data — Read Before You Write
+
+When a Frappe site is referenced in the conversation (e.g. `erp-hd.localhost`, `hd-tests`),
+treat it as the **source of truth for current data state**.
+
+- Before assuming anything about existing records, custom fields, settings, or DocType state —
+  query the site first using the bench venv Python or `bench execute`.
+- **Never write data to a site unless the user explicitly asks you to.**
+  Querying is always safe. Mutations (insert, update, delete, migrate, patch) require explicit
+  user instruction.
+- If you need to verify a fix worked, re-query the site — do not assume success from code
+  inspection alone.
+
+```python
+# Safe pattern for querying a site
+import sys, os
+sys.path.insert(0, 'apps/frappe')
+os.chdir('sites')
+import frappe
+frappe.init(site='<site-name>', sites_path='.')
+frappe.connect()
+
+# ... read-only queries here ...
+
+frappe.destroy()
+```
+
+Run via: `cd /path/to/frappe-bench && env/bin/python /tmp/your_script.py`
+
+---
+
+### 2. Spec-Driven Development — Keep the Spec Current
+
+When a feature has a spec document (e.g. `docs/erpnext-customer-sync.md`), the spec is the
+**living source of truth** for that feature. It must be kept in sync with the actual
+implementation at all times.
+
+**Rules:**
+
+- **Update the spec in the same session as the code change.** Never defer spec updates to a
+  later session.
+- **The spec reflects what is implemented, not what was originally planned.** If a decision
+  changes mid-build (e.g. removing a scheduler job, changing how a field is set), update the
+  spec immediately after the code change.
+- **Removed features must be removed from the spec.** Do not leave stale sections, blockers, or
+  file manifest entries for things that no longer exist.
+- **New features must be added to the spec.** If a new API, component, or behaviour is
+  introduced, add a corresponding section.
+- **Decisions and their rationale belong in the spec.** If something was done a specific way to
+  avoid a bug or framework limitation (e.g. not setting `customer_group` to avoid the group-node
+  error), document that in the relevant Blocker section.
+- When in doubt about whether a spec update is needed — update it.
+
+---
+
+### 3. Test Utilities — Always Use `helpdesk/test_utils.py`
+
+All backend test helpers must live in `helpdesk/test_utils.py` and be imported from there.
+Never define helper functions (factories, enable/disable toggles, fixture builders) directly
+inside individual test files.
+
+**Rules:**
+
+- **Before writing a helper in a test file**, check `helpdesk/test_utils.py` first — it may
+  already exist.
+- **If a helper doesn't exist**, add it to `helpdesk/test_utils.py` and import it in the test
+  file. Do not leave it inline.
+- **If you write helpers inline during development**, move them to `test_utils.py` before
+  finishing the task.
+- Helper functions in `test_utils.py` must have a docstring explaining what they create or do. Only if the function is completely self-explanatory (e.g. `enable_erpnext_sync`) can the docstring be omitted.
+- Naming conventions:
+  - Factories: `make_<doctype>(...)` — e.g. `make_hd_customer`, `make_ticket`, `make_team`
+  - Toggle helpers: `enable_<feature>()` / `disable_<feature>()` — e.g. `enable_erpnext_sync`
+  - Query helpers: descriptive verb — e.g. `get_latest_ticket_communication`
+
+**For updates, merge new conventions here. If anything is unclear or missing, ask for clarification.**
+
+**In the end your code will be reviewed by Codex, but following these rules will help ensure a smooth review process and a high-quality codebase.**

README.md

@@ -42,7 +42,7 @@ Managing issues from our customers was a big challenge for us. We were using the
 
 - **Knowledge Base**: Learn how to create and manage help articles to empower users and reduce tickets.
 
-- **Canned Responses**: Pre-written replies for common queries to ensure quick and consistent communication.
+- **Saved Replies**: Pre-written replies for common queries to ensure quick and consistent communication.
 
 <details open>
 <summary >View Screenshots</summary>
@@ -165,8 +165,10 @@ To setup the repository locally follow the steps mentioned below:
 1. Start the server by running `bench start`
 1. In a separate terminal window, create a new site by running `bench new-site helpdesk.test`
 1. Map your site to localhost with the command `bench --site helpdesk.test add-to-hosts`
+1. Get the Telephony app. Run `bench get-app https://github.com/frappe/telephony`
 1. Get the Helpdesk app. Run `bench get-app https://github.com/frappe/helpdesk`
 1. Run `bench --site helpdesk.test install-app helpdesk`.
+1. Run `bench build --app helpdesk`
 1. Now open the URL `http://helpdesk.test:8000/helpdesk` in your browser, you should see the app running
 
 
@@ -180,12 +182,29 @@ To setup the repository locally follow the steps mentioned below:
 
 **Note:** You'll find all the code related to Helpdesk's frontend inside `frappe-bench/apps/helpdesk/desk`
 
+
+## Compatibility matrix 
+
+| Helpdesk Branch | Compatible Frappe Framework Version |
+|-----------------|-------------------------------------|
+| main            | version-15                          |
+| main            | version-16                          |
+| develop         | develop branch                      |
+
+
 ## Learn and connect
 
 - [Telegram Public Group](https://t.me/frappedesk)
 - [Discuss Forum](https://discuss.frappe.io/c/frappehelpdesk/69)
 - [Documentation](https://docs.frappe.io/helpdesk)
 
+## Contributing
+
+1. [Issue Guidelines](https://github.com/frappe/erpnext/wiki/Issue-Guidelines)
+1. [Report Security Vulnerabilities](https://frappe.io/security)
+1. [Pull Request Requirements](https://github.com/frappe/erpnext/wiki/Contribution-Guidelines)
+2. [Translations](https://crowdin.com/project/frappe)
+
 <br>
 <br>
 <div align="center">

commitlint.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   parserPreset: "conventional-changelog-conventionalcommits",
   rules: {
     "subject-empty": [2, "never"],

crowdin.yml

@@ -0,0 +1,8 @@
+files:
+  - source: /helpdesk/locale/main.pot
+    translation: /helpdesk/locale/%two_letters_code%.po
+pull_request_title: "chore: sync translations from crowdin"
+pull_request_labels:
+  - translation
+commit_message: "chore: %language% translations"
+append_commit_message: false

desk/auto-imports.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const LucideAlignJustify: typeof import('~icons/lucide/align-justify')['default']
+  const LucideCornerUpLeft: typeof import('~icons/lucide/corner-up-left')['default']
+  const LucideFileSearch: typeof import('~icons/lucide/file-search')['default']
+  const LucideMessageCircle: typeof import('~icons/lucide/message-circle')['default']
+  const LucideTag: typeof import('~icons/lucide/tag')['default']
+}

desk/index.html

@@ -1,8 +1,7 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ boot.lang or 'en' }}" dir="{{ boot.dir or 'ltr' }}">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Helpdesk</title>
     <meta name="mobile-web-app-capable" content="yes" />
@@ -206,11 +205,7 @@
     <div id="popovers"></div>
     <script type="module" src="/src/main.js"></script>
     <script>
-      window.favicon = "{{ favicon }}";
-
-      document.querySelectorAll("link[rel='icon']").forEach((link) => {
-        link.href = window.favicon;
-      });
+      window.site_name = "{{ site_name }}";
     </script>
   </body>
 </html>

desk/lucide.ts

@@ -1,37 +0,0 @@
-import * as LucideIcons from "lucide-static";
-
-const icons = {};
-for (const icon in LucideIcons) {
-  let iconSvg = LucideIcons[icon];
-  if (icon == "default") {
-    continue;
-  }
-
-  // set stroke-width to 1.5
-  if (iconSvg && iconSvg.includes("stroke-width")) {
-    iconSvg = iconSvg.replace(/stroke-width="2"/g, 'stroke-width="1.5"');
-  }
-  icons[icon] = iconSvg;
-
-  const dashKeys = camelToDash(icon);
-  for (const dashKey of dashKeys) {
-    if (dashKey !== icon) {
-      icons[dashKey] = iconSvg;
-    }
-  }
-}
-
-export default icons;
-
-function camelToDash(key) {
-  // barChart2 -> bar-chart-2
-  const withNumber = key.replace(/[A-Z0-9]/g, (m) => "-" + m.toLowerCase());
-  // barChart2 -> bar-chart2
-  const withoutNumber = key.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-
-  if (withNumber !== withoutNumber) {
-    // both are required because unplugin icon resolver doesn't put a dash before numbers
-    return [withNumber, withoutNumber];
-  }
-  return [withNumber];
-}

desk/package.json

@@ -2,54 +2,60 @@
   "name": "helpdesk-ui",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "postinstall": "patch-package"
   },
   "dependencies": {
+    "@framework/ui": "link:../../frappe/ui",
     "@headlessui/vue": "^1.7.22",
-    "@iconify-json/lucide": "^1.1.99",
-    "@iconify-json/ph": "^1.1.5",
-    "@iconify/tools": "^2.2.6",
-    "@iconify/vue": "^4.1.1",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
-    "@tiptap/core": "^2.2.4",
+    "@tiptap/core": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
+    "@tiptap/extension-text-align": "^3.26.0",
+    "@tiptap/extension-text-style": "^3.26.0",
+    "@tiptap/pm": "^3.26.0",
+    "@tiptap/starter-kit": "^3.26.0",
+    "@twilio/voice-sdk": "^2.15.0",
     "@vee-validate/zod": "^4.8.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/core": "^10.0.2",
-    "@vueuse/integrations": "^12.0.0",
-    "autoprefixer": "^10.4.13",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/integrations": "^14.1.0",
     "dayjs": "^1.11.7",
-    "echarts": "^5.4.1",
-    "frappe-ui": "0.1.119",
-    "lodash": "^4.17.21",
-    "lucide-static": "^0.276.0",
+    "echarts": "^6.1.0",
+    "grid-layout-plus": "^1.1.0",
+    "frappe-ui": "1.0.0-rc.1",
     "mime": "^3.0.0",
-    "mitt": "^3.0.1",
     "pinia": "^2.0.33",
-    "pluralize": "^8.0.0",
     "sanitize-html": "^2.10.0",
     "socket.io-client": "^4.7.2",
-    "tailwindcss": "^3.2.7",
-    "unplugin-icons": "^0.16.1",
-    "unplugin-vue-components": "^0.25.2",
-    "vee-validate": "^4.8.2",
-    "vite": "^4.4.9",
-    "vue": "^3.4.12",
-    "vue-echarts": "^6.5.4",
+    "tailwindcss-rtl": "^0.9.0",
+    "vue": "^3.5.14",
     "vue-router": "^4.2.2",
     "vuedraggable": "^4.1.0",
-    "gemoji": "^8.1.0",
     "zod": "^3.21.4"
   },
-  "resolutions": {
-    "cheerio": "1.0.0-rc.12"
-  },
   "devDependencies": {
-    "vite-plugin-pwa": "^0.20.5",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "autoprefixer": "^10.4.13",
+    "patch-package": "^8.0.1",
+    "postcss": "^8.4.5",
+    "postinstall-postinstall": "^2.1.0",
+    "prettier": "2.8.4",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.0.2",
-    "prettier": "2.8.4"
+    "unplugin-icons": "^22.1.0",
+    "vite": "^5.4.21",
+    "vite-plugin-pwa": "0.17.5"
+  },
+  "resolutions": {
+    "cheerio": "1.0.0-rc.12",
+    "prosemirror-model": "1.25.9",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-view": "1.41.9",
+    "prosemirror-transform": "1.12.0"
   }
 }

desk/patches/frappe-ui+1.0.0-rc.1.patch

@@ -0,0 +1,70 @@
+diff --git a/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts b/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
+index 91c8dc4..2883b93 100644
+--- a/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
++++ b/node_modules/frappe-ui/src/molecules/editor/extensions/shared/suggestion-renderer.ts
+@@ -5,6 +5,7 @@ import type {
+ } from '@tiptap/suggestion'
+ import type { Component } from 'vue'
+ import {
++  autoUpdate,
+   computePosition,
+   flip,
+   offset,
+@@ -40,6 +41,9 @@ export function createSuggestionRenderer(
+   let isActive = false
+   // Monotonic token; a stale onUpdate from a superseded query bails.
+   let renderToken = 0
++  // Monotonic token; a stale computePosition settling later bails.
++  let positionToken = 0
++  let cleanupAutoUpdate: (() => void) | null = null
+ 
+   function getListExpose(): SuggestionListExpose | null {
+     const ref = renderer?.ref as SuggestionListExpose | null | undefined
+@@ -52,6 +56,7 @@ export function createSuggestionRenderer(
+     const rect = getReferenceClientRect()
+     if (!rect) return
+     const reference = { getBoundingClientRect: () => rect }
++    const token = ++positionToken
+     void computePosition(reference, floatingEl, {
+       placement: floatingOptions?.placement ?? 'bottom-start',
+       middleware: [
+@@ -60,7 +65,7 @@ export function createSuggestionRenderer(
+         shift({ padding: 8 }),
+       ],
+     }).then(({ x, y }) => {
+-      if (!floatingEl) return
++      if (!floatingEl || token !== positionToken) return
+       Object.assign(floatingEl.style, {
+         position: 'absolute',
+         left: `${x}px`,
+@@ -93,7 +98,19 @@ export function createSuggestionRenderer(
+     floatingEl.style.position = 'absolute'
+     document.body.appendChild(floatingEl)
+     getReferenceClientRect = props.clientRect as () => DOMRect | null
+-    updatePosition()
++
++    // Positions once, then keeps the popup on the caret through scroll, window
++    // resize and its own height changes (`flip()` measures a height that async
++    // rows and late fonts change after the fact).
++    cleanupAutoUpdate = autoUpdate(
++      {
++        getBoundingClientRect: () =>
++          getReferenceClientRect?.() ?? new DOMRect(),
++        contextElement: props.editor?.view?.dom as HTMLElement | undefined,
++      },
++      floatingEl,
++      updatePosition,
++    )
+   }
+ 
+   return {
+@@ -139,6 +156,9 @@ export function createSuggestionRenderer(
+     onExit() {
+       isActive = false
+       renderToken++
++      positionToken++
++      cleanupAutoUpdate?.()
++      cleanupAutoUpdate = null
+       floatingEl?.remove()
+       renderer?.destroy()
+       floatingEl = null

desk/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

desk/src/App.vue

@@ -1,39 +1,45 @@
 <template>
-  <RouterView class="antialiased" />
-  <Toasts />
-  <KeymapDialog />
+  <FrappeUIProvider>
+    <router-view />
+  </FrappeUIProvider>
   <Dialogs />
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from "vue";
-import { Toasts } from "frappe-ui";
-import { createToast } from "@/utils";
+import { Dialogs } from "@/components/dialogs";
 import { useConfigStore } from "@/stores/config";
-import KeymapDialog from "@/pages/KeymapDialog.vue";
-import { stopSession } from "@/telemetry";
-import { Dialogs } from "frappe-ui";
-useConfigStore();
+import { useFavicon } from "@vueuse/core";
+import { FrappeUIProvider, setConfig, toast, useColorScheme } from "frappe-ui";
+import { storeToRefs } from "pinia";
+import { h, onMounted } from "vue";
+import Wifi from "~icons/lucide/wifi";
+import WifiOff from "~icons/lucide/wifi-off";
+import { __ } from "./translation";
+import { isCustomerPortal } from "./utils";
+
+const configStore = useConfigStore();
+const { favicon } = storeToRefs(configStore);
+
+useFavicon(favicon);
+
+if (!localStorage.getItem("theme")) {
+  localStorage.setItem("theme", "light");
+}
+useColorScheme();
 
 onMounted(() => {
   window.addEventListener("online", () => {
-    createToast({
-      title: "You are now online",
-      icon: "wifi",
-      iconClasses: "stroke-green-600",
+    toast(__("You are now online."), {
+      icon: () => h(Wifi, { class: "text-ink-base" }),
     });
   });
 
   window.addEventListener("offline", () => {
-    createToast({
-      title: "You are now offline",
-      icon: "wifi-off",
-      iconClasses: "stroke-red-600",
+    toast(__("You are now offline."), {
+      icon: () => h(WifiOff, { class: "text-ink-base" }),
     });
   });
-});
-
-onUnmounted(() => {
-  stopSession();
+  !isCustomerPortal.value && setConfig("localTimezone", window.timezone?.user);
+  setConfig("systemTimezone", window.timezone?.system || null);
 });
 </script>

desk/src/assets/Inter/inter.css

@@ -1,152 +0,0 @@
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 100;
-	font-display: swap;
-	src: url("Inter-Thin.woff2?v=3.12") format("woff2"),
-		url("Inter-Thin.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 100;
-	font-display: swap;
-	src: url("Inter-ThinItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-ThinItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 200;
-	font-display: swap;
-	src: url("Inter-ExtraLight.woff2?v=3.12") format("woff2"),
-		url("Inter-ExtraLight.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 200;
-	font-display: swap;
-	src: url("Inter-ExtraLightItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-ExtraLightItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 300;
-	font-display: swap;
-	src: url("Inter-Light.woff2?v=3.12") format("woff2"),
-		url("Inter-Light.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 300;
-	font-display: swap;
-	src: url("Inter-LightItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-LightItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url("Inter-Regular.woff2?v=3.12") format("woff2"),
-		url("Inter-Regular.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 400;
-	font-display: swap;
-	src: url("Inter-Italic.woff2?v=3.12") format("woff2"),
-		url("Inter-Italic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 500;
-	font-display: swap;
-	src: url("Inter-Medium.woff2?v=3.12") format("woff2"),
-		url("Inter-Medium.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 500;
-	font-display: swap;
-	src: url("Inter-MediumItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-MediumItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 600;
-	font-display: swap;
-	src: url("Inter-SemiBold.woff2?v=3.12") format("woff2"),
-		url("Inter-SemiBold.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 600;
-	font-display: swap;
-	src: url("Inter-SemiBoldItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-SemiBoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url("Inter-Bold.woff2?v=3.12") format("woff2"),
-		url("Inter-Bold.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 700;
-	font-display: swap;
-	src: url("Inter-BoldItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-BoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 800;
-	font-display: swap;
-	src: url("Inter-ExtraBold.woff2?v=3.12") format("woff2"),
-		url("Inter-ExtraBold.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 800;
-	font-display: swap;
-	src: url("Inter-ExtraBoldItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-ExtraBoldItalic.woff?v=3.12") format("woff");
-}
-
-@font-face {
-	font-family: "Inter";
-	font-style: normal;
-	font-weight: 900;
-	font-display: swap;
-	src: url("Inter-Black.woff2?v=3.12") format("woff2"),
-		url("Inter-Black.woff?v=3.12") format("woff");
-}
-@font-face {
-	font-family: "Inter";
-	font-style: italic;
-	font-weight: 900;
-	font-display: swap;
-	src: url("Inter-BlackItalic.woff2?v=3.12") format("woff2"),
-		url("Inter-BlackItalic.woff?v=3.12") format("woff");
-}

desk/src/components/Apps.vue

@@ -1,66 +0,0 @@
-<template>
-  <Popover placement="right-start" class="flex w-full">
-    <template #target="{ togglePopover }">
-      <button
-        :class="[
-          'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
-        ]"
-        @click.prevent="togglePopover()"
-      >
-        <div class="flex gap-2">
-          <AppsIcon />
-          <span class="whitespace-nowrap">Apps</span>
-        </div>
-        <ChevronRight class="h-4 w-4 stroke-1.5" />
-      </button>
-    </template>
-    <template #body>
-      <div
-        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
-      >
-        <div v-for="app in apps.data" key="name">
-          <a
-            :href="app.route"
-            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
-          >
-            <img class="size-8" :src="app.logo" />
-            <div class="text-sm" @click="app.onClick">
-              {{ app.title }}
-            </div>
-          </a>
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
-<script setup>
-import { Popover, createResource } from "frappe-ui";
-import AppsIcon from "./icons/AppsIcon.vue";
-import ChevronRight from "~icons/lucide/chevron-right";
-
-const apps = createResource({
-  url: "frappe.apps.get_apps",
-  cache: "apps",
-  auto: true,
-  transform: (data) => {
-    let _apps = [
-      {
-        name: "frappe",
-        logo: "/assets/helpdesk/desk/desk.png",
-        title: "Desk",
-        route: "/app",
-      },
-    ];
-    data.map((app) => {
-      if (app.name === "helpdesk") return;
-      _apps.push({
-        name: app.name,
-        logo: app.logo,
-        title: app.title,
-        route: app.route,
-      });
-    });
-    return _apps;
-  },
-});
-</script>

desk/src/components/AssignmentModal.vue

@@ -1,128 +0,0 @@
-<template>
-  <Dialog
-    v-model="show"
-    :options="{
-      title: 'Assign To',
-      size: 'xl',
-    }"
-  >
-    <template #body-content>
-      <SearchComplete
-        class="form-control"
-        doctype="HD Agent"
-        :custom-filters="customFilters"
-        :reset-input="true"
-        @change="
-          (option) => {
-            addAssignee(option.value);
-          }
-        "
-      >
-        <template #item-prefix="{ option }">
-          <UserAvatar class="mr-2" :name="option.value" size="sm" />
-        </template>
-        <template #item-label="{ option }">
-          <Tooltip :text="option.value">
-            {{ getUser(option.value).full_name }}
-          </Tooltip>
-        </template>
-      </SearchComplete>
-      <div class="mt-3 flex flex-wrap items-center gap-2">
-        <Tooltip
-          v-for="currentAssignee in assignees"
-          :key="currentAssignee.name"
-          :text="currentAssignee.name"
-        >
-          <Button
-            :label="getUser(currentAssignee.name).full_name"
-            theme="gray"
-            variant="outline"
-          >
-            <template #prefix>
-              <UserAvatar :name="currentAssignee.name" size="sm" />
-            </template>
-            <template #suffix>
-              <FeatherIcon
-                class="h-3.5"
-                name="x"
-                @click.stop="removeCurrentAssignee(currentAssignee.name)"
-              />
-            </template>
-          </Button>
-        </Tooltip>
-      </div>
-      <ErrorMessage v-if="error" class="mt-2" :message="error" />
-    </template>
-  </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { createResource } from "frappe-ui";
-import { UserAvatar, SearchComplete } from "@/components";
-import { useUserStore } from "@/stores/user";
-
-const props = defineProps({
-  assignees: {
-    type: Array,
-    required: true,
-  },
-  doctype: {
-    type: String,
-    required: true,
-  },
-  docname: {
-    type: String,
-    required: true,
-  },
-});
-
-const show = defineModel();
-
-const emit = defineEmits(["update"]);
-
-const { getUser } = useUserStore();
-
-const error = ref("");
-
-const addAssignee = (value) => {
-  error.value = "";
-  createResource({
-    url: "frappe.desk.form.assign_to.add",
-    auto: true,
-    params: {
-      doctype: props.doctype,
-      name: props.docname,
-      assign_to: [value],
-    },
-    onSuccess: () => {
-      emit("update");
-    },
-  });
-  emit("update");
-};
-
-const removeCurrentAssignee = (value) => {
-  createResource({
-    url: "frappe.desk.form.assign_to.remove",
-    auto: true,
-    params: {
-      doctype: props.doctype,
-      name: props.docname,
-      assign_to: value,
-    },
-    onSuccess: () => {
-      emit("update");
-    },
-  });
-};
-
-const customFilters = computed(() => {
-  const filters = {};
-  filters["is_active"] = ["=", 1];
-  if (Boolean(props.assignees?.length)) {
-    filters["name"] = ["not in", [...props.assignees.map((a) => a.name)]];
-  }
-  return filters;
-});
-</script>

desk/src/components/AttachmentItem.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <a :href="isShowable ? null : url" target="_blank">
+    <a :href="preview ? undefined : url" target="_blank">
       <Button
         :label="label"
         theme="gray"
@@ -8,72 +8,113 @@
         @click="toggleDialog()"
       >
         <template #prefix>
-          <component :is="getIcon()" class="h-4 w-4" />
+          <component :is="icon" class="h-4 w-4" />
         </template>
         <template #suffix>
           <slot name="suffix" />
         </template>
       </Button>
     </a>
-    <Dialog
-      v-model="showDialog"
-      :options="{
-        title: label,
-        size: '4xl',
-      }"
-    >
-      <template #body-content>
+    <Dialog v-model:open="showDialog" :title="label" size="4xl">
+      <template #default>
         <div
-          v-if="isText"
+          v-if="preview === 'text'"
           class="prose prose-sm max-w-none whitespace-pre-wrap"
         >
           {{ content }}
         </div>
-        <img v-if="isImage" :src="url" class="m-auto rounded border" />
+        <img
+          v-if="preview === 'image'"
+          :src="url"
+          class="m-auto rounded-4 border"
+        />
+        <video
+          v-if="preview === 'video'"
+          :src="url"
+          controls
+          class="m-auto max-h-[70vh] rounded-4 border"
+        />
       </template>
     </Dialog>
   </span>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { Button, Dialog } from "frappe-ui";
 import { getType as getMime } from "mime";
-import LucideFileType from "~icons/lucide/file-type";
-import LucideFileImage from "~icons/lucide/file-image";
-import LucideFileText from "~icons/lucide/file-text";
-import LucideFileSpreadsheet from "~icons/lucide/file-spreadsheet";
+import { markRaw, ref, type Component } from "vue";
 import LucideFile from "~icons/lucide/file";
+import LucideFileImage from "~icons/lucide/file-image";
+import LucideFileSpreadsheet from "~icons/lucide/file-spreadsheet";
+import LucideFileText from "~icons/lucide/file-text";
+import LucideFileType from "~icons/lucide/file-type";
+import LucideFileVideo from "~icons/lucide/file-video";
 
 interface P {
   label: string;
-  url?: string;
+  url?: string | null;
 }
 
 const props = withDefaults(defineProps<P>(), {
   url: null,
 });
 
-const showDialog = ref(false);
-const mimeType = getMime(props.label) || "";
-const isImage = mimeType.startsWith("image/");
-const isPdf = mimeType === "application/pdf";
-const isSpreadsheet = mimeType.includes("spreadsheet");
-const isText = mimeType === "text/plain";
-const isShowable = props.url && (isText || isImage);
-const content = ref("");
+type AttachmentKind =
+  | "image"
+  | "video"
+  | "pdf"
+  | "spreadsheet"
+  | "text"
+  | "file";
 
-function getIcon() {
-  if (isText) return LucideFileType;
-  else if (isImage) return LucideFileImage;
-  else if (isPdf) return LucideFileText;
-  else if (isSpreadsheet) return LucideFileSpreadsheet;
-  else return LucideFile;
+const ICONS: Record<AttachmentKind, Component> = {
+  image: markRaw(LucideFileImage),
+  video: markRaw(LucideFileVideo),
+  pdf: markRaw(LucideFileText),
+  spreadsheet: markRaw(LucideFileSpreadsheet),
+  text: markRaw(LucideFileType),
+  file: markRaw(LucideFile),
+};
+
+// browsers render only some image/video mimes (.dwg is image/vnd.dwg, .avi is
+// video/x-msvideo) — anything absent here becomes a download link like pdf
+type Preview = "image" | "video" | "text";
+
+const PREVIEWS: Record<string, Preview> = {
+  "image/png": "image",
+  "image/jpeg": "image",
+  "image/gif": "image",
+  "image/webp": "image",
+  "image/svg+xml": "image",
+  "image/avif": "image",
+  "image/bmp": "image",
+  "image/apng": "image",
+  "image/vnd.microsoft.icon": "image",
+  "video/mp4": "video",
+  "video/webm": "video",
+  "video/ogg": "video",
+  "video/x-m4v": "video",
+  "text/plain": "text",
+};
+
+function getKind(mime: string): AttachmentKind {
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime === "application/pdf") return "pdf";
+  if (mime.includes("spreadsheet")) return "spreadsheet";
+  if (mime === "text/plain") return "text";
+  return "file";
 }
 
+const showDialog = ref(false);
+const mimeType = getMime(props.label) || "";
+const icon = ICONS[getKind(mimeType)];
+const preview = props.url ? PREVIEWS[mimeType] : undefined;
+const content = ref("");
+
 function toggleDialog() {
-  if (!isShowable) return;
-  if (isText) {
+  if (!preview) return;
+  if (preview === "text") {
     fetch(props.url).then((res) => res.text().then((t) => (content.value = t)));
   }
   showDialog.value = !showDialog.value;

desk/src/components/AttachmentList.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <AttachmentItem
+      v-for="attachment in attachments"
+      :key="attachment.file_url"
+      :label="attachment.file_name"
+      :url="attachment.file_url"
+    >
+      <template #suffix>
+        <LucideX
+          class="size-3.5 cursor-pointer text-ink-gray-6 transition-colors hover:text-ink-gray-9"
+          @click.stop.prevent="emit('remove', attachment)"
+        />
+      </template>
+    </AttachmentItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AttachmentItem } from "@/components";
+import LucideX from "~icons/lucide/x";
+
+interface Attachment {
+  file_url: string;
+  file_name: string;
+}
+
+withDefaults(defineProps<{ attachments?: Attachment[] }>(), {
+  attachments: () => [],
+});
+
+const emit = defineEmits<{ remove: [attachment: Attachment] }>();
+</script>

desk/src/components/Autocomplete.vue

@@ -1,280 +0,0 @@
-<template>
-  <Combobox v-slot="{ open: isComboboxOpen }" v-model="selectedValue" nullable>
-    <Popover v-model:show="showOptions" class="w-full">
-      <template #target="{ open: openPopover, togglePopover }">
-        <slot name="target" v-bind="{ open: openPopover, togglePopover }">
-          <div class="w-full">
-            <button
-              class="flex w-full items-center justify-between focus:outline-none"
-              :class="inputClasses"
-              @click="() => togglePopover()"
-            >
-              <div class="flex items-center">
-                <slot name="prefix" />
-                <span
-                  v-if="selectedValue"
-                  class="overflow-hidden text-ellipsis whitespace-nowrap text-base leading-5"
-                >
-                  {{ displayValue(selectedValue) }}
-                </span>
-                <span v-else class="text-base leading-5 text-gray-500">
-                  {{ placeholder || "" }}
-                </span>
-              </div>
-              <FeatherIcon
-                name="chevron-down"
-                class="h-4 w-4 text-gray-600"
-                aria-hidden="true"
-              />
-            </button>
-          </div>
-        </slot>
-      </template>
-      <template #body="{ isOpen }">
-        <div v-show="isOpen">
-          <div class="mt-1 rounded-lg bg-white py-1 text-base shadow-2xl">
-            <div class="relative px-1.5 pt-0.5">
-              <ComboboxInput
-                ref="search"
-                class="form-input w-full"
-                type="text"
-                :value="query"
-                autocomplete="off"
-                placeholder="Search"
-                @change="
-                  (e) => {
-                    query = e.target.value;
-                  }
-                "
-              />
-              <button
-                class="absolute right-1.5 inline-flex h-7 w-7 items-center justify-center"
-                @click="selectedValue = null"
-              >
-                <FeatherIcon name="x" class="w-4" />
-              </button>
-            </div>
-            <ComboboxOptions
-              class="my-1 max-h-[12rem] overflow-y-auto px-1.5"
-              static
-            >
-              <div
-                v-for="group in groups"
-                v-show="group.items.length > 0"
-                :key="group.key"
-                class="mt-1.5"
-              >
-                <div
-                  v-if="group.group && !group.hideLabel"
-                  class="px-2.5 py-1.5 text-sm font-medium text-gray-500"
-                >
-                  {{ group.group }}
-                </div>
-                <ComboboxOption
-                  v-for="option in group.items"
-                  :key="option.value"
-                  v-slot="{ active, selected }"
-                  as="template"
-                  :value="option"
-                >
-                  <li
-                    :class="[
-                      'flex items-center rounded px-2.5 py-1.5 text-base',
-                      { 'bg-gray-100': active },
-                    ]"
-                  >
-                    <slot
-                      name="item-prefix"
-                      v-bind="{ active, selected, option }"
-                    />
-                    <slot
-                      name="item-label"
-                      v-bind="{ active, selected, option }"
-                    >
-                      {{ option.label }}
-                    </slot>
-                  </li>
-                </ComboboxOption>
-              </div>
-              <li
-                v-if="groups.length == 0"
-                class="mt-1.5 rounded-md px-2.5 py-1.5 text-base text-gray-600"
-              >
-                No results found
-              </li>
-            </ComboboxOptions>
-            <div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
-              <slot
-                name="footer"
-                v-bind="{ value: search?.el._value, close }"
-              ></slot>
-            </div>
-          </div>
-        </div>
-      </template>
-    </Popover>
-  </Combobox>
-</template>
-
-<script setup>
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOptions,
-  ComboboxOption,
-} from "@headlessui/vue";
-import { Popover, Button, FeatherIcon } from "frappe-ui";
-import { ref, computed, useAttrs, useSlots, watch, nextTick } from "vue";
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  size: {
-    type: String,
-    default: "md",
-  },
-  variant: {
-    type: String,
-    default: "subtle",
-  },
-  placeholder: {
-    type: String,
-    default: "",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  filterable: {
-    type: Boolean,
-    default: true,
-  },
-});
-const emit = defineEmits(["update:modelValue", "update:query", "change"]);
-
-const query = ref("");
-const showOptions = ref(false);
-const search = ref(null);
-
-const attrs = useAttrs();
-const slots = useSlots();
-
-const valuePropPassed = computed(() => "value" in attrs);
-
-const selectedValue = computed({
-  get() {
-    return valuePropPassed.value ? attrs.value : props.modelValue;
-  },
-  set(val) {
-    query.value = "";
-    if (val) {
-      showOptions.value = false;
-    }
-    emit(valuePropPassed.value ? "change" : "update:modelValue", val);
-  },
-});
-
-function close() {
-  showOptions.value = false;
-}
-
-const groups = computed(() => {
-  if (!props.options || props.options.length == 0) return [];
-
-  let groups = props.options[0]?.group
-    ? props.options
-    : [{ group: "", items: props.options }];
-
-  return groups
-    .map((group, i) => {
-      return {
-        key: i,
-        group: group.group,
-        hideLabel: group.hideLabel || false,
-        items: props.filterable ? filterOptions(group.items) : group.items,
-      };
-    })
-    .filter((group) => group.items.length > 0);
-});
-
-function filterOptions(options) {
-  if (!query.value) {
-    return options;
-  }
-  return options.filter((option) => {
-    let searchTexts = [option.label, option.value];
-    return searchTexts.some((text) =>
-      (text || "").toString().toLowerCase().includes(query.value.toLowerCase())
-    );
-  });
-}
-
-function displayValue(option) {
-  if (typeof option === "string") {
-    let allOptions = groups.value.flatMap((group) => group.items);
-    let selectedOption = allOptions.find((o) => o.value === option);
-    return selectedOption?.label || option;
-  }
-  return option?.label;
-}
-
-watch(query, (q) => {
-  emit("update:query", q);
-});
-
-watch(showOptions, (val) => {
-  if (val) {
-    nextTick(() => {
-      search.value.el.focus();
-    });
-  }
-});
-
-const textColor = computed(() => {
-  return props.disabled ? "text-gray-600" : "text-gray-800";
-});
-
-const inputClasses = computed(() => {
-  let sizeClasses = {
-    sm: "text-base rounded h-7",
-    md: "text-base rounded h-8",
-    lg: "text-lg rounded-md h-10",
-    xl: "text-xl rounded-md h-10",
-  }[props.size];
-
-  let paddingClasses = {
-    sm: "py-1.5 px-2",
-    md: "py-1.5 px-2.5",
-    lg: "py-1.5 px-3",
-    xl: "py-1.5 px-3",
-  }[props.size];
-
-  let variant = props.disabled ? "disabled" : props.variant;
-  let variantClasses = {
-    subtle:
-      "border border-gray-100 bg-gray-100 placeholder-gray-500 hover:border-gray-200 hover:bg-gray-200 focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400",
-    outline:
-      "border border-gray-300 bg-white placeholder-gray-500 hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400",
-    disabled: [
-      "border bg-gray-50 placeholder-gray-400",
-      props.variant === "outline" ? "border-gray-300" : "border-transparent",
-    ],
-  }[variant];
-
-  return [
-    sizeClasses,
-    paddingClasses,
-    variantClasses,
-    textColor.value,
-    "transition-colors w-full",
-  ];
-});
-
-defineExpose({ query });
-</script>

desk/src/components/AvailabilityMenu.vue

@@ -0,0 +1,32 @@
+<template>
+  <Select
+    :model-value="agentStatusStore.myStatus"
+    :options="dropdownOptions"
+    :placeholder="__('Set status')"
+    variant="subtle"
+    @update:model-value="agentStatusStore.setMyStatus"
+  >
+    <template #item-prefix="{ item }">
+      <div
+        class="size-2 rounded-full flex-shrink-0"
+        :class="agentStatusStore.statusColor(item.value)"
+      />
+    </template>
+  </Select>
+</template>
+
+<script setup lang="ts">
+import { useAgentStatusStore } from "@/stores/agentStatus";
+import { __ } from "@/translation";
+import { Select } from "frappe-ui";
+import { computed } from "vue";
+
+const agentStatusStore = useAgentStatusStore();
+
+const dropdownOptions = computed(() =>
+  agentStatusStore.statusOptions.map((statusOption: string) => ({
+    label: __(statusOption),
+    value: statusOption,
+  }))
+);
+</script>

desk/src/components/BackButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <Button
+    variant="ghost"
+    icon-left="lucide-chevron-left"
+    :label="label"
+    :size="size"
+    class="!justify-start truncate font-medium text-ink-gray-8 hover:bg-transparent hover:opacity-70 focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 active:bg-transparent active:outline-none active:ring-0 rtl:flex-row-reverse ps-1"
+    @click="$emit('back')"
+  />
+</template>
+
+<script setup lang="ts">
+import { Button } from "frappe-ui";
+
+interface P {
+  label: string;
+  size?: string;
+}
+
+interface E {
+  (event: "back"): void;
+}
+
+withDefaults(defineProps<P>(), { size: "md" });
+defineEmits<E>();
+</script>

desk/src/components/BarChartCard.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="w-full h-full overflow-hidden">
+    <CardBase
+      :title="title"
+      :text="chartData.text"
+      :percentageChange="chartData.percentageChange"
+      :chartConfig="hasData ? chartConfig : placeholderChartConfig"
+      :currentDuration="currentDuration"
+      :orientation="orientation"
+      :timelineFilter="timelineFilter"
+      @changeDuration="changeDuration"
+    >
+      <template v-if="$slots.text" #text>
+        <slot name="text" v-bind="{ text: chartData.text }" />
+      </template>
+    </CardBase>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { __ } from "@/translation";
+import { buildPercentageChange } from "@/utils";
+import { EChartsOption } from "echarts";
+import { createResource } from "frappe-ui";
+import { computed, onMounted, ref, type PropType } from "vue";
+import CardBase from "./ChartCardBase.vue";
+
+interface BarChartData {
+  percentage_change?: number;
+  total?: number;
+  average?: number;
+  data: { date: string; count: number }[] | Record<number, number>;
+  total_reviews?: number;
+}
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  apiUrl: {
+    type: String,
+    required: false,
+  },
+  data: {
+    type: Object as PropType<BarChartData>,
+    required: true,
+  },
+  barColor: {
+    type: String,
+    default: "#3BBDE5",
+  },
+  dt: {
+    type: String,
+    required: false,
+  },
+  dn: {
+    type: String,
+    required: false,
+  },
+  orientation: {
+    type: String as PropType<"vertical" | "horizontal">,
+    default: "vertical",
+  },
+  measure: {
+    type: String as PropType<"total" | "average">,
+    default: "total",
+  },
+  negativeIsBetter: {
+    type: Boolean,
+    default: true,
+  },
+  timelineFilter: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// the untranslated key: it is lowercased straight into the API period
+const currentDuration = ref("Last month");
+
+const chartData = computed(() => {
+  const isDataFetched = resource.fetched;
+  const _data: BarChartData = isDataFetched ? resource.data : props.data;
+
+  // Star-distribution shape: data is { 1: n, 2: n, ... }
+  if (!props.timelineFilter && _data?.data && !Array.isArray(_data.data)) {
+    const distribution = _data.data as Record<number, number>;
+    const values = [1, 2, 3, 4, 5].map((s) => distribution[s] ?? 0);
+    return {
+      labels: ["1", "2", "3", "4", "5"],
+      counts: values,
+      percentageChange: buildPercentageChange(0, props.negativeIsBetter),
+      text: _data?.average ?? 0,
+      isStarDistribution: true,
+    };
+  }
+
+  // Time-series shape: data is [{ date, count }, ...]
+  const timeData = Array.isArray(_data?.data)
+    ? (_data.data as { date: string; count: number }[])
+    : [];
+  const labels = timeData.map((item) => item.date);
+  const counts = timeData.map((item) => item.count);
+  const _percentageChange = _data?.percentage_change || 0;
+  const percentageChange = buildPercentageChange(
+    _percentageChange,
+    props.negativeIsBetter
+  );
+
+  return {
+    labels,
+    counts,
+    percentageChange,
+    text: props.measure === "average" ? _data?.average ?? 0 : _data?.total ?? 0,
+    isStarDistribution: false,
+  };
+});
+
+const hasData = computed(() => {
+  const counts = chartData.value.counts as number[];
+  return counts.length > 0 && counts.some((c) => c > 0);
+});
+
+const chartConfig = computed<EChartsOption>(() => {
+  const color = props.barColor;
+
+  if (chartData.value.isStarDistribution) {
+    const values = chartData.value.counts as number[];
+    // rank by value descending: index 0 = highest, 4 = lowest
+    const opacities = [1, 0.7, 0.5, 0.3, 0.2];
+    const baseColor = props.barColor; // #E79913
+
+    // unique sorted counts descending (for tie-aware rank lookup)
+    const uniqueSorted = [...new Set(values)].sort((a, b) => b - a);
+
+    const opacityByIndex: number[] = values.map((v) => {
+      const rank = uniqueSorted.indexOf(v); // same count → same rank
+      return opacities[Math.min(rank, opacities.length - 1)];
+    });
+
+    // helper: hex + opacity → rgba
+    const hexToRgba = (hex: string, alpha: number) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
+
+    return {
+      grid: { left: 4, right: 4, top: 16, bottom: 20, containLabel: false },
+      xAxis: {
+        type: "category",
+        data: ["1", "2", "3", "4", "5"],
+        axisLine: { show: true, lineStyle: { color: "#ededed" } },
+        axisTick: { show: false },
+        axisLabel: { color: "#6b7280", fontSize: 11 },
+      },
+      yAxis: { type: "value", show: false, min: 0 },
+      series: [
+        {
+          type: "bar",
+          data: values.map((value, i) => ({
+            value: value === 0 ? 0 : value,
+            itemStyle: {
+              color: hexToRgba(baseColor, opacityByIndex[i]),
+              borderRadius: [4, 4, 0, 0],
+            },
+            label: {
+              show: true,
+              position: "top" as const,
+              formatter: value > 0 ? String(value) : "",
+              color: "#6b7280",
+              fontSize: 11,
+            },
+          })),
+          barWidth: 16,
+          emphasis: { disabled: true },
+        },
+      ],
+      tooltip: { show: false },
+    };
+  }
+
+  return {
+    xAxis: {
+      type: "category",
+      data: chartData.value.labels,
+      show: false,
+      boundaryGap: true,
+    },
+    yAxis: {
+      type: "value",
+      show: false,
+    },
+    series: [
+      {
+        data: (chartData.value.counts as number[]).map((value) => ({
+          value,
+          itemStyle: {
+            color: value === 0 ? "#e5e7eb" : color,
+            borderRadius: [3, 3, 0, 0],
+          },
+        })),
+        type: "bar",
+        barMaxWidth: 12,
+        barMinHeight: 4,
+        emphasis: { disabled: true },
+        label: { show: false },
+      },
+    ],
+    grid: {
+      left: 2,
+      right: 2,
+      top: 2,
+      bottom: 2,
+    },
+    tooltip: {
+      show: true,
+      trigger: "axis",
+      appendToBody: true,
+      position: (point: number[]) => [point[0] + 12, point[1] - 50],
+      axisPointer: { type: "none" },
+      formatter: (params: any) => {
+        const p = Array.isArray(params) ? params[0] : params;
+        if (!p.value) return "";
+        return `<span style="font-size:12px;color:#6b7280">${p.name}: <b style="color:#374151">${p.value}</b></span>`;
+      },
+    },
+  };
+});
+
+const placeholderChartConfig = computed<EChartsOption>(() => {
+  const placeholderValues = Array.from(
+    { length: 7 },
+    () => Math.floor(Math.random() * 8) + 3
+  );
+  return {
+    xAxis: { type: "category", show: false, boundaryGap: true },
+    yAxis: { type: "value", show: false },
+    series: [
+      {
+        data: placeholderValues.map((value) => ({
+          value,
+          itemStyle: { color: "#f1f1f1", borderRadius: [3, 3, 0, 0] },
+        })),
+        type: "bar",
+        barMaxWidth: 12,
+        emphasis: { disabled: true },
+      },
+    ],
+    grid: { left: 2, right: 2, top: 2, bottom: 2 },
+    tooltip: { show: false },
+    animation: false,
+  };
+});
+
+const resource = createResource({
+  url: props.apiUrl || "",
+  type: "GET",
+  makeParams: () => {
+    const params: Record<string, any> = {
+      period: currentDuration.value.toLowerCase(),
+    };
+    if (props.dt && props.dn) {
+      params.dt = props.dt;
+      params.dn = props.dn;
+    }
+    return params;
+  },
+});
+
+const changeDuration = (period: string) => {
+  currentDuration.value = period;
+  if (props.apiUrl) resource.submit();
+};
+
+onMounted(() => {
+  if (props.timelineFilter && props.apiUrl && !props.data?.data) {
+    resource.submit();
+  }
+});
+</script>

desk/src/components/BrandLogo.vue

@@ -5,11 +5,10 @@
     alt="Brand Logo"
     class="h-8 w-8 shrink-0 object-cover"
   />
-  <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
+  <HDLogo v-else class="h-8 w-8 shrink-0 rounded-4" />
 </template>
 
 <script setup lang="ts">
-import { Avatar } from "frappe-ui";
 import HDLogo from "@/assets/logos/HDLogo.vue";
 
 import { useConfigStore } from "@/stores/config";

desk/src/components/CallArea.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="w-full">
+    <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
+      <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
+        <Avatar
+          :image="activity?._caller?.image"
+          :label="activity?._caller?.label"
+          size="md"
+        />
+        <span class="font-medium text-ink-gray-8 ms-1">
+          {{ activity?._caller?.label }}
+        </span>
+        <span>{{
+          activity.call_type == "Incoming"
+            ? __("has reached out")
+            : __("has made a call")
+        }}</span>
+      </div>
+      <div class="ms-auto whitespace-nowrap">
+        <Tooltip :text="dateFormat(activity.creation, 'MMM D, dddd')">
+          <div class="text-sm text-ink-gray-5">
+            {{ __(timeAgo(activity.creation)) }}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+    <div
+      @click="showCallLogDetailModal = true"
+      class="flex flex-col gap-2 cursor-pointer border-transparent shadow rounded-5 bg-surface-elevation-1 px-3 py-2.5 text-ink-gray-9"
+    >
+      <div class="flex items-center justify-between">
+        <div class="inline-flex gap-2 items-center text-base-medium">
+          <div>
+            {{
+              activity.call_type == "Incoming"
+                ? __("Inbound Call")
+                : __("Outbound Call")
+            }}
+          </div>
+        </div>
+        <div>
+          <MultipleAvatar
+            :avatars="[
+              {
+                name: activity._caller.label,
+                label: activity._caller.label,
+                image: activity._caller.image,
+              },
+              {
+                name: activity._receiver.label,
+                label: activity._receiver.label,
+                image: activity._receiver.image,
+              },
+            ]"
+            size="sm"
+          />
+        </div>
+      </div>
+      <div class="flex items-center flex-wrap gap-2">
+        <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
+          <template #prefix>
+            <CalendarIcon class="size-3" />
+          </template>
+        </Badge>
+        <Badge v-if="activity.status == 'Completed'" :label="activity.duration">
+          <template #prefix>
+            <DurationIcon class="size-3" />
+          </template>
+        </Badge>
+        <Badge
+          v-if="activity.recording_url"
+          :label="__('Listen')"
+          class="cursor-pointer"
+        >
+          <template #prefix>
+            <PlayIcon class="size-3" />
+          </template>
+        </Badge>
+        <Badge
+          :label="statusLabelMap[activity.status]"
+          :theme="statusColorMap[activity.status]"
+        />
+      </div>
+    </div>
+    <CallLogDetailModal
+      v-model="showCallLogDetailModal"
+      v-model:callLogModal="showCallLogModal"
+      :callLogId="props.activity.name"
+      :hideTicket="true"
+    />
+    <CallLogModal
+      v-model="showCallLogModal"
+      :callLogId="props.activity.name"
+      @afterInsert="refreshTicket()"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { dateFormat, timeAgo } from "@/utils";
+import { Avatar, Badge, Tooltip } from "frappe-ui";
+import { inject, ref } from "vue";
+import MultipleAvatar from "./MultipleAvatar.vue";
+import CalendarIcon from "./icons/CalendarIcon.vue";
+import DurationIcon from "./icons/DurationIcon.vue";
+import PlayIcon from "./icons/PlayIcon.vue";
+import { statusColorMap, statusLabelMap } from "@/pages/call-logs/utils";
+import CallLogDetailModal from "@/pages/call-logs/CallLogDetailModal.vue";
+import CallLogModal from "@/pages/call-logs/CallLogModal.vue";
+
+const props = defineProps({
+  activity: Object,
+});
+
+const showCallLogDetailModal = ref(false);
+const showCallLogModal = ref(false);
+
+const refreshTicket = inject<() => void>("refreshTicket");
+</script>

desk/src/components/CannedResponseSelectorModal.vue

@@ -1,106 +0,0 @@
-<template>
-  <Dialog
-    v-model="show"
-    :options="{
-      title: 'Canned Responses',
-      size: '4xl',
-    }"
-  >
-    <template #body-content>
-      <TextInput
-        ref="searchInput"
-        v-model="search"
-        type="text"
-        :placeholder="'Site Down'"
-      >
-        <template #prefix>
-          <FeatherIcon name="search" class="h-4 w-4 text-gray-500" />
-        </template>
-      </TextInput>
-      <div
-        v-if="filteredTemplates.length"
-        class="mt-2 grid max-h-[560px] grid-cols-1 md:grid-cols-3 gap-2 overflow-y-auto"
-      >
-        <div
-          v-for="template in filteredTemplates"
-          :key="template.name"
-          class="flex h-56 cursor-pointer flex-col gap-2 rounded-lg border p-3 hover:bg-gray-100"
-          @click="emit('apply', template)"
-        >
-          <div class="border-b pb-2 text-base font-semibold">
-            {{ template.title }}
-          </div>
-          <TextEditor
-            v-if="template.message"
-            :content="template.message"
-            :editable="false"
-            editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
-            class="flex-1 overflow-hidden"
-          />
-        </div>
-      </div>
-      <div v-else class="mt-2">
-        <div class="flex h-56 flex-col items-center justify-center">
-          <div class="text-lg text-gray-500">
-            {{ "No templates found" }}
-          </div>
-        </div>
-      </div>
-      <div class="flex justify-end mt-4">
-        <Button
-          label="New Canned Response"
-          @click="
-            () => {
-              $router.push('/canned-responses#new');
-              templates.data = null;
-            }
-          "
-        />
-      </div>
-    </template>
-  </Dialog>
-</template>
-
-<script setup>
-import { TextEditor, createListResource } from "frappe-ui";
-import { ref, computed, nextTick, watch, onMounted } from "vue";
-
-const props = defineProps({
-  doctype: {
-    type: String,
-    default: "",
-  },
-});
-
-const show = defineModel();
-const searchInput = ref("");
-
-const emit = defineEmits(["apply"]);
-
-const search = ref("");
-
-const templates = createListResource({
-  type: "list",
-  doctype: "HD Canned Response",
-  cache: ["cannedResponses", props.doctype],
-  fields: ["title", "message", "modified"],
-  orderBy: "modified desc",
-  pageLength: 99999,
-});
-
-onMounted(() => {
-  if (templates.data == null) {
-    templates.fetch();
-  }
-});
-
-const filteredTemplates = computed(() => {
-  return (
-    templates.data?.filter((template) => {
-      return template.title.toLowerCase().includes(search.value.toLowerCase());
-    }) ?? []
-  );
-});
-
-watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus()));
-</script>

desk/src/components/ChartCardBase.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    class="flex flex-col w-full h-full rounded-5 p-4"
+    :class="[orientation == 'horizontal' && 'pt-3']"
+  >
+    <slot name="title">
+      <div class="text-ink-gray-5 text-base mb-2">
+        {{ title }}
+      </div>
+    </slot>
+    <div
+      class="flex flex-col gap-2 h-full w-full"
+      v-if="orientation === 'vertical'"
+    >
+      <div class="flex items-end w-full gap-2">
+        <slot name="text">
+          <div
+            class="text-2xl-medium text-center text-ink-gray-8 whitespace-nowrap"
+          >
+            {{ text }}
+          </div>
+        </slot>
+        <div v-if="timelineFilter" class="flex items-center text-sm gap-1">
+          <div class="flex items-center gap-1" :class="percentageChange.color">
+            <span
+              v-if="percentageChange.icon"
+              :class="percentageChange.icon"
+              class="size-4"
+            />
+            <div>{{ percentageChange.value }}%</div>
+          </div>
+          <Dropdown :options="durationOptions">
+            <div
+              class="flex items-center gap-0.5 text-ink-gray-5 hover:text-ink-gray-6 cursor-pointer shrink-0"
+            >
+              <div class="flex gap-1">
+                <span>vs</span>
+                <span>{{ __(currentDuration).toLowerCase() }}</span>
+              </div>
+              <LucideChevronDown class="size-4" />
+            </div>
+            <template #item-label="{ item }">
+              <div
+                class="data-[disabled]:cursor-not-allowed group flex w-full items-center rounded-4 px-2 text-base focus:outline-none focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3 whitespace-nowrap text-ink-gray-7 cursor-pointer justify-between"
+              >
+                <span>
+                  {{ item.label }}
+                </span>
+              </div>
+            </template>
+            <template #item-suffix="{ item }">
+              <LucideCheck
+                v-if="item.label == __(currentDuration)"
+                class="size-4"
+              />
+            </template>
+          </Dropdown>
+        </div>
+      </div>
+      <slot name="chart">
+        <div v-if="chartConfig" class="w-full h-full">
+          <ECharts :options="chartConfig" class="w-full h-full" />
+        </div>
+      </slot>
+    </div>
+    <div class="flex flex-col gap-2 h-full w-full" v-else>
+      <div class="flex items-end w-full gap-2 justify-between flex-1">
+        <slot name="text">
+          <span
+            class="text-2xl-medium text-center text-ink-gray-8 whitespace-nowrap"
+          >
+            {{ text }}
+          </span>
+        </slot>
+        <slot name="chart">
+          <div v-if="chartConfig" class="h-full max-w-[50%] w-[50%]">
+            <ECharts :options="chartConfig" class="w-full h-full" />
+          </div>
+        </slot>
+      </div>
+      <div v-if="timelineFilter" class="flex items-center text-sm gap-1">
+        <div class="flex items-center gap-1" :class="percentageChange.color">
+          <span
+            v-if="percentageChange.icon"
+            :class="percentageChange.icon"
+            class="size-4"
+          />
+          <div>{{ percentageChange.value }}%</div>
+        </div>
+        <Dropdown :options="durationOptions">
+          <div
+            class="flex items-center gap-0.5 text-ink-gray-5 hover:text-ink-gray-6 cursor-pointer shrink-0"
+          >
+            vs {{ __(currentDuration).toLowerCase() }}
+            <LucideChevronDown class="size-4" />
+          </div>
+          <template #item-label="{ item }">
+            <div
+              class="data-[disabled]:cursor-not-allowed group flex w-full items-center rounded-4 px-2 text-base focus:outline-none focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3 whitespace-nowrap text-ink-gray-7 cursor-pointer justify-between"
+            >
+              <span>
+                {{ item.label }}
+              </span>
+            </div>
+          </template>
+          <template #item-suffix="{ item }">
+            <LucideCheck
+              v-if="item.label == __(currentDuration)"
+              class="size-4"
+            />
+          </template>
+        </Dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LucideCheck from "~icons/lucide/check";
+import LucideChevronDown from "~icons/lucide/chevron-down";
+import { __ } from "@/translation";
+import { EChartsOption } from "echarts";
+import { Dropdown } from "frappe-ui";
+import { ECharts } from "frappe-ui/experimental";
+import { computed, type PropType } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  text: {
+    type: [Number, String] as PropType<number | string>,
+    default: "",
+  },
+  percentageChange: {
+    type: Object,
+    required: true,
+  },
+  chartConfig: {
+    type: Object as PropType<EChartsOption>,
+    required: true,
+  },
+  currentDuration: {
+    type: String,
+    default: __("Last month"),
+  },
+  orientation: {
+    type: String as PropType<"vertical" | "horizontal">,
+    default: "vertical",
+  },
+  timelineFilter: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const chartConfig = computed<EChartsOption>(() => props.chartConfig);
+
+const currentDuration = computed(() => props.currentDuration);
+
+const emit = defineEmits(["changeDuration"]);
+
+// the emitted value is the untranslated key: it travels to the API as the
+// period, so only the label goes through __()
+const DURATIONS = ["Last week", "Last month", "Last 3 months"];
+
+const durationOptions = DURATIONS.map((duration) => ({
+  label: __(duration),
+  onClick: () => {
+    if (currentDuration.value !== duration) emit("changeDuration", duration);
+  },
+}));
+</script>

desk/src/components/CommentBox.vue

@@ -1,204 +0,0 @@
-<template>
-  <div class="flex-col text-base flex-1" ref="commentBoxRef">
-    <div class="mb-1 ml-0.5 flex items-center justify-between">
-      <div class="text-gray-600 flex items-center gap-2">
-        <Avatar
-          size="sm"
-          :label="commenter"
-          :image="getUser(commentedBy).user_image"
-        />
-        <p>
-          <span class="font-medium text-gray-800">
-            {{ commenter }}
-          </span>
-          <span> added a</span>
-          <span class="max-w-xs truncate font-medium text-gray-800">
-            comment
-          </span>
-        </p>
-      </div>
-      <div class="flex items-center gap-1">
-        <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
-          <span class="pl-0.5 text-sm text-gray-600">
-            {{ timeAgo(creation) }}
-          </span>
-        </Tooltip>
-        <div v-if="authStore.userId === commentedBy && !editable">
-          <Dropdown
-            :options="[
-              {
-                label: 'Edit',
-                onClick: () => handleEditMode(),
-                icon: 'edit-2',
-              },
-              {
-                label: 'Delete',
-                onClick: () => (showDialog = true),
-                icon: 'trash-2',
-              },
-            ]"
-          >
-            <Button
-              icon="more-horizontal"
-              class="text-gray-600"
-              variant="ghost"
-            />
-          </Dropdown>
-        </div>
-      </div>
-    </div>
-    <div class="rounded bg-gray-50 px-4 py-3">
-      <TextEditor
-        ref="editorRef"
-        :editor-class="[
-          'prose-f shrink  text-p-sm transition-all duration-300 ease-in-out block w-full content',
-          getFontFamily(_content),
-        ]"
-        :content="_content"
-        :editable="editable"
-        :bubble-menu="textEditorMenuButtons"
-        @change="(event:string) => {_content = event}"
-      >
-        <template #bottom v-if="editable">
-          <div class="flex flex-row-reverse gap-2">
-            <Button label="Save" @click="handleSaveComment" variant="solid" />
-            <Button label="Discard" @click="handleDiscard" />
-          </div>
-        </template>
-      </TextEditor>
-      <div class="flex flex-wrap gap-2" v-if="!editable">
-        <AttachmentItem
-          v-for="a in attachments"
-          :key="a.file_url"
-          :label="a.file_name"
-          :url="a.file_url"
-        />
-      </div>
-    </div>
-  </div>
-  <Dialog
-    v-model="showDialog"
-    :options="{
-      title: 'Delete Comment',
-      message: 'Are you sure you want to confirm this action?',
-      actions: [
-        { label: 'Cancel', onClick: () => (showDialog = false) },
-        {
-          label: 'Delete',
-          onClick: () => deleteComment.submit(),
-          variant: 'solid',
-        },
-      ],
-    }"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref, PropType, onMounted } from "vue";
-import {
-  Dropdown,
-  createResource,
-  Dialog,
-  Avatar,
-  TextEditor,
-} from "frappe-ui";
-import {
-  dateFormat,
-  timeAgo,
-  dateTooltipFormat,
-  createToast,
-  textEditorMenuButtons,
-  isContentEmpty,
-  getFontFamily,
-} from "@/utils";
-import { AttachmentItem } from "@/components";
-import { useAuthStore } from "@/stores/auth";
-import { useUserStore } from "@/stores/user";
-import { CommentActivity } from "@/types";
-import { updateRes as updateComment } from "@/stores/knowledgeBase";
-const authStore = useAuthStore();
-const props = defineProps({
-  activity: {
-    type: Object as PropType<CommentActivity>,
-    required: true,
-  },
-});
-const { getUser } = useUserStore();
-
-const { name, creation, content, commenter, commentedBy, attachments } =
-  props.activity;
-
-const emit = defineEmits(["update"]);
-const showDialog = ref(false);
-const editable = ref(false);
-const _content = ref(content);
-
-// HTML refs
-const commentBoxRef = ref(null);
-const editorRef = ref(null);
-
-function handleEditMode() {
-  editable.value = true;
-  editorRef.value.editor.chain().focus("start");
-}
-
-function handleDiscard() {
-  _content.value = content;
-  editable.value = false;
-}
-
-const deleteComment = createResource({
-  url: "frappe.client.delete",
-  makeParams: () => ({
-    doctype: "HD Ticket Comment",
-    name: name,
-  }),
-  onSuccess() {
-    emit("update");
-    createToast({
-      title: "Comment deleted",
-      icon: "check",
-      iconClasses: "text-green-500",
-    });
-  },
-});
-
-function handleSaveComment() {
-  if (content === _content.value) {
-    editable.value = false;
-    return;
-  }
-  if (isContentEmpty(_content.value)) {
-    createToast({
-      title: "Comment cannot be empty",
-      icon: "x",
-      iconClasses: "text-red-600",
-    });
-    return;
-  }
-
-  updateComment.submit(
-    {
-      doctype: "HD Ticket Comment",
-      name: name,
-      fieldname: "content",
-      value: _content.value,
-    },
-    {
-      onSuccess: () => {
-        editable.value = false;
-        emit("update");
-        createToast({
-          title: "Comment updated",
-          icon: "check",
-          iconClasses: "text-green-500",
-        });
-      },
-    }
-  );
-}
-
-onMounted(() => {
-  commentBoxRef.value.style.width = "0px";
-});
-</script>

desk/src/components/CommentTextEditor.vue

@@ -1,124 +1,156 @@
 <template>
-  <TextEditor
-    v-if="agentsList.data"
-    ref="textEditor"
-    :editor-class="[
-      'prose-sm max-w-none',
-      editable &&
-        'min-h-[7rem] mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
-      getFontFamily(newComment),
-    ]"
-    :content="newComment"
-    :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
-    :placeholder="placeholder"
+  <Editor
+    ref="editorRef"
+    v-model="newComment"
+    :extensions="extensions"
     :editable="editable"
-    :mentions="agents"
-    @change="editable ? (newComment = $event) : null"
-    :extensions="[PreserveVideoControls]"
+    :placeholder="placeholder"
+    :upload-function="
+      (file: any, options: any) =>
+        track(uploadFunction(file, doctype, ticketId, true, options))
+    "
   >
-    <template #bottom>
-      <div v-if="editable" class="flex flex-col gap-2">
-        <div class="flex flex-wrap gap-2 px-10">
-          <AttachmentItem
-            v-for="a in attachments"
-            :key="a.file_url"
-            :label="a.file_name"
-          >
-            <template #suffix>
-              <FeatherIcon
-                class="h-3.5"
-                name="x"
-                @click.stop="removeAttachment(a)"
-              />
-            </template>
-          </AttachmentItem>
-        </div>
-        <div
-          class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
-        >
-          <div class="flex items-center overflow-x-auto">
-            <TextEditorFixedMenu
-              class="-ml-1"
-              :buttons="textEditorMenuButtons"
-            />
-            <FileUploader
-              :upload-args="{
-                doctype: doctype,
-                docname: modelValue.name,
-                private: true,
-              }"
-              @success="(f) => attachments.push(f)"
-            >
-              <template #default="{ openFileSelector }">
-                <Button
-                  theme="gray"
-                  variant="ghost"
-                  @click="openFileSelector()"
+    <template #default="{ isEmpty }">
+      <!-- Scroll here so selected nodes aren't clipped. -->
+      <div :class="editable && 'max-h-[44vh] overflow-y-auto'">
+        <EditorContent
+          :class="[
+            'prose-sm max-w-none',
+            editable && 'min-h-[7rem] mx-5 border-t py-3',
+            getFontFamily(newComment),
+          ]"
+        />
+      </div>
+      <!-- Attachments -->
+      <AttachmentList
+        class="my-2 ms-5"
+        :attachments="attachments"
+        @remove="removeAttachment"
+      />
+      <div v-if="editable" class="flex flex-col gap-2 border-t">
+        <div class="px-4">
+          <!-- Fixed Menu -->
+          <div class="flex justify-between gap-2 overflow-hidden py-2.5">
+            <div class="flex min-w-0 flex-1 items-center overflow-x-auto">
+              <div class="inline-flex items-center gap-1.5 p-1">
+                <FileUploader
+                  :doctype="doctype"
+                  :docname="ticketId"
+                  private
+                  @success="(f) => attachments.push(f)"
                 >
-                  <template #icon>
-                    <AttachmentIcon
-                      class="h-4"
-                      style="color: #000000; stroke-width: 1.5 !important"
-                    />
+                  <template #default="{ openFileSelector, uploading }">
+                    {{ void (loading = uploading) }}
+                    <button
+                      class="flex rounded-4 p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
+                      @click="openFileSelector()"
+                      :disabled="uploading"
+                    >
+                      <LoadingIndicator v-if="uploading" class="h-4 w-4" />
+                      <AttachmentIcon
+                        v-else
+                        class="h-4 w-4"
+                        style="stroke-width: 1.5 !important"
+                      />
+                    </button>
                   </template>
-                </Button>
-              </template>
-            </FileUploader>
-          </div>
-          <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
-            <Button
-              label="Discard"
-              @click="
-                () => {
-                  newComment = '';
-                  emit('discard');
-                }
-              "
-            />
-            <Button
-              variant="solid"
-              label="Submit"
-              :disabled="commentEmpty"
-              :loading="loading"
-              @click="
-                () => {
-                  loading = true;
-                  submitComment();
-                  newComment = '';
-                }
-              "
-            />
+                </FileUploader>
+                <div class="h-4 w-[2px] border-s ml-1" />
+              </div>
+              <EditorFixedMenu :items="fullToolbar" />
+              <EditorTableMenu />
+            </div>
+            <div class="flex shrink-0 items-center justify-end gap-x-2">
+              <Button
+                label="Discard"
+                @click="
+                  () => {
+                    newComment = '';
+                    attachments = [];
+                    dropUnused(null);
+                    emit('discard');
+                  }
+                "
+              />
+              <!-- A disabled button fires no pointer events, so the span
+                   carries the hover for the tooltip -->
+              <Tooltip
+                :text="isUploading ? __('Please wait, media is uploading') : ''"
+              >
+                <span class="inline-flex">
+                  <Button
+                    variant="solid"
+                    :label="label"
+                    :disabled="isDisabled"
+                    :loading="loading"
+                    @click="submitComment()"
+                  />
+                </span>
+              </Tooltip>
+            </div>
           </div>
         </div>
       </div>
     </template>
-  </TextEditor>
+  </Editor>
 </template>
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
 import {
-  TextEditorFixedMenu,
-  TextEditor,
   FileUploader,
+  LoadingIndicator,
+  Tooltip,
   createResource,
+  dayjs,
+  toast,
 } from "frappe-ui";
+import {
+  Editor,
+  EditorContent,
+  EditorFixedMenu,
+  EditorTableMenu,
+} from "frappe-ui/editor";
+import { addPendingActivity } from "@framework/ui/ActivityTimeline";
+import { useOnboarding } from "@framework/ui";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
+import { AttachmentList } from "@/components/";
+import { buildEditorExtensions, fullToolbar } from "@/components/editor/config";
 import { AttachmentIcon } from "@/components/icons/";
-import { AttachmentItem } from "@/components/";
+import { useTyping } from "@/composables/realtime";
+import { useUploadTracker } from "@/composables/useUploadTracker";
 import { useAgentStore } from "@/stores/agent";
+import { useAuthStore } from "@/stores/auth";
+import { useUserStore } from "@/stores/user";
+import { __ } from "@/translation";
+import { capture } from "@/telemetry";
+import {
+  getFontFamily,
+  isContentEmpty,
+  removeAttachmentFromServer,
+  uploadFunction,
+} from "@/utils";
 import { useStorage } from "@vueuse/core";
-import { PreserveVideoControls } from "@/tiptap-extensions";
-import { isContentEmpty, textEditorMenuButtons, getFontFamily } from "@/utils";
+import { storeToRefs } from "pinia";
+
+const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
+const { agents: agentsList, dropdown } = storeToRefs(useAgentStore());
+const authStore = useAuthStore();
+const { isManager } = authStore;
+const { getUser } = useUserStore();
 
-const { agents: agentsList } = useAgentStore();
-onMounted(() => {
-  agentsList.fetch();
-});
 const props = defineProps({
+  ticketId: {
+    type: String,
+    default: null,
+  },
   placeholder: {
     type: String,
     default: null,
   },
+  label: {
+    type: String,
+    default: "Comment",
+  },
   editable: {
     type: Boolean,
     default: true,
@@ -129,57 +161,124 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["submit", "discard"]);
-const doc = defineModel();
-const attachments = useStorage("commentBoxAttachments" + doc.value.name, []);
-const newComment = useStorage("commentBoxContent" + doc.value.name, "");
-const commentEmpty = computed(() => {
-  return isContentEmpty(newComment.value);
+const emit = defineEmits(["submit", "discard", "sending", "restore"]);
+
+const newComment = useStorage("commentBoxContent" + props.ticketId, null);
+
+// Mentions as a reactive getter so the `@` list stays in sync as agents load.
+const extensions = buildEditorExtensions({
+  mentions: () => dropdown.value ?? [],
+});
+
+// Initialize typing composable
+const { onUserType, cleanup } = useTyping(props.ticketId);
+
+const attachments = ref([]);
+const { isUploading, track, dropUnused } = useUploadTracker();
+const isDisabled = computed(() => {
+  return isContentEmpty(newComment.value) || loading.value || isUploading.value;
 });
 const loading = ref(false);
 
-const agents = computed(() => {
-  return (
-    agentsList.data?.map((agent) => ({
-      label: agent.agent_name.trimEnd(),
-      value: agent.name,
-    })) || []
-  );
-});
-
 function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment);
+  removeAttachmentFromServer(attachment.name);
 }
 
 async function submitComment() {
   if (isContentEmpty(newComment.value)) {
-    return;
+    return false;
   }
+  // The keyboard shortcut reaches here without passing the disabled button
+  if (isUploading.value || loading.value) return false;
+
+  const content = newComment.value;
+  const sentAttachments = attachments.value;
+  const pendingRow = addPendingActivity(props.doctype, props.ticketId, {
+    type: "comment",
+    timestamp: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    author: {
+      email: getUser(authStore.userId).email,
+      // the users list may still be a stub with a guessed name and no avatar
+      fullname: authStore.userName,
+      image: authStore.userImage,
+    },
+    data: { name: "", content, attachments: sentAttachments },
+  });
+
+  // drop before clearing, or an unmount mid-send deletes what the comment carries
+  dropUnused(content);
+  newComment.value = null;
+  attachments.value = [];
+  loading.value = true;
+  emit("sending");
+
   const comment = createResource({
     url: "run_doc_method",
     makeParams: () => ({
       dt: props.doctype,
-      dn: doc.value.name,
+      dn: props.ticketId,
       method: "new_comment",
-      args: {
-        content: newComment.value,
-        attachments: attachments.value,
-      },
+      args: { content, attachments: sentAttachments },
     }),
-    onSuccess: () => {
+    onSuccess: (res: { message?: string } | string) => {
+      // run_doc_method answers with the whole body, since it always carries `docs`
+      const name = typeof res === "string" ? res : res?.message;
+      // the real row replaces the pending one the moment it arrives; unkeyed,
+      // it would outlive it
+      name ? pendingRow.resolve(`comment:${name}`) : pendingRow.drop();
+      capture("comment_added");
+      if (isManager) {
+        updateOnboardingStep?.("comment_on_ticket");
+      }
       emit("submit");
       loading.value = false;
-      attachments.value = null;
-      newComment.value = null;
     },
     onError: () => {
+      toast.error(__("Could not add the comment"));
+      pendingRow.drop();
+      newComment.value = content;
+      attachments.value = sentAttachments;
       loading.value = false;
+      emit("restore");
     },
   });
 
   comment.submit();
 }
+
+const editorRef = ref(null);
+const editor = computed(() => editorRef.value?.editor);
+
+// Watch for changes in comment content to trigger typing events
+watch(newComment, (newValue, oldValue) => {
+  if (newValue !== oldValue && newValue) {
+    onUserType();
+  }
+});
+
+onMounted(() => {
+  if (
+    agentsList.value.loading ||
+    agentsList.value.data?.length ||
+    agentsList.value.list.promise
+  ) {
+    return;
+  }
+  agentsList.value.fetch();
+});
+
+onBeforeUnmount(() => {
+  cleanup();
+  // the saved draft still references what it shows, so only what it dropped goes
+  dropUnused(newComment.value);
+  if (isContentEmpty(newComment.value)) {
+    localStorage.removeItem("commentBoxContent" + props.ticketId);
+  }
+});
+
 defineExpose({
   submitComment,
+  editor,
 });
 </script>

desk/src/components/CommunicationArea.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="flex flex-col comm-area">
+  <div class="comm-area" resizable="true">
     <div
-      class="flex justify-between gap-3 border-t px-4 lg:px-6 py-4 md:py-2.5"
+      class="flex justify-between gap-3 border-t px-6 md:px-5 py-4 md:py-2.5"
     >
-      <div class="flex gap-1.5">
+      <div class="flex gap-1.5 items-center">
         <Button
           ref="sendEmailRef"
           variant="ghost"
           label="Reply"
-          :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+          :class="[
+            showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
+          ]"
           @click="toggleEmailBox()"
         >
           <template #prefix>
@@ -18,86 +20,122 @@
         <Button
           variant="ghost"
           label="Comment"
-          :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+          :class="[
+            showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
+          ]"
           @click="toggleCommentBox()"
         >
           <template #prefix>
             <CommentIcon class="h-4" />
           </template>
         </Button>
+        <TypingIndicator :ticketId="ticketId" />
       </div>
     </div>
-    <div
-      v-show="showCommentBox"
-      @keydown.ctrl.enter.capture.stop="submitComment"
-      @keydown.meta.enter.capture.stop="submitComment"
-    >
-      <CommentTextEditor
-        ref="commentTextEditorRef"
-        v-model="doc"
-        v-model:attachments="attachments"
-        :editable="showCommentBox"
-        :doctype="doctype"
-        placeholder="Add a comment..."
-        @submit="
-          () => {
-            showCommentBox = false;
-            emit('update');
-          }
-        "
-        @discard="
-          () => {
-            showCommentBox = false;
-          }
-        "
-      />
-    </div>
-    <div
-      v-show="showEmailBox"
-      class="flex gap-1.5"
-      @keydown.ctrl.enter.capture.stop="submitEmail"
-      @keydown.meta.enter.capture.stop="submitEmail"
-    >
-      <EmailEditor
-        ref="emailEditorRef"
-        v-model="doc"
-        v-model:content="content"
-        v-model:attachments="attachments"
-        :to-emails="toEmails"
-        :cc-emails="ccEmails"
-        :bcc-emails="bccEmails"
-        @submit="
-          () => {
-            showEmailBox = false;
-            emit('update');
-          }
-        "
-        @discard="
-          () => {
-            showEmailBox = false;
-          }
-        "
-      />
-    </div>
+    <Transition name="slide">
+      <div
+        v-show="showEmailBox"
+        ref="emailBoxRef"
+        @keydown.ctrl.enter.capture.stop="submitEmail"
+        @keydown.meta.enter.capture.stop="submitEmail"
+        @keydown.esc.capture.stop="showEmailBox = false"
+      >
+        <div class="overflow-hidden">
+          <EmailEditor
+            ref="emailEditorRef"
+            :label="
+              isMobileView ? 'Send' : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
+            "
+            placeholder="Hi John, we are looking into this issue."
+            :ticketId="ticketId"
+            :to-emails="toEmails"
+            :cc-emails="ccEmails"
+            :bcc-emails="bccEmails"
+            @sending="
+              () => {
+                showEmailBox = false;
+              }
+            "
+            @submit="() => emit('update')"
+            @restore="
+              () => {
+                showEmailBox = true;
+              }
+            "
+            @discard="
+              () => {
+                showEmailBox = false;
+              }
+            "
+          />
+        </div>
+      </div>
+    </Transition>
+    <Transition name="slide">
+      <div
+        v-show="showCommentBox"
+        ref="commentBoxRef"
+        @keydown.ctrl.enter.capture.stop="submitComment"
+        @keydown.meta.enter.capture.stop="submitComment"
+        @keydown.esc.capture.stop="showCommentBox = false"
+      >
+        <div class="overflow-hidden">
+          <CommentTextEditor
+            ref="commentTextEditorRef"
+            :label="
+              isMobileView
+                ? 'Comment'
+                : isMac
+                ? 'Comment (⌘ + ⏎)'
+                : 'Comment (Ctrl + ⏎)'
+            "
+            :ticketId="ticketId"
+            :editable="showCommentBox"
+            :doctype="doctype"
+            placeholder="@John could you please look into this?"
+            @sending="
+              () => {
+                showCommentBox = false;
+              }
+            "
+            @submit="() => emit('update')"
+            @restore="
+              () => {
+                showCommentBox = true;
+              }
+            "
+            @discard="
+              () => {
+                showCommentBox = false;
+              }
+            "
+          />
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-import { EmailEditor, CommentTextEditor } from "@/components";
-import { EmailIcon, CommentIcon } from "@/components/icons/";
+import { CommentTextEditor, EmailEditor, TypingIndicator } from "@/components";
+import { CommentIcon, EmailIcon } from "@/components/icons/";
+import { useDevice } from "@/composables";
+import { useScreenSize } from "@/composables/screen";
+import { useShortcut } from "@/composables/shortcuts";
+import { showCommentBox, showEmailBox } from "@/pages/ticket/modalStates";
+import { onClickOutside } from "@vueuse/core";
+import { ref, watch } from "vue";
 
 const emit = defineEmits(["update"]);
 const content = defineModel("content");
-const doc = defineModel();
-
-const showEmailBox = ref(false);
-const showCommentBox = ref(false);
-const attachments = ref([]);
-
+const { isMac } = useDevice();
+const { isMobileView } = useScreenSize();
+let doc = defineModel();
+// let doc = inject(TicketSymbol)?.value.doc
 const emailEditorRef = ref(null);
 const commentTextEditorRef = ref(null);
+const emailBoxRef = ref(null);
+const commentBoxRef = ref(null);
 
 function toggleEmailBox() {
   if (showCommentBox.value) {
@@ -113,23 +151,31 @@ function toggleCommentBox() {
   showCommentBox.value = !showCommentBox.value;
 }
 
+// the editors emit `submit` once the write lands; reloading here too would
+// fetch twice, and the guards' `false` never reaches this side anyway
 function submitEmail() {
   emailEditorRef.value.submitMail();
-  emit("update");
 }
 
 function submitComment() {
   commentTextEditorRef.value.submitComment();
-  emit("update");
+}
+
+function splitIfString(str: string | string[]) {
+  if (typeof str === "string") {
+    return str.split(",");
+  }
+  return str;
 }
 
 function replyToEmail(data: object) {
   showEmailBox.value = true;
+
   emailEditorRef.value.addToReply(
     data.content,
-    data.to?.split(","),
-    data.cc?.split(","),
-    data.bcc?.split(",")
+    splitIfString(data.to),
+    splitIfString(data.cc),
+    splitIfString(data.bcc)
   );
 }
 
@@ -138,6 +184,10 @@ const props = defineProps({
     type: String,
     default: "HD Ticket",
   },
+  ticketId: {
+    type: String,
+    default: null,
+  },
   toEmails: {
     type: Array,
     default: () => [],
@@ -152,12 +202,82 @@ const props = defineProps({
   },
 });
 
+watch(
+  () => showEmailBox.value,
+  (value) => {
+    if (value) {
+      emailEditorRef.value?.editor?.commands?.focus("start");
+    }
+  }
+);
+
+watch(
+  () => showCommentBox.value,
+  (value) => {
+    if (value) {
+      commentTextEditorRef.value?.editor?.commands?.focus();
+    }
+  }
+);
+
+useShortcut("r", () => {
+  toggleEmailBox();
+});
+useShortcut("c", () => {
+  toggleCommentBox();
+});
+
 defineExpose({
   replyToEmail,
   toggleEmailBox,
   toggleCommentBox,
   editor: emailEditorRef,
 });
+
+const IGNORED_SELECTORS = [
+  ".tippy-box",
+  ".tippy-content",
+  ".PopoverContent",
+  '[role="dialog"]',
+  '[role="presentation"]',
+  '[role="menu"]',
+  ".dialog-overlay",
+  // Grammarly suggestions appear outside the box, allow them to stop collapsing.
+  "grammarly-extension",
+  "grammarly-popups",
+  "[data-grammarly-part]",
+];
+
+// `ignore` is only consulted on pointerdown, which dialogs stop, so the click
+// through has to be checked too. Without this a dialog button closes the box.
+function isIgnored(event: Event): boolean {
+  const target = event.target as HTMLElement | null;
+  return Boolean(target?.closest?.(IGNORED_SELECTORS.join(", ")));
+}
+
+onClickOutside(
+  emailBoxRef,
+  (event) => {
+    if (showEmailBox.value && !isIgnored(event)) {
+      showEmailBox.value = false;
+    }
+  },
+  {
+    ignore: IGNORED_SELECTORS,
+  }
+);
+
+onClickOutside(
+  commentBoxRef,
+  (event) => {
+    if (showCommentBox.value && !isIgnored(event)) {
+      showCommentBox.value = false;
+    }
+  },
+  {
+    ignore: IGNORED_SELECTORS,
+  }
+);
 </script>
 
 <style>
@@ -166,4 +286,18 @@ defineExpose({
     width: 100vw;
   }
 }
+
+.slide-enter-active,
+.slide-leave-active {
+  display: grid;
+  transition: grid-template-rows 0.25s ease;
+}
+.slide-enter-from,
+.slide-leave-to {
+  grid-template-rows: 0fr;
+}
+.slide-enter-to,
+.slide-leave-from {
+  grid-template-rows: 1fr;
+}
 </style>

desk/src/components/CompactEditor.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="flex flex-col">
+    <Editor
+      ref="editorRef"
+      v-model="internalContent"
+      :extensions="extensions"
+      v-bind="uploadFn ? { uploadFunction: uploadFn } : {}"
+      :placeholder="placeholder"
+    >
+      <template #default>
+        <EditorBubbleMenu :items="commentToolbar" />
+        <div
+          class="flex items-center overflow-x-auto rounded-t-4 border border-b-0 border-outline-gray-1 bg-surface-gray-1 px-1 py-1"
+        >
+          <div
+            v-if="showAttachments"
+            class="inline-flex items-center gap-1.5 pe-1"
+          >
+            <FileUploader private @success="addAttachment">
+              <template #default="{ openFileSelector, uploading }">
+                {{ syncUploadingState(uploading) }}
+                <button
+                  class="flex rounded-4 p-1 text-ink-gray-8 transition-colors hover:bg-surface-gray-3 disabled:opacity-40"
+                  :disabled="uploading"
+                  @click="openFileSelector()"
+                >
+                  <LoadingIndicator v-if="uploading" class="h-4 w-4" />
+                  <AttachmentIcon
+                    v-else
+                    class="h-4 w-4"
+                    style="stroke-width: 1.5 !important"
+                  />
+                </button>
+              </template>
+            </FileUploader>
+            <div class="h-4 w-[2px] border-s ml-1" />
+          </div>
+          <EditorFixedMenu :items="fullToolbar" />
+          <EditorTableMenu />
+        </div>
+        <EditorContent :class="editorClass" />
+      </template>
+    </Editor>
+    <AttachmentList
+      v-if="showAttachments && attachments?.length"
+      class="mt-2"
+      :attachments="attachments ?? []"
+      @remove="removeAttachment"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AttachmentList } from "@/components";
+import {
+  buildEditorExtensions,
+  commentToolbar,
+  fullToolbar,
+} from "@/components/editor/config";
+import { AttachmentIcon } from "@/components/icons";
+import { getUserEmailInfo } from "@/composables/useUserEmailInfo";
+import { isContentEmpty } from "@/utils";
+import { FileUploader, LoadingIndicator, type UploadedFile } from "frappe-ui";
+import {
+  Editor,
+  EditorBubbleMenu,
+  EditorContent,
+  EditorFixedMenu,
+  EditorTableMenu,
+} from "frappe-ui/editor";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+
+type UploadFunction = (file: File) => Promise<UploadedFile>;
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    extensions?: any[];
+    showSignature?: boolean;
+    showAttachments?: boolean;
+    uploadFn?: UploadFunction;
+  }>(),
+  {
+    placeholder: "",
+    minHeight: "min-h-[180px]",
+    maxHeight: "max-h-80",
+    extensions: () => [],
+    showSignature: false,
+    showAttachments: false,
+  }
+);
+
+const internalContent = defineModel<string>({ default: "" });
+
+const editorRef = ref<any>(null);
+const attachments = defineModel<UploadedFile[] | null>("attachments", {
+  default: () => [],
+});
+const isUploading = ref(false);
+
+const extensions = buildEditorExtensions({ extra: props.extensions });
+
+const contentClass = [
+  "!prose-sm max-w-full overflow-auto py-1.5 px-3",
+  "rounded-b-4 border border-outline-gray-1 bg-surface-base",
+  "placeholder-ink-gray-4 text-ink-gray-8 -mt-0.5",
+];
+
+const editorClass = computed(() => [
+  ...contentClass,
+  props.minHeight,
+  props.maxHeight,
+]);
+
+const userResource = getUserEmailInfo();
+
+function getDefaultContent(signature: string): string {
+  return `<p></p><p></p>${signature}`;
+}
+
+function applySignature(signature: string) {
+  if (!isContentEmpty(internalContent.value)) return;
+  const commands = editorRef.value?.editor?.commands;
+  if (commands) {
+    commands.setContent(signature);
+    setTimeout(() => {
+      editorRef.value?.editor?.commands?.focus("start");
+    }, 0);
+  } else {
+    internalContent.value = signature;
+  }
+}
+
+function addAttachment(file: UploadedFile) {
+  attachments.value = [...(attachments.value ?? []), file];
+}
+
+function removeAttachment(attachment: UploadedFile) {
+  attachments.value = (attachments.value ?? []).filter((a) => a !== attachment);
+}
+
+// FileUploader exposes `uploading` only via slot scope, so mirror it into a
+// ref that the parent can read through the exposed `isUploading`.
+function syncUploadingState(uploading: boolean): string {
+  isUploading.value = uploading;
+  return "";
+}
+
+function getContent(): string {
+  return editorRef.value?.editor?.getHTML() ?? "";
+}
+
+function isEmpty(): boolean {
+  return !editorRef.value?.editor?.state?.doc?.textContent?.trim()?.length;
+}
+
+function reset() {
+  const commands = editorRef.value?.editor?.commands;
+  if (!commands) {
+    internalContent.value = "";
+    return;
+  }
+  const data = userResource?.data as { email_signature?: string } | null;
+  const sig = data?.email_signature
+    ? getDefaultContent(data.email_signature)
+    : "";
+  commands.setContent(sig || "<p></p>");
+  internalContent.value = sig;
+  attachments.value = null;
+  setTimeout(() => {
+    editorRef.value?.editor?.commands?.focus("start");
+  }, 0);
+}
+
+if (props.showSignature) {
+  // Late arrival: resource resolves after mount
+  watch(
+    () => userResource.data,
+    (data: { email_signature?: string } | null) => {
+      if (!data?.email_signature) return;
+      applySignature(getDefaultContent(data.email_signature));
+    }
+  );
+}
+
+onMounted(() => {
+  if (!props.showSignature) return;
+
+  nextTick(() => {
+    const data = userResource.data as { email_signature?: string } | null;
+    if (data?.email_signature) {
+      applySignature(getDefaultContent(data.email_signature));
+    }
+  });
+});
+
+defineExpose({
+  getContent,
+  isEmpty,
+  reset,
+  editorRef,
+  isUploading,
+});
+</script>

desk/src/components/ConfirmDialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <Dialog v-model:open="isOpen" :title="title" @close="closeDialog">
+    <template #default>
+      <div class="space-y-4">
+        <p
+          class="text-p-base text-ink-gray-8"
+          v-if="message"
+          v-html="message"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        class="w-full"
+        label="Confirm"
+        variant="solid"
+        :loading="isLoading"
+        @click="onConfirm"
+      />
+    </template>
+  </Dialog>
+</template>
+<script>
+import { Button, Dialog } from "frappe-ui";
+
+export default {
+  name: "ConfirmDialog",
+  props: {
+    title: {
+      type: String,
+    },
+    message: {
+      type: String,
+    },
+    // Optional v-model; when absent, visibility falls back to the internal
+    // state (open on mount), preserving the `v-if` + `show()`/`hide()` mode.
+    modelValue: {
+      type: Boolean,
+      default: undefined,
+    },
+    onConfirm: {
+      type: Function,
+      default: null,
+    },
+    onCancel: {
+      type: Function,
+      default: null,
+    },
+  },
+  emits: ["update:modelValue"],
+  expose: ["show", "hide"],
+  components: {
+    Dialog,
+    Button,
+  },
+  data() {
+    return {
+      showDialog: true,
+      isLoading: false,
+    };
+  },
+  computed: {
+    isOpen: {
+      get() {
+        return this.modelValue !== undefined
+          ? this.modelValue
+          : this.showDialog;
+      },
+      set(value) {
+        this.showDialog = value;
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    async handleConfirmation() {
+      if (this.isLoading) return;
+      this.isLoading = true;
+      try {
+        if (this.onConfirm) {
+          await this.onConfirm({
+            hideDialog: this.hide,
+          });
+        }
+        this.hide();
+      } catch (error) {
+        console.error("Error in confirmation:", error);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    show() {
+      this.isOpen = true;
+    },
+    closeDialog() {
+      this.hide();
+      this.onCancel?.();
+    },
+    hide() {
+      this.isOpen = false;
+    },
+  },
+};
+</script>

desk/src/components/CustomActions.vue

@@ -1,26 +1,24 @@
 <template>
-  <div v-if="normalActions.length">
+  <div v-if="normalActions.length" class="flex gap-2">
+    <!-- onClick rides along in `action`; binding it twice would run it twice -->
     <Button
       v-for="action in normalActions"
       :key="action.label"
       :label="action.label"
-      @click="action.onClick()"
+      v-bind="action"
     >
       <template v-if="action.icon" #prefix>
-        <FeatherIcon :name="action.icon" class="h-4 w-4" />
+        <Icon :icon="action.icon" class="h-4 w-4" />
       </template>
     </Button>
   </div>
-  <Dropdown v-if="groupedActions.length" :options="groupedActions">
-    <Button icon="more-horizontal" />
-  </Dropdown>
   <div v-if="groupedWithLabelActions.length">
     <div v-for="g in groupedWithLabelActions" :key="g.label">
       <Dropdown v-slot="{ open }" :options="g.action">
         <Button :label="g.label">
           <template #suffix>
-            <FeatherIcon
-              :name="open ? 'chevron-up' : 'chevron-down'"
+            <component
+              :is="open ? LucideChevronUp : LucideChevronDown"
               class="h-4"
             />
           </template>
@@ -28,11 +26,17 @@
       </Dropdown>
     </div>
   </div>
+  <Dropdown v-if="groupedActions.length" :options="groupedActions">
+    <Button icon="lucide-more-horizontal" variant="ghost" />
+  </Dropdown>
 </template>
 
 <script setup>
-import { computed, h } from "vue";
+import LucideChevronUp from "~icons/lucide/chevron-up";
+import LucideChevronDown from "~icons/lucide/chevron-down";
+import Icon from "@/components/Icon.vue";
 import { Dropdown } from "frappe-ui";
+import { computed } from "vue";
 
 const props = defineProps({
   actions: {

desk/src/components/DeleteWithTicketsDialog.vue

@@ -0,0 +1,89 @@
+<template>
+  <Dialog v-model:open="open" :title="dialogTitle" size="md">
+    <template #default>
+      <div class="flex flex-col gap-4">
+        <p class="text-p-base text-ink-gray-7">{{ message }}</p>
+        <Checkbox
+          v-if="count"
+          size="sm"
+          v-model="deleteLinkedTickets"
+          :label="__('Delete {0} ticket(s)', [count])"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <div class="flex justify-end">
+        <Button
+          variant="solid"
+          theme="red"
+          icon-left="lucide-trash-2"
+          :label="__('Delete')"
+          :loading="isDeleting"
+          @click="confirmDelete"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { __ } from "@/translation";
+import { Button, Checkbox, createResource, Dialog } from "frappe-ui";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  /** Name of the record being deleted. */
+  name: string;
+  /** HD Ticket link field that ties tickets to this record. */
+  linkField: "customer" | "contact";
+  /** Confirmation copy shown above the checkbox. */
+  message: string;
+  title?: string;
+  /** Async delete handler; the button stays in a loading state until it settles. */
+  onDelete: (payload: { deleteLinkedTickets: boolean }) => Promise<void> | void;
+}>();
+
+const open = defineModel<boolean>({ default: false });
+
+const resource = createResource({
+  url: "frappe.client.get_count",
+  params: {
+    doctype: "HD Ticket",
+    filters: { [props.linkField]: props.name },
+  },
+  auto: true,
+});
+
+const count = computed<number>(() => {
+  if (resource.loading) return 0;
+  return resource.data ?? 0;
+});
+
+const deleteLinkedTickets = ref(false);
+const isDeleting = ref(false);
+
+const dialogTitle = computed(() => props.title ?? __("Delete"));
+
+async function confirmDelete() {
+  if (isDeleting.value) return;
+  isDeleting.value = true;
+  try {
+    await props.onDelete({ deleteLinkedTickets: deleteLinkedTickets.value });
+    open.value = false;
+  } catch {
+    // Keep the dialog open on failure; the handler surfaces the error.
+  } finally {
+    isDeleting.value = false;
+  }
+}
+
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      resource.reload();
+    }
+  },
+  { immediate: true }
+);
+</script>

desk/src/components/DiscardButton.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { confirmDialog } from "frappe-ui";
-
+import { globalStore } from "@/stores/globalStore";
+const { $dialog } = globalStore();
 const emit = defineEmits<{
   (event: "discard"): void;
 }>();
@@ -26,13 +26,24 @@ function handleDiscard() {
     emit("discard");
     return;
   }
-  confirmDialog({
+  $dialog({
     title: title,
     message: message,
     onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
-      emit("discard");
       hideDialog();
     },
+    actions: [
+      {
+        label: "Delete",
+        theme: "red",
+        iconLeft: "lucide-trash-2",
+        variant: "solid",
+        onClick({ close }: { close: () => void }) {
+          emit("discard");
+          close();
+        },
+      },
+    ],
   });
 }
 </script>

desk/src/components/DocumentationButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <Tooltip text="View documentation">
+    <a :href="url" target="_blank">
+      <lucide-circle-question-mark
+        class="h-4 w-4 text-ink-gray-6"
+        :class="color"
+      />
+    </a>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  url: string;
+  color?: string;
+}>();
+</script>
+
+<style scoped></style>

desk/src/components/EmailArea.vue

@@ -1,166 +0,0 @@
-<template>
-  <div
-    class="grow cursor-pointer border-transparent bg-white rounded-md shadow text-base leading-6 transition-all duration-300 ease-in-out"
-  >
-    <div class="mb-1 flex items-center justify-between gap-2">
-      <!-- email design for mobile -->
-      <div v-if="isMobileView" class="flex items-center gap-2">
-        <div class="leading-tight">
-          <span>{{ sender.full_name || "No name found" }}</span>
-          <span
-            class="sm:flex hidden text-sm text-gray-600"
-            v-if="sender.name"
-            >{{ "<" + sender.name + ">" }}</span
-          >
-        </div>
-      </div>
-      <!-- email design for desktop -->
-      <div v-else class="flex items-center gap-2">
-        <span>{{ sender.full_name || "No name found" }}</span>
-        <span class="sm:flex hidden text-sm text-gray-600" v-if="sender.name">{{
-          "<" + sender.name + ">"
-        }}</span>
-      </div>
-
-      <div class="flex gap-0.5 items-center">
-        <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
-          <div class="text-sm text-gray-600">
-            {{ timeAgo(creation) }}
-          </div>
-        </Tooltip>
-        <Button
-          variant="ghost"
-          class="text-gray-700"
-          @click="
-            emit('reply', {
-              content: content,
-              to: sender?.name ?? to,
-            })
-          "
-        >
-          <ReplyIcon class="h-4 w-4" />
-        </Button>
-        <Button
-          variant="ghost"
-          class="text-gray-700"
-          @click="
-            emit('reply', {
-              content: content,
-              to: sender?.name ?? to,
-              cc: cc,
-              bcc: bcc,
-            })
-          "
-        >
-          <ReplyAllIcon class="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-    <!-- <div class="text-sm leading-5 text-gray-600">
-      {{ subject }}
-    </div> -->
-    <div class="mb-3 text-sm leading-5 text-gray-600">
-      <span v-if="to" class="text-2xs mr-1 font-bold text-gray-500">TO:</span>
-      <span v-if="to"> {{ to }} </span>
-      <span v-if="cc">, </span>
-      <span v-if="cc" class="text-2xs mr-1 font-bold text-gray-500"> CC: </span>
-      <span v-if="cc">{{ cc }}</span>
-      <span v-if="bcc">, </span>
-      <span v-if="bcc" class="text-2xs mr-1 font-bold text-gray-500">
-        BCC:
-      </span>
-      <span v-if="bcc">{{ bcc }}</span>
-    </div>
-    <EmailContent :content="content" />
-    <div class="flex flex-wrap gap-2">
-      <AttachmentItem
-        v-for="a in attachments"
-        :key="a.file_url"
-        :label="a.file_name"
-        :url="a.file_url"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { AttachmentItem } from "@/components";
-import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
-import { ReplyIcon, ReplyAllIcon } from "./icons";
-import { useScreenSize } from "@/composables/screen";
-
-const props = defineProps({
-  activity: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { sender, to, cc, bcc, creation, subject, attachments, content } =
-  props.activity;
-
-const emit = defineEmits(["reply"]);
-
-const { isMobileView } = useScreenSize();
-
-// TODO: Implement reply functionality using this way instead of emit drillup
-// function reply(email, reply_all = false) {
-//   emailBox.toggleEmailBox();
-//   let editor = emailBox.editor;
-//   let message = email.content;
-//   let recipients = sender.name;
-//   editor.toEmails = [email.sender];
-//   editor.cc = editor.bcc = false;
-//   editor.ccEmails = [];
-//   editor.bccEmails = [];
-//   console.log(recipients);
-
-//   if (!email.subject.startsWith("Re:")) {
-//     editor.subject = `Re: ${email.subject}`;
-//   } else {
-//     editor.subject = email.subject;
-//   }
-
-//   if (reply_all) {
-//     let cc = email.cc?.split(",").map((r) => r.trim());
-//     let bcc = email.bcc?.split(",").map((r) => r.trim());
-
-//     if (cc?.length) {
-//       recipients = recipients.filter((r) => !cc?.includes(r));
-//       cc.push(...recipients);
-//     } else {
-//       cc = recipients;
-//     }
-
-//     editor.cc = cc ? true : false;
-//     editor.bcc = bcc ? true : false;
-
-//     editor.ccEmails = cc;
-//     editor.bccEmails = bcc;
-//   }
-
-//   let repliedMessage = `<blockquote>${message}</blockquote>`;
-
-//   editor.editor
-//     .chain()
-//     .clearContent()
-//     .insertContent("<p>.</p>")
-//     .updateAttributes("paragraph", { class: "reply-to-content" })
-//     .insertContent(repliedMessage)
-//     .focus("all")
-//     .insertContentAt(0, { type: "paragraph" })
-//     .focus("start")
-//     .run();
-// }
-</script>
-
-<style>
-.email-content {
-  max-width: 100%;
-}
-.email-content > * {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-</style>

desk/src/components/EmailContent.vue

@@ -6,9 +6,9 @@
   />
 </template>
 
-<script setup>
-import { ref, watch } from "vue";
-import { getFontFamily } from "@/utils";
+<script setup lang="ts">
+import { dataTheme, getFontFamily, stripEmailColors } from "@/utils";
+import { computed, ref, watch } from "vue";
 
 const props = defineProps({
   content: {
@@ -17,12 +17,30 @@ const props = defineProps({
   },
 });
 
-const files = import.meta.globEager("/src/index.css", { query: "?inline" });
-const css = files["/src/index.css"].default;
-
-const iframeRef = ref(null);
+const iframeRef = ref<HTMLIFrameElement | null>(null);
 const _content = ref(props.content);
 
+const themedContent = computed(() =>
+  dataTheme.value === "dark" ? stripEmailColors(_content.value) : _content.value
+);
+
+// Get CSS path - in dev Vite serves it directly, in prod we need the built path
+const cssHref = computed(() => {
+  if (import.meta.env.DEV) {
+    return "/src/index.css";
+  }
+  // In production, find the built CSS file from the document
+  const links = document.querySelectorAll('link[rel="stylesheet"]');
+  for (const link of links) {
+    const href = link.getAttribute("href");
+    if (href?.includes("/assets/helpdesk/desk/") && href.endsWith(".css")) {
+      return href;
+    }
+  }
+  // Fallback to a reasonable path
+  return "/assets/helpdesk/desk/index.css";
+});
+
 const parser = new DOMParser();
 const doc = parser.parseFromString(_content.value, "text/html");
 
@@ -30,7 +48,11 @@ const gmailReplyToContent = doc.querySelectorAll("div.gmail_quote");
 const outlookReplyToContent = doc.querySelectorAll("div#appendonsend");
 const replyToContent = doc.querySelectorAll("p.reply-to-content");
 
-if (gmailReplyToContent.length) {
+if (doc.body.children.length === 0) {
+  // Plain-text emails (e.g. from Thunderbird) arrive as text with newlines and no spacing losing formatting.
+  const plainText = doc.body.innerHTML.replace(/\n\n/g, "\n");
+  _content.value = `<div class="whitespace-pre-wrap">${plainText}</div>`;
+} else if (gmailReplyToContent.length) {
   _content.value = parseReplyToContent(doc, "div.gmail_quote", true);
 } else if (outlookReplyToContent.length) {
   _content.value = parseReplyToContent(doc, "div#appendonsend");
@@ -38,8 +60,12 @@ if (gmailReplyToContent.length) {
   _content.value = parseReplyToContent(doc, "p.reply-to-content");
 }
 
-function parseReplyToContent(doc, selector, forGmail = false) {
-  function handleAllInstances(doc) {
+function parseReplyToContent(
+  doc: Document,
+  selector: string,
+  forGmail = false
+) {
+  function handleAllInstances(doc: Document) {
     const replyToContentElements = doc.querySelectorAll(selector);
     if (replyToContentElements.length === 0) return;
     const replyToContentElement = replyToContentElements[0];
@@ -48,13 +74,15 @@ function parseReplyToContent(doc, selector, forGmail = false) {
   }
 
   handleAllInstances(doc);
-
   return doc.body.innerHTML;
 }
 
-function replaceReplyToContent(replyToContentElement, forGmail) {
+function replaceReplyToContent(
+  replyToContentElement: Element,
+  forGmail: boolean
+) {
   if (!replyToContentElement) return;
-  let randomId = Math.random().toString(36).substring(2, 7);
+  const randomId = Math.random().toString(36).substring(2, 7);
   const wrapper = doc.createElement("div");
   wrapper.classList.add("replied-content");
 
@@ -75,166 +103,153 @@ function replaceReplyToContent(replyToContentElement, forGmail) {
     if (prevSibling && prevSibling.tagName === "BR") {
       prevSibling.remove();
     }
-    let cloned = replyToContentElement.cloneNode(true);
+    const cloned = replyToContentElement.cloneNode(true) as Element;
     cloned.classList.remove("gmail_quote");
     wrapper.appendChild(cloned);
   } else {
     const allSiblings = Array.from(
-      replyToContentElement.parentElement.children
+      replyToContentElement.parentElement?.children || []
     );
     const replyToContentIndex = allSiblings.indexOf(replyToContentElement);
     const followingSiblings = allSiblings.slice(replyToContentIndex + 1);
 
     if (followingSiblings.length === 0) return;
 
-    let clonedFollowingSiblings = followingSiblings.map((sibling) =>
+    const clonedFollowingSiblings = followingSiblings.map((sibling) =>
       sibling.cloneNode(true)
     );
 
     const div = doc.createElement("div");
     div.append(...clonedFollowingSiblings);
-
     wrapper.append(div);
 
-    // Remove all siblings after the reply-to-content element
     for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
-      replyToContentElement.parentElement.removeChild(allSiblings[i]);
+      replyToContentElement.parentElement?.removeChild(allSiblings[i]);
     }
   }
 
-  replyToContentElement.parentElement.replaceChild(
+  replyToContentElement.parentElement?.replaceChild(
     wrapper,
     replyToContentElement
   );
 }
 
-const htmlContent = `
+const htmlContent = computed(
+  () => `
   <!DOCTYPE html>
   <html>
   <head>
-	<style>
-	  ${css}
-  
-	  .replied-content .collapse {
-		margin: 10px 0 10px 0;
-		visibility: visible;
-		cursor: pointer;
-		display: flex;
-		font-size: larger;
-		font-weight: 700;
-		height: 12px;
-		line-height: 0.1;
-		background: #e8eaed;
-		width: 23px;
-		justify-content: center;
-		border-radius: 5px;
-	  }
-  
-	  .replied-content .collapse:hover {
-		background: #dadce0;
-	  }
-  
-	  .replied-content .collapse + input {
-		display: none;
-	  }
-	  .replied-content .collapse + input + div {
-		display: none;
-	  }
-	  .replied-content .collapse + input:checked + div {
-		display: block;
-	  }
-  
-	  .email-content {
-		  word-break: break-word;
-	  }
-	  .email-content
-		  :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose']
-			  *))) {
-	  table-layout: auto;
-	  }
-  
-	  .email-content
-		  :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-	  width: unset;
-	  table-layout: auto;
-	  text-align: unset;
-	  margin-top: unset;
-	  margin-bottom: unset;
-	  font-size: unset;
-	  line-height: unset;
-	  }
-  
-	  /* tr */
-  
-	  .email-content
-		  :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose']
-			  *)) {
-	  border-bottom-width: 0;
-	  border-bottom-color: transparent;
-	  }
-  
-	  /* td */
-  
-	  .email-content
-		  :is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
-	  position: unset;
-	  border-width: 0;
-	  border-color: transparent;
-	  padding: 0;
-	  }
-  
-	  .email-content
-		  :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose']
-			  *)) {
-	  vertical-align: revert;
-	  }
-  
-	  /* image */
-	  .email-content
-		  :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose']
-			  *))) {
-	  border-width: 0;
-	  }
-  
-	  .email-content
-		  :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-	  margin: 0;
-	  }
-  
-	  /* before & after */
-  
-	  .email-content
-		  :where(blockquote
-		  p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
-			  *))::before {
-	  content: none;
-	  }
-  
-	  .email-content
-		  :where(blockquote
-		  p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
-			  *))::after {
-	  content: none;
-	  }
-	</style>
+    <link rel="stylesheet" href="${cssHref.value}" />
+    <base target="_blank" />
+    <style>
+      :root {
+        --bg-surface-gray-3: #ededed;
+        --bg-surface-gray-4: #e2e2e2;
+      }
+      [data-theme='dark'] {
+        --bg-surface-gray-3: #343434;
+        --bg-surface-gray-4: #424242;
+      }
+      .replied-content .collapse {
+        margin: 10px 0 10px 0;
+        visibility: visible;
+        cursor: pointer;
+        display: flex;
+        font-size: larger;
+        font-weight: 700;
+        height: 12px;
+        line-height: 0.1;
+        color: #383838;
+        background: #e8eaed;
+        width: 23px;
+        justify-content: center;
+        border-radius: 5px;
+      }
+      .replied-content .collapse:hover {
+        background: #dadce0;
+      }
+      [data-theme='dark'] .replied-content .collapse {
+        color: #e2e2e2;
+        background: #424242;
+      }
+      [data-theme='dark'] .replied-content .collapse:hover {
+        background: #525252;
+      }
+      .replied-content .collapse + input {
+        display: none;
+      }
+      .replied-content .collapse + input + div {
+        display: none;
+      }
+      .replied-content .collapse + input:checked + div {
+        display: block;
+      }
+      .email-content {
+        word-break: break-word;
+      }
+      
+          
+      .email-content :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+        border-width: 0;
+      }
+      .email-content :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+        margin: 0;
+      }
+      .email-content :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
+        content: none;
+      }
+      .email-content :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
+        content: none;
+      }
+
+    </style>
   </head>
   <body>
-	  <div ref="emailContentRef" class="email-content prose-f">${_content.value}</div>
+    <div class="email-content prose-f">${themedContent.value}</div>
   </body>
-  <base target="_blank" />
   </html>
-  `;
+  `
+);
 
 watch(iframeRef, (iframe) => {
   if (iframe) {
     iframe.onload = () => {
       const emailContent =
-        iframe.contentWindow.document.querySelector(".email-content");
-      let parent = emailContent.closest("html");
-      emailContent.classList.add(getFontFamily(_content.value));
+        iframe.contentWindow?.document.querySelector(".email-content");
+      if (!emailContent) return;
+
+      const parent = emailContent.closest("html");
+      if (!parent) return;
+      parent.setAttribute("data-theme", dataTheme.value);
+
+      const font = getFontFamily(_content.value);
+      if (font) emailContent.classList.add(font);
+
       iframe.style.height = parent.offsetHeight + 1 + "px";
 
-      let replyCollapsers = emailContent.querySelectorAll(".replyCollapser");
+      // Clicks inside the iframe don't bubble to the parent document, popovers/dropdowns that close on outside-click never fire.
+      iframe.contentDocument?.addEventListener("pointerdown", () => {
+        document.dispatchEvent(
+          new PointerEvent("pointerdown", { bubbles: true })
+        );
+      });
+
+      // This is to ensure that keyboard shortcuts work even when the iframe is focused. For example, pressing "r" to reply to an email should work even if the user has clicked inside the email content.
+      iframe.contentDocument?.addEventListener("keydown", (e) => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            key: e.key,
+            code: e.code,
+            ctrlKey: e.ctrlKey,
+            metaKey: e.metaKey,
+            shiftKey: e.shiftKey,
+            altKey: e.altKey,
+            bubbles: true,
+          })
+        );
+      });
+
+      const replyCollapsers = emailContent.querySelectorAll(".replyCollapser");
       if (replyCollapsers.length) {
         replyCollapsers.forEach((replyCollapser) => {
           replyCollapser.addEventListener("change", () => {
@@ -245,4 +260,9 @@ watch(iframeRef, (iframe) => {
     };
   }
 });
+
+watch(dataTheme, (theme) => {
+  const html = iframeRef.value?.contentDocument?.documentElement;
+  if (html) html.setAttribute("data-theme", theme);
+});
 </script>

desk/src/components/EmailEditor.vue

@@ -1,194 +1,293 @@
 <template>
-  <TextEditor
+  <Editor
     ref="editorRef"
-    :editor-class="[
-      'prose-sm max-w-none mx-10 max-h-[50vh] overflow-y-auto py-3',
-      true && 'min-h-[7rem]',
-      getFontFamily(newEmail),
-    ]"
-    :content="newEmail"
-    :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
+    v-model="newEmail"
     :placeholder="placeholder"
     :editable="editable"
-    @change="editable ? (newEmail = $event) : null"
-    :extensions="[PreserveVideoControls]"
+    :extensions="extensions"
+    :upload-function="
+      (file: any, options: any) =>
+        track(uploadFunction(file, doctype, ticketId, true, options))
+    "
   >
-    <template #top>
-      <div class="mx-10 flex items-center gap-2 border-y py-2.5">
-        <span class="text-xs text-gray-500">TO:</span>
-        <MultiSelectInput
-          v-model="toEmailsClone"
-          class="flex-1"
-          :validate="validateEmail"
-          :error-message="(value) => `${value} is an invalid email address`"
-        />
-        <Button
-          :label="'CC'"
-          :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-          @click="toggleCC()"
-        />
-        <Button
-          :label="'BCC'"
-          :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-          @click="toggleBCC()"
-        />
-      </div>
-      <div
-        v-if="showCC || cc"
-        class="mx-10 flex items-center gap-2 py-2.5"
-        :class="cc || showCC ? 'border-b' : ''"
-      >
-        <span class="text-xs text-gray-500">CC:</span>
-        <MultiSelectInput
-          ref="ccInput"
-          v-model="ccEmailsClone"
-          class="flex-1"
-          :validate="validateEmail"
-          :error-message="(value) => `${value} is an invalid email address`"
-        />
-      </div>
-      <div
-        v-if="showBCC || bcc"
-        class="mx-10 flex items-center gap-2 py-2.5"
-        :class="bcc || showBCC ? 'border-b' : ''"
-      >
-        <span class="text-xs text-gray-500">BCC:</span>
-        <MultiSelectInput
-          ref="bccInput"
-          v-model="bccEmailsClone"
-          class="flex-1"
-          :validate="validateEmail"
-          :error-message="(value) => `${value} is an invalid email address`"
-        />
-      </div>
-    </template>
-    <template #bottom>
-      <div class="flex flex-wrap gap-2 px-10">
-        <AttachmentItem
-          v-for="a in attachments"
-          :key="a.file_url"
-          :label="a.file_name"
+    <template #default>
+      <div @keydown.capture="handleKeydown">
+        <!-- Email headers -->
+        <div
+          v-if="hasMultipleSenders"
+          class="mx-6 md:mx-5 flex items-center gap-2 border-t py-2.5 h-12.5"
         >
-          <template #suffix>
-            <FeatherIcon
-              class="h-3.5"
-              name="x"
-              @click.stop="removeAttachment(a)"
-            />
-          </template>
-        </AttachmentItem>
-      </div>
-      <div class="flex justify-between gap-2 overflow-hidden px-10 py-2.5">
-        <div class="flex items-center overflow-x-auto">
-          <TextEditorFixedMenu class="-ml-1" :buttons="textEditorMenuButtons" />
-          <div class="flex gap-1">
-            <FileUploader
-              :upload-args="{
-                doctype: doctype,
-                docname: modelValue?.name,
-                private: true,
-              }"
-              @success="
-                (f) => {
-                  attachments.push(f);
-                }
-              "
-            >
-              <template #default="{ openFileSelector }">
-                <Button variant="ghost" @click="openFileSelector()">
-                  <template #icon>
-                    <AttachmentIcon
-                      class="h-4"
-                      style="color: #000000; stroke-width: 1.5 !important"
-                    />
-                  </template>
-                </Button>
-              </template>
-            </FileUploader>
+          <span class="text-p-xs text-ink-gray-4">{{ __("From") }}:</span>
+          <FormControl
+            v-model="fromEmail"
+            type="select"
+            variant="ghost"
+            class="w-full"
+            :placeholder="__('')"
+            :options="from"
+          />
+        </div>
+        <div class="mx-6 md:mx-5 flex items-center gap-2 border-y py-2.5">
+          <span class="text-p-xs text-ink-gray-4">{{ __("To") }}:</span>
+          <EmailMultiSelect
+            v-model="toEmailsClone"
+            class="flex-1"
+            scope="contact"
+            variant="ghost"
+            allow-custom-email
+            copy-on-click
+            :validate="validateEmailWithZod"
+            :custom-email-label="__('Add to recipients')"
+          />
+          <div class="flex gap-1.5">
             <Button
+              :label="__('Cc')"
               variant="ghost"
-              @click="showCannedResponseSelectorModal = true"
-            >
-              <template #icon>
-                <EmailIcon
-                  class="h-4"
-                  style="color: #000000; stroke-width: 1.2"
-                />
-              </template>
-            </Button>
+              :class="[
+                cc || showCC
+                  ? '!bg-surface-gray-4 hover:bg-surface-gray-3'
+                  : '!text-ink-gray-4',
+              ]"
+              @click="toggleCC()"
+            />
+            <Button
+              :label="__('Bcc')"
+              variant="ghost"
+              :class="[
+                bcc || showBCC
+                  ? '!bg-surface-gray-4 hover:bg-surface-gray-3'
+                  : '!text-ink-gray-4',
+              ]"
+              @click="toggleBCC()"
+            />
           </div>
         </div>
-        <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
-          <Button
-            label="Discard"
-            @click="
-              () => {
-                ccEmailsClone = [];
-                bccEmailsClone = [];
-                cc = false;
-                bcc = false;
-                newEmail = null;
-                attachments = null;
-                emit('discard');
-              }
-            "
+        <div
+          v-if="showCC || cc"
+          class="mx-5 flex items-center gap-2 py-2.5"
+          :class="cc || showCC ? 'border-b' : ''"
+        >
+          <span class="text-xs text-ink-gray-4">{{ __("Cc:") }}</span>
+          <EmailMultiSelect
+            ref="ccInput"
+            v-model="ccEmailsClone"
+            class="flex-1"
+            scope="contact"
+            variant="ghost"
+            allow-custom-email
+            copy-on-click
+            :validate="validateEmailWithZod"
+            :custom-email-label="__('Add to recipients')"
           />
-          <Button
-            variant="solid"
-            :disabled="emailEmpty"
-            :loading="loading"
-            label="Submit"
-            @click="
-              () => {
-                loading = true;
-                submitMail();
-              }
-            "
+        </div>
+        <div
+          v-if="showBCC || bcc"
+          class="mx-5 flex items-center gap-2 py-2.5"
+          :class="bcc || showBCC ? 'border-b' : ''"
+        >
+          <span class="text-xs text-ink-gray-4">{{ __("Bcc:") }}</span>
+          <EmailMultiSelect
+            ref="bccInput"
+            v-model="bccEmailsClone"
+            class="flex-1"
+            scope="contact"
+            variant="ghost"
+            allow-custom-email
+            copy-on-click
+            :validate="validateEmailWithZod"
+            :custom-email-label="__('Add to recipients')"
           />
         </div>
+
+        <!-- Editor content + quoted reply -->
+        <div class="overflow-y-auto min-h-[7rem] max-h-[30vh] flex flex-col">
+          <div class="flex-1">
+            <EditorContent
+              :class="[
+                'prose-sm max-w-full mx-6 md:mx-5 py-3',
+                getFontFamily(newEmail),
+                '[&_p.reply-to-content]:hidden',
+              ]"
+            />
+          </div>
+          <div
+            v-if="quotedContent"
+            class="replied-content mx-6 md:mx-5 mb-2 mt-auto"
+          >
+            <label class="collapse" for="quoted-toggle">...</label>
+            <input
+              id="quoted-toggle"
+              class="replyCollapser"
+              type="checkbox"
+              :checked="isQuoteExpanded"
+            />
+            <div
+              ref="quotedContentRef"
+              contenteditable="true"
+              class="prose !max-w-full mx-1 my-2 border-s-4 border-outline-gray-2 ps-4 text-sm focus:outline-none"
+              @input="onQuotedInput"
+            />
+          </div>
+        </div>
+
+        <!-- Attachments -->
+        <AttachmentList
+          class="px-5 my-2"
+          :attachments="attachments"
+          @remove="removeAttachment"
+        />
+        <!-- Saved reply actions, applied once the reply is sent -->
+        <SavedReplyActions
+          ref="savedReplyActionsRef"
+          class="mx-5 my-2"
+          :ticket-id="ticketId"
+          :doctype="doctype"
+        />
+        <!-- Fixed Menu -->
+        <div
+          class="flex justify-between gap-2 overflow-scroll px-4 py-2.5 items-center border-t"
+        >
+          <div class="flex min-w-0 flex-1 items-center overflow-x-auto">
+            <div class="inline-flex items-center gap-1.5 p-1">
+              <FileUploader
+                :doctype="doctype"
+                :docname="ticketId"
+                private
+                @success="
+                  (f) => {
+                    attachments.push(f);
+                  }
+                "
+              >
+                <template #default="{ openFileSelector, uploading }">
+                  {{ void (attachmentUploading = uploading) }}
+                  <Tooltip :text="__('Attach file')">
+                    <button
+                      class="flex rounded-4 p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
+                      @click="openFileSelector()"
+                      :disabled="uploading"
+                    >
+                      <LoadingIndicator v-if="uploading" class="h-4 w-4" />
+                      <AttachmentIcon
+                        v-else
+                        class="h-4 w-4"
+                        style="stroke-width: 1.5 !important"
+                      />
+                    </button>
+                  </Tooltip>
+                </template>
+              </FileUploader>
+              <Tooltip :text="__('Saved replies')">
+                <button
+                  class="flex rounded-4 p-1 text-ink-gray-8 transition-colors focus-within:ring-0 hover:bg-surface-gray-3"
+                  @click="showSavedRepliesSelectorModal = true"
+                >
+                  <ZapIcon class="h-4 w-4" />
+                </button>
+              </Tooltip>
+              <div class="h-4 w-[2px] border-s ml-1" />
+            </div>
+            <EditorFixedMenu :items="fullToolbar" />
+            <EditorTableMenu />
+          </div>
+          <div class="flex shrink-0 items-center justify-end gap-x-2">
+            <Button label="Discard" @click="handleDiscard" />
+            <!-- A disabled button fires no pointer events, so the span
+                 carries the hover for the tooltip -->
+            <Tooltip
+              :text="isUploading ? __('Please wait, media is uploading') : ''"
+            >
+              <span class="inline-flex">
+                <Button
+                  variant="solid"
+                  :disabled="isDisabled"
+                  :loading="sendMail.loading"
+                  :label="label"
+                  @click="
+                    () => {
+                      submitMail();
+                    }
+                  "
+                />
+              </span>
+            </Tooltip>
+          </div>
+        </div>
       </div>
     </template>
-  </TextEditor>
-  <CannedResponseSelectorModal
-    v-model="showCannedResponseSelectorModal"
+  </Editor>
+  <SavedRepliesSelectorModal
+    v-model="showSavedRepliesSelectorModal"
     :doctype="doctype"
-    @apply="applyCannedResponse"
+    @apply="applySavedReplies"
+    :ticketId="ticketId"
   />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick } from "vue";
+import { AttachmentList, SavedRepliesSelectorModal } from "@/components";
+import { buildEditorExtensions, fullToolbar } from "@/components/editor/config";
+import EmailMultiSelect from "@/components/EmailMultiSelect.vue";
+import { createDialog } from "@/components/dialogs";
+import { AttachmentIcon } from "@/components/icons";
+import SavedReplyActions from "@/components/SavedReplyActions/SavedReplyActions.vue";
+import { useTyping } from "@/composables/realtime";
+import { getUserEmailInfo } from "@/composables/useUserEmailInfo";
+import { useUploadTracker } from "@/composables/useUploadTracker";
+import { replyComposer } from "@/pages/ticket/modalStates";
+import { useAuthStore } from "@/stores/auth";
+import { useUserStore } from "@/stores/user";
+import { __ } from "@/translation";
+import { RenderedSavedReply } from "@/types";
+import {
+  getFontFamily,
+  htmlToText,
+  isContentEmpty,
+  removeAttachmentFromServer,
+  uploadFunction,
+  validateEmailWithZod,
+} from "@/utils";
 import { useStorage } from "@vueuse/core";
 import {
   FileUploader,
-  TextEditor,
-  TextEditorFixedMenu,
+  LoadingIndicator,
+  Tooltip,
   createResource,
+  dayjs,
+  toast,
 } from "frappe-ui";
 import {
-  createToast,
-  validateEmail,
-  textEditorMenuButtons,
-  isContentEmpty,
-  getFontFamily,
-} from "@/utils";
+  Editor,
+  EditorContent,
+  EditorFixedMenu,
+  EditorTableMenu,
+} from "frappe-ui/editor";
+import { addPendingActivity } from "@framework/ui/ActivityTimeline";
+import { useOnboarding } from "@framework/ui";
 import {
-  MultiSelectInput,
-  AttachmentItem,
-  CannedResponseSelectorModal,
-} from "@/components";
-import { AttachmentIcon, EmailIcon } from "@/components/icons";
-import { PreserveVideoControls } from "@/tiptap-extensions";
-
-const editorRef = ref(null);
-const showCannedResponseSelectorModal = ref(false);
-const loading = ref(false);
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import ZapIcon from "~icons/lucide/zap";
 
+// ─── Props & Emits ────────────────────────────────────────────
 const props = defineProps({
+  ticketId: {
+    type: String,
+    default: null,
+  },
   placeholder: {
     type: String,
     default: null,
   },
+  label: {
+    type: String,
+    default: "Send",
+  },
   editable: {
     type: Boolean,
     default: true,
@@ -210,14 +309,54 @@ const props = defineProps({
     default: () => [],
   },
 });
-const emit = defineEmits(["submit", "discard"]);
-const doc = defineModel();
 
-const newEmail = useStorage("emailBoxContent" + doc.value.name, "");
-const attachments = useStorage("emailBoxAttachments" + doc.value.name, []);
-const emailEmpty = computed(() => {
-  return isContentEmpty(newEmail.value);
-});
+const emit = defineEmits(["submit", "discard", "sending", "restore"]);
+
+const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
+const authStore = useAuthStore();
+const { isManager } = authStore;
+const { getUser } = useUserStore();
+const { onUserType, cleanup } = useTyping(props.ticketId);
+
+const extensions = buildEditorExtensions();
+
+const editorRef = ref(null);
+const editor = computed(() => editorRef.value?.editor);
+
+function focusEditorAtStart() {
+  setTimeout(() => {
+    editorRef.value?.editor?.commands?.focus("start");
+  }, 0);
+}
+
+const cachedEmail = useStorage<null | string>(
+  "emailBoxContent" + props.ticketId,
+  null
+);
+
+const newEmail = ref<null | string>(cachedEmail.value);
+
+const emailSignature = ref<string | null>(null);
+
+function isOnlySignature(content: string | null) {
+  if (!content || !emailSignature.value) return false;
+  return htmlToText(content) === htmlToText(emailSignature.value);
+}
+
+const userResource = getUserEmailInfo();
+
+const quotedContent = useStorage<null | string>(
+  "quotedEmailBoxContent" + props.ticketId,
+  null
+);
+const quotedContentRef = ref<HTMLElement | null>(null);
+const isQuoteExpanded = ref(false);
+
+function onQuotedInput() {
+  const el = quotedContentRef.value;
+  if (!el) return;
+  quotedContent.value = el.innerHTML || null;
+}
 
 const toEmailsClone = ref([...props.toEmails]);
 const ccEmailsClone = ref([...props.ccEmails]);
@@ -229,58 +368,8 @@ const bcc = computed(() => (bccEmailsClone.value?.length ? true : false));
 const ccInput = ref(null);
 const bccInput = ref(null);
 
-function applyCannedResponse(template) {
-  newEmail.value = template.message;
-  showCannedResponseSelectorModal.value = false;
-}
-
-function submitMail() {
-  if (isContentEmpty(newEmail.value)) {
-    return;
-  }
-  if (!toEmailsClone.value.length) {
-    createToast({
-      text: "Please enter a recipient email address",
-      icon: "x",
-      iconClasses: "text-red-600",
-    });
-    return;
-  }
-  const sendMail = createResource({
-    url: "run_doc_method",
-    makeParams: () => ({
-      dt: props.doctype,
-      dn: doc.value.name,
-      method: "reply_via_agent",
-      args: {
-        attachments: attachments.value.map((x) => x.name),
-        to: toEmailsClone.value.join(","),
-        cc: ccEmailsClone.value?.join(","),
-        bcc: bccEmailsClone.value?.join(","),
-        message: newEmail.value,
-      },
-    }),
-    onSuccess: () => {
-      resetState();
-      emit("submit");
-    },
-    onError: (err) => {
-      loading.value = false;
-      createToast({
-        title: err.exc_type,
-        text: err.messages[0],
-        icon: "x",
-        iconClasses: "text-red-500",
-      });
-    },
-  });
-
-  sendMail.submit();
-}
-
 function toggleCC() {
   showCC.value = !showCC.value;
-
   showCC.value &&
     nextTick(() => {
       ccInput.value.setFocus();
@@ -295,8 +384,222 @@ function toggleBCC() {
     });
 }
 
-function removeAttachment(attachment) {
+const fromEmail = useStorage<string | "">("from-email", "");
+
+const outgoingEmails = computed<{ email_account: string; email_id: string }[]>(
+  () => userResource.data?.outgoing_emails ?? []
+);
+
+// selected mail from the outgoing emails list
+const selectedFromEmail = computed(() =>
+  outgoingEmails.value.find((e) => e.email_id === fromEmail.value)
+);
+
+const from = computed(() => {
+  if (!outgoingEmails.value.length) return [];
+  if (
+    outgoingEmails.value.length === 1 &&
+    outgoingEmails.value[0].email_id === userResource.data?.email
+  )
+    return [];
+  return outgoingEmails.value.map((e) => ({
+    label: e.email_account + " <" + e.email_id + ">",
+    value: e.email_id,
+  }));
+});
+
+const hasMultipleSenders = computed(() => (from?.value.length ?? 0) > 1);
+
+const attachments = ref([]);
+const attachmentUploading = ref(false);
+const { isUploading: editorUploading, track, dropUnused } = useUploadTracker();
+
+// The paperclip and the editor's own media buttons upload by different routes
+const isUploading = computed(
+  () => attachmentUploading.value || editorUploading.value
+);
+
+async function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment);
+  await removeAttachmentFromServer(attachment.name);
+}
+
+const showSavedRepliesSelectorModal = ref(false);
+const savedReplyActionsRef = ref<InstanceType<typeof SavedReplyActions>>();
+
+/** A reply is only replaced when another one is already applied. */
+function applySavedReplies(reply: RenderedSavedReply) {
+  const staged = savedReplyActionsRef.value?.stagedSummary();
+  if (!staged) {
+    insertSavedReply(reply);
+    return;
+  }
+  createDialog({
+    title: __("Replace saved reply"),
+    message: __(
+      'Applying "{0}" discards the reply you have now, along with its {1} action(s).',
+      [reply.title, staged.count]
+    ),
+    actions: [
+      { label: __("Cancel") },
+      {
+        label: __("Replace"),
+        variant: "solid",
+        onClick: ({ close }: { close: () => void }) => {
+          replaceSavedReply(reply);
+          close();
+        },
+      },
+    ],
+  });
+}
+
+/** First reply of a draft: added to whatever the agent has already written. */
+function insertSavedReply(reply: RenderedSavedReply) {
+  const textEditor = editorRef.value?.editor;
+  if (!textEditor) return;
+  textEditor.chain().focus("start").insertContent(reply.message).run();
+  savedReplyActionsRef.value?.add(reply);
+}
+
+/** Confirmed replace: the new reply's body and actions stand alone. */
+function replaceSavedReply(reply: RenderedSavedReply) {
+  newEmail.value = reply.message + (emailSignature.value ?? "");
+  savedReplyActionsRef.value?.add(reply);
+  focusEditorAtStart();
+}
+
+/** Set by submitMail, so the composer can be cleared before the request goes out. */
+let pendingRow: ReturnType<typeof addPendingActivity> | null = null;
+let sentDraft: {
+  content: string | null;
+  attachments: any[];
+  quoted: string | null;
+  quoteExpanded: boolean;
+} | null = null;
+
+const sendMail = createResource({
+  url: "run_doc_method",
+  makeParams: (params) => params,
+  onSuccess: (res: { message?: string } | string) => {
+    // run_doc_method answers with the whole body, since it always carries `docs`
+    const name = typeof res === "string" ? res : res?.message;
+    // the real row replaces the pending one the moment it arrives; unkeyed,
+    // it would outlive it
+    name ? pendingRow?.resolve(`email:${name}`) : pendingRow?.drop();
+    pendingRow = null;
+    sentDraft = null;
+    savedReplyActionsRef.value?.submit();
+    emit("submit");
+
+    if (isManager) {
+      updateOnboardingStep?.("reply_on_ticket");
+    }
+  },
+  onError: () => {
+    toast.error(__("Could not send the reply"));
+    pendingRow?.drop();
+    pendingRow = null;
+    if (sentDraft) {
+      newEmail.value = sentDraft.content;
+      attachments.value = sentDraft.attachments;
+      quotedContent.value = sentDraft.quoted;
+      isQuoteExpanded.value = sentDraft.quoteExpanded;
+      sentDraft = null;
+    }
+    emit("restore");
+  },
+  debounce: 300,
+});
+
+const label = computed(() => (sendMail.loading ? "Sending..." : props.label));
+
+const isDisabled = computed(
+  () =>
+    (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) ||
+    sendMail.loading ||
+    isUploading.value
+);
+
+function submitMail() {
+  if (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) {
+    return false;
+  }
+  // The keyboard shortcut reaches here without passing the disabled button
+  if (isUploading.value || sendMail.loading) return false;
+  if (
+    !toEmailsClone.value.length &&
+    !ccEmailsClone.value.length &&
+    !bccEmailsClone.value.length
+  ) {
+    toast.warning(
+      "Email has no recipients. Please add at least one recipient (To, Cc, or Bcc) before sending."
+    );
+    return false;
+  }
+
+  const message =
+    newEmail.value +
+    (quotedContentRef.value
+      ? `<p class="reply-to-content"></p><blockquote>${quotedContentRef.value.innerHTML}</blockquote>`
+      : "");
+  const sender = selectedFromEmail.value?.email_id ?? authStore.userId;
+  const ownEmail = getUser(authStore.userId).email;
+
+  pendingRow?.drop();
+  pendingRow = addPendingActivity(props.doctype, props.ticketId, {
+    type: "email",
+    timestamp: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    author: {
+      email: sender,
+      // the users list may still be a stub with a guessed name and no avatar
+      fullname: authStore.userName,
+      image: sender === ownEmail ? authStore.userImage : undefined,
+    },
+    data: {
+      name: "",
+      sender,
+      to: toEmailsClone.value.join(", "),
+      cc: ccEmailsClone.value?.join(", "),
+      bcc: bccEmailsClone.value?.join(", "),
+      content: message,
+      attachments: attachments.value.map((a) => ({
+        file_url: a.file_url,
+        file_name: a.file_name,
+        is_private: a.is_private,
+      })),
+    },
+  });
+  sentDraft = {
+    content: newEmail.value,
+    attachments: attachments.value,
+    quoted: quotedContent.value,
+    quoteExpanded: isQuoteExpanded.value,
+  };
+
+  const params = {
+    dt: props.doctype,
+    dn: props.ticketId,
+    method: "reply_via_agent",
+    args: {
+      attachments: attachments.value.map((x) => x.name),
+      from_email: selectedFromEmail.value,
+      to: toEmailsClone.value.join(","),
+      cc: ccEmailsClone.value?.join(","),
+      bcc: bccEmailsClone.value?.join(","),
+      message,
+    },
+  };
+
+  // drop before resetState clears, or an unmount mid-send deletes what it carries
+  dropUnused(message);
+  resetState();
+  emit("sending");
+  sendMail.submit(params);
+}
+
+function getInitialContent() {
+  return emailSignature.value ? emailSignature.value : "<p></p>";
 }
 
 function addToReply(
@@ -308,30 +611,192 @@ function addToReply(
   toEmailsClone.value = toEmails;
   ccEmailsClone.value = ccEmails;
   bccEmailsClone.value = bccEmails;
-  editorRef.value.editor
-    .chain()
-    .clearContent()
-    .insertContent(body)
-    .focus("all")
-    .setBlockquote()
-    .insertContentAt(0, { type: "paragraph" })
-    .focus("start")
-    .run();
+
+  // Plain-text emails (e.g. Thunderbird) have no HTML tags, so their newlines/spacing
+  // thus lose formatting when added to replied content
+  const doc = new DOMParser().parseFromString(body, "text/html");
+  if (doc.body.children.length === 0) {
+    body = `<div style="white-space: pre-wrap; line-height: 1.5">${doc.body.innerHTML}</div>`;
+  }
+
+  if (body !== quotedContent.value) {
+    //trigger change for watch when replied to body data is different from current quoted content
+    quotedContent.value = null;
+    isQuoteExpanded.value = false;
+    nextTick(() => {
+      quotedContent.value = body;
+    });
+  }
+
+  nextTick(() => {
+    newEmail.value = getInitialContent();
+  });
+  focusEditorAtStart();
 }
 
+// Staged actions are left to `submit()`, which unstages them either way
 function resetState() {
-  newEmail.value = null;
-  attachments.value = null;
-  loading.value = false;
+  newEmail.value = emailSignature.value ? emailSignature.value : null;
+  attachments.value = [];
+  quotedContent.value = null;
+  isQuoteExpanded.value = false;
+  focusEditorAtStart();
 }
 
-const editor = computed(() => {
-  return editorRef.value.editor;
+function handleDiscard() {
+  attachments.value = [];
+  savedReplyActionsRef.value?.clear();
+  newEmail.value = getInitialContent();
+  quotedContent.value = null;
+  ccEmailsClone.value = [];
+  bccEmailsClone.value = [];
+  showCC.value = false;
+  showBCC.value = false;
+  isQuoteExpanded.value = false;
+
+  dropUnused(null);
+  focusEditorAtStart();
+  emit("discard");
+}
+
+function handleSelectAll(e: KeyboardEvent) {
+  const active = document.activeElement;
+  const editorContext = editorRef.value?.editor;
+  const editorDom = editorContext?.view?.dom as HTMLElement | undefined;
+  const quotedEl = quotedContentRef.value;
+  const sel = window.getSelection();
+  if (!sel || !editorDom) return;
+  if (!editorDom.contains(active) && !(quotedEl && quotedEl.contains(active))) {
+    return;
+  }
+  // after the focus check: select-all from a recipient field must not unfold
+  // the quoted reply
+  isQuoteExpanded.value = true;
+  e.preventDefault();
+  editorContext?.commands.selectAll();
+  sel.removeAllRanges();
+  const range = document.createRange();
+
+  if (quotedEl) {
+    range.setStartBefore(editorDom);
+    range.setEndAfter(quotedEl);
+  } else {
+    range.selectNodeContents(editorDom);
+  }
+  sel.addRange(range);
+}
+
+function handleDelete(e: KeyboardEvent) {
+  const sel = window.getSelection();
+  const quotedEl = quotedContentRef.value;
+  const editorDom = editorRef.value?.editor?.view?.dom as
+    | HTMLElement
+    | undefined;
+
+  if (!sel || sel.isCollapsed || !quotedEl || !editorDom) return;
+
+  const isSelectingEntireEditor = sel.containsNode(editorDom, true);
+  const isSelectingEntireQuote = sel.containsNode(quotedEl, true);
+
+  if (isSelectingEntireEditor && isSelectingEntireQuote) {
+    e.preventDefault();
+
+    editorRef.value?.editor?.commands?.clearContent();
+    newEmail.value = null;
+    quotedContent.value = null;
+
+    sel.removeAllRanges();
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  const key = e.key.toLowerCase();
+
+  if ((e.metaKey || e.ctrlKey) && key === "a") {
+    handleSelectAll(e);
+    return;
+  }
+
+  if (key === "backspace" || key === "delete") {
+    handleDelete(e);
+    return;
+  }
+}
+
+watch(newEmail, (newValue, oldValue) => {
+  // The signature drops into an empty editor on load and on every reply. That
+  // is not the agent typing, and broadcasting it would show a typing indicator
+  // to everyone else on the ticket.
+  if (
+    newValue !== oldValue &&
+    !isContentEmpty(newValue) &&
+    !isOnlySignature(newValue)
+  ) {
+    onUserType();
+  }
+  cachedEmail.value = isOnlySignature(newValue) ? null : newValue;
+});
+
+watch(quotedContent, (newVal, oldVal) => {
+  if (!oldVal && newVal) {
+    nextTick(() => {
+      if (quotedContentRef.value) {
+        quotedContentRef.value.innerHTML = newVal;
+      }
+    });
+  }
+});
+
+watch(
+  () => userResource.data,
+  (data: { email_signature?: string } | null) => {
+    if (!data?.email_signature) return;
+    emailSignature.value = `<br>${data.email_signature}`;
+    if (isOnlySignature(cachedEmail.value)) {
+      cachedEmail.value = null;
+    }
+    if (isContentEmpty(newEmail.value) && !quotedContent.value) {
+      newEmail.value = emailSignature.value;
+      focusEditorAtStart();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  from,
+  (fromOptions) => {
+    if (!fromOptions.find((f) => f.value === fromEmail.value)) {
+      fromEmail.value = fromOptions.length ? fromOptions[0].value : "";
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  // Published for the command palette, which cannot reach `editorRef` from
+  // module scope. See modalStates.ts.
+  replyComposer.value = applySavedReplies;
+  if (quotedContent.value) {
+    nextTick(() => {
+      if (quotedContentRef.value) {
+        quotedContentRef.value.innerHTML = quotedContent.value;
+      }
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  replyComposer.value = null;
+  cleanup();
+  // the saved draft still references what it shows, so only what it dropped goes
+  dropUnused(`${newEmail.value ?? ""}${quotedContent.value ?? ""}`);
 });
 
 defineExpose({
   addToReply,
   editor,
+  isUploading,
   submitMail,
 });
 </script>

desk/src/components/EmailMultiSelect.vue

@@ -0,0 +1,397 @@
+<template>
+  <div>
+    <div ref="pills" class="flex flex-wrap gap-1">
+      <Button
+        v-for="value in values"
+        :key="value"
+        :label="value"
+        theme="gray"
+        variant="subtle"
+        :tooltip="copyOnClick ? __('Click to copy') : undefined"
+        :class="[
+          {
+            'rounded-4 !bg-surface-base hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4':
+              variant === 'subtle',
+          },
+          copyOnClick
+            ? 'cursor-pointer transition-transform active:scale-[0.98]'
+            : '',
+        ]"
+        @click="copyOnClick ? copy(value) : null"
+        @keydown.delete.capture.stop="removeLastValue"
+      >
+        <template #suffix>
+          <LucideX class="size-3.5" @click.stop="removeValue(value)" />
+        </template>
+      </Button>
+      <div class="flex-1 min-w-32">
+        <ComboboxRoot
+          :model-value="tempSelection"
+          :open="showOptions"
+          @update:open="(o) => (showOptions = o)"
+          @update:modelValue="onSelect"
+          :ignore-filter="true"
+          highlight-on-hover
+        >
+          <ComboboxAnchor
+            class="flex h-7 max-w-full w-auto items-center gap-2 rounded-4 px-2 py-1 border border-transparent"
+            :class="[
+              variant == 'ghost'
+                ? 'bg-surface-base hover:bg-surface-base'
+                : 'bg-surface-gray-2 hover:bg-surface-gray-3',
+              inputClass,
+            ]"
+          >
+            <ComboboxInput
+              ref="search"
+              :value="query"
+              autocomplete="off"
+              class="bg-transparent p-0 outline-none border-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full focus:outline-none focus:ring-0 focus:border-0"
+              :placeholder="placeholder"
+              @focus="showOptions = true"
+              @input="onInput"
+              @keydown.delete.capture.stop="removeLastValue"
+              @keydown="onKeydown"
+              @paste="onPaste"
+            />
+          </ComboboxAnchor>
+          <ComboboxPortal>
+            <ComboboxContent
+              class="z-[100] mt-1 min-w-48 w-auto max-w-96 bg-surface-elevation-2 overflow-hidden rounded-6 shadow-2xl ring-1 ring-black ring-opacity-5"
+              position="popper"
+              :align="'start'"
+              @openAutoFocus.prevent
+              @closeAutoFocus.prevent
+            >
+              <ComboboxViewport class="max-h-60 overflow-auto p-1.5">
+                <ComboboxEmpty
+                  class="flex gap-2 rounded-4 px-2 py-1 text-base text-ink-gray-5"
+                >
+                  <LucideSearch class="size-4" />
+                  {{ __(emptyPlaceholder) }}
+                </ComboboxEmpty>
+                <ComboboxItem
+                  v-for="option in options"
+                  :key="option.value"
+                  :value="option.value"
+                  class="text-base leading-none text-ink-gray-7 rounded-4 flex items-center px-2 py-1 relative select-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3 cursor-pointer"
+                  @mousedown.prevent="onSelect(option.value)"
+                >
+                  <UserAvatar
+                    class="mr-0.5 shrink-0"
+                    :name="getUsernameLabel(option.label)"
+                    size="lg"
+                  />
+                  <div class="flex min-w-0 flex-col gap-1 p-1 text-ink-gray-8">
+                    <div class="truncate text-base-medium">
+                      {{ getUsernameLabel(option.label) }}
+                    </div>
+                    <div class="truncate text-sm text-ink-gray-5">
+                      {{ option.isCustom ? customEmailLabel : option.value }}
+                    </div>
+                  </div>
+                </ComboboxItem>
+              </ComboboxViewport>
+            </ComboboxContent>
+          </ComboboxPortal>
+        </ComboboxRoot>
+      </div>
+    </div>
+    <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
+    <div
+      v-if="info"
+      class="whitespace-pre-line text-sm text-ink-blue-6 mt-2 pl-2"
+    >
+      {{ info }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LucideSearch from "~icons/lucide/search";
+import LucideX from "~icons/lucide/x";
+import UserAvatar from "@/components/UserAvatar.vue";
+import { useUserStore } from "@/stores/user";
+import { copy } from "@/utils";
+import { watchDebounced } from "@vueuse/core";
+import { createResource } from "frappe-ui";
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxViewport,
+} from "reka-ui";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+
+const props = defineProps({
+  // "contact" searches HD contacts; "agents" picks from the user store.
+  scope: { type: String, default: "contact" },
+  validate: { type: Function, default: null },
+  emptyPlaceholder: { type: String, default: __("No results found") },
+  variant: { type: String, default: "subtle" },
+  placeholder: { type: String, default: "" },
+  inputClass: { type: String, default: "" },
+  existingUsers: { type: Array, default: () => [] },
+  allowCustomEmail: { type: Boolean, default: false },
+  additionalFilters: { type: Array, default: () => [] },
+  copyOnClick: { type: Boolean, default: false },
+  customEmailLabel: { type: String, default: __("Invite via email") },
+});
+
+const errorMessage = (value) => __("{0} is an Invalid Email Address", [value]);
+
+// v-model values
+const values = defineModel();
+
+// Common state
+const pills = ref(null);
+const search = ref(null);
+const error = ref(null);
+const info = ref(null);
+const query = ref("");
+const showOptions = ref(false);
+const tempSelection = ref(null);
+
+const { users } = useUserStore();
+
+// --- Contacts resource (used when scope = "contact") ---
+const filterContacts = createResource({
+  url: "helpdesk.api.contact.search_contacts",
+  method: "GET",
+  params: contactSearchParams(""),
+  transform: (data) =>
+    data.map(({ full_name, email_id, name }) => ({
+      label: full_name || email_id || name,
+      value: email_id || name,
+      email: email_id,
+      name,
+    })),
+});
+
+watchDebounced(
+  query,
+  (newVal) => {
+    if (props.scope === "agents") return;
+    filterContacts.update({ params: contactSearchParams(newVal) });
+    filterContacts.reload();
+  },
+  { debounce: 250, immediate: true }
+);
+
+function contactSearchParams(txt) {
+  const params = { txt: txt || "" };
+  if (props.additionalFilters?.length) {
+    params.additional_filters = JSON.stringify(props.additionalFilters);
+  }
+  return params;
+}
+
+// --- Options ---
+const options = computed(() => {
+  if (props.scope === "agents") {
+    let list = (users?.data || []).map((u) => ({
+      label: u.full_name || u.name,
+      value: u.name,
+    }));
+    if (values.value?.length) {
+      list = list.filter((o) => !values.value.includes(o.value));
+    }
+    if (props.existingUsers?.length) {
+      list = list.filter((o) => !props.existingUsers.includes(o.value));
+    }
+    return list.filter(matchesQuery);
+  }
+
+  // contacts mode; the search is debounced, so narrow the last results to the
+  // typed text, or a quick Enter picks a contact that no longer matches
+  let list = (filterContacts.data || []).filter(matchesQuery);
+  if (values.value?.length) {
+    list = list.filter((o) => !values.value.includes(o.value));
+  }
+  if (props.existingUsers?.length) {
+    list = list.filter((o) => !isExistingUser(o.email));
+  }
+  // offer the typed text itself when nothing matches, like the email To field
+  if (
+    props.allowCustomEmail &&
+    query.value &&
+    !list.length &&
+    !isExistingUser(query.value)
+  ) {
+    list = [{ label: query.value, value: query.value, isCustom: true }];
+  }
+  return list;
+});
+
+function matchesQuery(option) {
+  const q = query.value.toLowerCase();
+  return [option.label, option.value, option.name].some((field) =>
+    field?.toLowerCase().includes(q)
+  );
+}
+
+function isExistingUser(email) {
+  if (!email) return false;
+  return props.existingUsers?.some(
+    (user) => user?.toLowerCase?.() === email.toLowerCase()
+  );
+}
+
+function addValue(input) {
+  if (!input) return;
+  error.value = null;
+  info.value = null;
+  const parts = splitRecipients(input);
+  for (const email of parts) {
+    if (values.value?.includes(email)) continue;
+    const inList = options.value.some((o) => o.value === email && !o.isCustom);
+    if (!inList && !canAddCustomValue(email)) break;
+    if (!values.value) values.value = [email];
+    else values.value.push(email);
+  }
+}
+
+function canAddCustomValue(email) {
+  if (!props.allowCustomEmail) {
+    error.value =
+      props.scope === "agents"
+        ? __("{0} is not an existing user", [email])
+        : __("{0} is not an existing contact", [email]);
+    query.value = email;
+    return false;
+  }
+  if (isExistingUser(email)) {
+    error.value = __("{0} is already added", [email]);
+    query.value = email;
+    return false;
+  }
+  if (props.validate && !props.validate(email)) {
+    error.value = errorMessage(email);
+    query.value = email;
+    return false;
+  }
+  return true;
+}
+
+// Split on commas/semicolons/newlines while keeping a quoted display name
+// intact, so '"Doe, John" <a@b.com>' stays a single token.
+function splitRecipients(input) {
+  const parts = [];
+  let current = "";
+  let inQuotes = false;
+  for (const char of input) {
+    if (char === '"') {
+      inQuotes = !inQuotes;
+      current += char;
+    } else if ((char === "," || char === ";" || char === "\n") && !inQuotes) {
+      if (current.trim()) parts.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+
+// Reduce a "Name <email>" value to just the display name for rendering.
+function getUsernameLabel(value) {
+  if (!value) return "";
+  return value.split("<")[0].replace(/"/g, "").trim();
+}
+
+function removeValue(value) {
+  values.value = values.value.filter((v) => v !== value);
+}
+
+// Read the pills from the DOM: a Button with a tooltip renders extra root
+// nodes, so its `$el` is not the <button>.
+function lastPill() {
+  const buttons = pills.value?.querySelectorAll(":scope > button");
+  return buttons?.[buttons.length - 1] ?? null;
+}
+
+function removeLastValue() {
+  if (query.value) return;
+  const pill = lastPill();
+  if (document.activeElement === pill) {
+    values.value.pop();
+    nextTick(() => {
+      if (values.value.length) {
+        lastPill()?.focus();
+      } else {
+        setFocus();
+      }
+    });
+  } else {
+    pill?.focus();
+  }
+}
+
+// TODO: use single contact component. This refocus also fires when focus has
+// already moved on, so a click elsewhere within 200ms is pulled back here.
+function setFocus() {
+  setTimeout(() => {
+    search.value?.$el?.focus();
+  }, 200);
+}
+
+function onInput(e) {
+  query.value = e.target.value;
+  error.value = null;
+  info.value = null;
+  showOptions.value = true;
+}
+
+function onSelect(val) {
+  if (!val) return;
+  addValue(val);
+  if (error.value) {
+    showOptions.value = false;
+    return;
+  }
+  query.value = "";
+  tempSelection.value = null;
+  showOptions.value = true;
+  nextTick(() => setFocus());
+}
+
+// Commit the current query as a pill on Enter, comma or space.
+function onKeydown(e) {
+  const isCommitKey = e.key === "Enter" || e.key === "," || e.key === " ";
+  if (!isCommitKey || !query.value.trim()) return;
+  e.preventDefault();
+  onSelect(query.value);
+}
+
+// Split a pasted, comma/space/newline-separated list into multiple pills.
+function onPaste(e) {
+  const text = e.clipboardData?.getData("text") ?? "";
+  if (!/[\s,;]/.test(text)) return;
+  e.preventDefault();
+  addValue(text);
+  if (!error.value) {
+    query.value = "";
+    tempSelection.value = null;
+    nextTick(() => setFocus());
+  }
+}
+
+watch(options, (list) => {
+  tempSelection.value = list[0]?.value ?? null;
+});
+
+onMounted(() => {
+  // reka-ui hardcodes autocomplete="off", which Chrome ignores for fields it
+  // reads as email/address. "new-password" is the value Chrome won't autofill,
+  // so its native address dropdown stops covering our options. (No password UI:
+  // the input is type=text and not inside a form.)
+  search.value?.$el?.setAttribute("autocomplete", "new-password");
+});
+
+defineExpose({ setFocus });
+</script>

desk/src/components/EmptyMessage.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="m-auto w-max text-base text-gray-700">
-    {{ message }}
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{ message: string }>();
-</script>

desk/src/components/EmptyState.vue

@@ -1,33 +1,94 @@
 <template>
-  <div class="flex h-full items-center justify-center">
+  <div
+    v-if="variant === 'badge'"
+    class="flex flex-col items-center justify-center gap-4 absolute inset-x-0 top-5.5 bottom-0 pointer-events-none"
+  >
     <div
-      class="flex flex-col items-center gap-3 text-xl font-medium text-ink-gray-4"
+      class="p-4 size-14.5 rounded-full bg-surface-gray-1 flex justify-center items-center"
     >
+      <component v-if="icon" :is="icon" class="size-6 text-ink-gray-6" />
+    </div>
+    <div class="flex flex-col items-center gap-1">
+      <div class="text-base-medium text-ink-gray-6">
+        {{ __(title) }}
+      </div>
+      <div
+        v-if="descriptionText"
+        class="text-p-sm text-ink-gray-5 max-w-60 text-center"
+      >
+        {{ __(descriptionText) }}
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="flex h-full items-center justify-center absolute inset-x-0 top-0 pointer-events-none"
+  >
+    <div
+      class="flex flex-col items-center gap-2 text-xl-medium text-ink-gray-4 w-9/12 md:w-4/12"
+    >
+      <!-- overlay variant (for charts) -->
+      <div
+        v-if="variant === 'overlay'"
+        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none -z-10"
+        :style="{
+          backgroundImage:
+            'radial-gradient(ellipse at center, var(--surface-base) 10%, color-mix(in srgb, var(--surface-base) 90%, transparent) 25%, transparent 70%)',
+        }"
+      />
       <!-- Icon -->
       <component v-if="icon" :is="icon" class="h-10 w-10" />
       <!-- title -->
-      <span>{{ title }}</span>
-      <!-- Button which emits Empty State Action -->
-      <Button label="Create" @click="emit('emptyStateAction')" variant="subtle">
-        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
-      </Button>
+      <div class="flex flex-col items-center justify-center gap-0.5">
+        <span
+          :class="{
+            'text-sm font-medium text-ink-gray-8': text === 'sm',
+            'text-base font-medium text-ink-gray-8': text === 'md' || !text,
+            'text-md font-medium text-ink-gray-8': text === 'lg',
+          }"
+        >
+          {{ __(title) }}
+        </span>
+        <span
+          v-if="descriptionText"
+          :class="{
+            'text-center text-p-xs text-ink-gray-6 mt-1': text === 'sm',
+            'text-center text-p-sm text-ink-gray-6 mt-1':
+              text === 'md' || !text,
+            'text-center text-p-base text-ink-gray-6 mt-1': text === 'lg',
+          }"
+        >
+          {{ __(descriptionText) }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { VNode } from "vue";
+import { VNode, computed } from "vue";
 interface Props {
   title: string;
   icon?: VNode | string;
+  description?: string;
+  variant?: "default" | "overlay" | "badge";
+  text?: "sm" | "md" | "lg";
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   title: "No Data Found",
   icon: "",
+  variant: "default",
+  text: "lg",
 });
 
-const emit = defineEmits(["emptyStateAction"]);
+const descriptionText = computed(() =>
+  props.description !== undefined && props.description !== ""
+    ? props.description
+    : `Create new ${props.title
+        .split(" ")[1]
+        .toLocaleLowerCase()} using the Create button.`
+);
 </script>
 
 <style lang="scss" scoped></style>