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 &
+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

@@ -0,0 +1,68 @@
+name: Build Container Image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - "*"
+
+jobs:
+  build:
+    name: Build
+
+    runs-on: ubuntu-latest
+
+    permissions:
+      packages: write
+
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set Branch
+        run: |
+          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
+        run: |
+          echo "IMAGE_TAG=stable" >> $GITHUB_ENV
+
+      - uses: actions/checkout@v4
+        with:
+          repository: frappe/frappe_docker
+          path: builds
+
+      - name: Build
+        uses: docker/build-push-action@v6
+        with:
+          load: true
+          context: builds
+          file: builds/images/layered/Containerfile
+          tags: >
+            ghcr.io/${{ github.repository }}:${{ github.ref_name }},
+            ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
+          build-args: |
+            "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
+          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
@@ -67,7 +64,7 @@ jobs:
         run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
 
       - name: Cache pip
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml') }}
@@ -76,7 +73,7 @@ jobs:
             ${{ runner.os }}-
 
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
@@ -91,7 +88,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -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:
@@ -118,29 +108,28 @@ jobs:
         env:
           TYPE: server
           CI_BUILD_ID: ${{ github.run_id }}
-          ORCHESTRATOR_URL: http://test-orchestrator.frappe.io
-
+      
       - name: Upload coverage data
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: coverage
+          name: coverage-${{ matrix.container }}
           path: /home/runner/frappe-bench/sites/coverage.xml
 
   coverage:
-    name: Coverage
-    needs: test
+    name: Coverage Wrap Up
+    needs: tests
     runs-on: ubuntu-latest
     steps:
       - name: Clone
-        uses: actions/checkout@v2
+        uses: actions/checkout@v6
 
       - name: Download artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
 
       - name: Upload coverage data
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v4
         with:
           name: MariaDB
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
-          verbose: 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

@@ -8,6 +8,7 @@ __pycache__/
 *.log
 tags
 node_modules
+.vscode
 
 # Distribution / packaging
 .Python
@@ -28,9 +29,21 @@ share/python-wheels/
 *.egg-info/
 .installed.cfg
 *.egg
+.playwright-mcp
+.claude-flow
+.claude
+.claude-worktrees
+CLAUDE.md
+
 
 helpdesk/docs/current
 helpdesk/public/desk
+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

@@ -1,63 +1,217 @@
 <div align="center" markdown="1">
-	<a href="https://frappedesk.com/">
-		<img src=".github/hd-logo.svg" height="128" alt="Frappe Helpdesk Logo">
-	</a>
-	<h2>Frappe Helpdesk</h2>
-	<p align="center">
-	<p>Modern, Streamlined, Customer Service Software</p>
-	</p>
-  
-[frappedesk.com](https://frappedesk.com)
 
-<div align="center" style="max-height: 40px;">
-	<a href="https://frappecloud.com/helpdesk/signup">
-		<img src=".github/try-on-f-cloud-button.svg" height="50">
-	</a>
-</div>
+<img src=".github/hd-logo.svg" alt="Frappe Helpdesk logo" width="80"/>
+<h1>Frappe Helpdesk</h1>
+
+**Customer Service, Made Simple and Effective**
+
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/frappe/helpdesk)
+[![codecov](https://codecov.io/github/frappe/helpdesk/branch/develop/graph/badge.svg?token=8ZXHCY4G9U)](https://codecov.io/github/frappe/helpdesk)
+
+<a href="https://trendshift.io/repositories/12764" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12764" alt="teableio%2Fteable | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </div>
 
----
+</div>
 
-Frappe Helpdesk offers an easy setup, clean user interface, and automation tools to resolve customer issues efficiently. It is based on Frappe Framework. It lets you streamline your company's support and helps you to efficiently manage your customer queries. It can help you to,
 
--   Create tickets from email or help center
--   Empower customers with a comprehensive knowledge base and self-service portal
--   Automate redundant tasks like agent assignment and set up triggers to notify agents and customers based on certain events
+<div align="center">
+	<img src="./.github/Hero2.png" alt="Hero Image" width="100%" />
+</div>
+<br />
+<div align="center">
+	<a href="https://frappe.io/helpdesk">Website</a>
+	-
+	<a href="https://docs.frappe.io/helpdesk">Documentation</a>
+</div>
 
-![screenshot](./screenshot.webp)
+## Frappe Helpdesk
+Frappe Helpdesk is an 100% open-source Ticket Management tool which helps you  streamline your company's support, offers an easy setup, clean user interface, and automation tools to resolve customer queries efficiently.
 
-## Installation
 
-1. Install and setup bench by following [this guide](https://frappeframework.com/docs/user/en/installation)
-2. In the bench directory, run `bench start` and keep it running
-3. Open another terminal in bench directory, and run these commands
 
-	```
-	bench get-app helpdesk
-	bench new-site helpdesk.test
-	bench --site helpdesk.test install-app helpdesk
-	bench --site helpdesk.test add-to-hosts
-	```
+### Motivation
+Managing issues from our customers was a big challenge for us. We were using the ERPNext support module which was not very good in UI and the UX was also not good. We wanted to have a tool that can be easily integrated with our existing system and can be customized as per our needs. So we decided to build Frappe Helpdesk.
 
-	You can now access Helpdesk at `http://helpdesk.test`
-5. You can also run a development server by following theses steps, in Helpdesk
-   directory (`apps/helpdesk`)
+### Key Features
 
-   ```
-   yarn
-   yarn dev
-   ```
+- **Agent and Customer Portal Views**: Dual portals for agents and customers to simplify issue submission and management.
 
-   Development server will be now available at `http://localhost:8080`
+- **Customizable SLAs**: Discover how you can set and track SLAs for better response times.
 
-## Contributions and Community
+- **Assignment Rules**: Custom auto-assignment of tickets based on priority, issue type, or workload.
 
-There are many ways you can contribute even if you don't code:
+- **Knowledge Base**: Learn how to create and manage help articles to empower users and reduce tickets.
 
-1. You can start by giving a star to this repository!
-2. If you find any issues, even if it is a typo, you can [raise an issue](https://github.com/frappe/desk/issues/new) to inform us.
-3. Join our [Telegram group](https://t.me/frappedesk) and share your thoughts.
+- **Saved Replies**: Pre-written replies for common queries to ensure quick and consistent communication.
 
-## License
+<details open>
+<summary >View Screenshots</summary>
+<h3></h3>
 
-[GNU Affero General Public License v3.0](/licence.md)
+<div align="center">
+	<sub>
+		Agent List View
+	</sub>
+</div>
+
+![Agent List View](.github/AgentListView.png)
+
+
+<div align="center">
+	<sub>
+		Upload articles and let your customer solve their queries through the Knowledge Base.
+	</sub>
+</div>
+
+![Knowledge Base](.github/KB.png)
+
+<div align="center">
+	<sub>
+		With advanced search, your customers will be recommended relevant articles regarding their issue.
+	</sub>
+</div>
+
+
+![Article Search](.github/Search2.png)
+
+
+
+</details>
+<br>
+
+
+### Under the Hood
+
+- [**Frappe Framework**](https://github.com/frappe/frappe): A full-stack web application framework written in Python and Javascript.
+
+- [**Frappe UI**](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface. 
+
+
+## Production Setup
+
+### Managed Hosting
+
+You can try [Frappe Cloud](https://frappecloud.com), a simple, user-friendly and sophisticated [open-source](https://github.com/frappe/press) platform to host Frappe applications with peace of mind.
+
+It takes care of installation, setup, upgrades, monitoring, maintenance and support of your Frappe deployments. It is a fully featured developer platform with an ability to manage and control multiple Frappe deployments.
+
+<div>
+	<a href="https://frappecloud.com/helpdesk/signup" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/try-on-fc-white.png">
+			<img src="https://frappe.io/files/try-on-fc-black.png" alt="Try on Frappe Cloud" height="28" />
+		</picture>
+	</a>
+</div>
+
+### Self Hosting
+
+Follow these steps to set up Frappe Helpdesk in production:
+
+**Step 1**: Download the easy install script
+
+```bash
+wget https://frappe.io/easy-install.py
+```
+
+**Step 2**: Run the deployment command
+
+```bash
+python3 ./easy-install.py deploy \
+    --project=helpdesk_prod_setup \
+    --email=your_email.example.com \
+    --image=ghcr.io/frappe/helpdesk \
+    --version=stable \
+    --app=helpdesk \
+    --sitename subdomain.domain.tld
+```
+
+Replace the following parameters with your values:
+- `your_email.example.com`: Your email address
+- `subdomain.domain.tld`: Your domain name where Helpdesk will be hosted
+
+The script will set up a production-ready instance of Frappe Helpdesk with all the necessary configurations in about 5 minutes.
+
+## Development Setup
+
+### Docker
+
+You need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, follow below steps:
+
+**Step 1**: Setup folder and download the required files
+
+    mkdir frappe-helpdesk
+    cd frappe-helpdesk
+
+    # Download the docker-compose file
+    wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/helpdesk/develop/docker/docker-compose.yml
+
+    # Download the setup script
+    wget -O init.sh https://raw.githubusercontent.com/frappe/helpdesk/develop/docker/init.sh
+
+**Step 2**: Run the container and daemonize it
+
+    docker compose up -d
+
+**Step 3**: The site [http://helpdesk.localhost:8000/helpdesk](http://helpdesk.localhost:8000/helpdesk) should now be available. The default credentials are:
+- Username: Administrator
+- Password: admin
+
+### Local
+
+To setup the repository locally follow the steps mentioned below:
+
+1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
+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
+
+
+**For Frontend Development**
+1. Open a new terminal session and cd into `frappe-bench/apps/helpdesk/desk`, and run the following commands:
+    ```
+    yarn install
+    yarn dev or yarn dev --host helpdesk.test
+    ```
+1. Now, you can access the site on vite dev server at `http://helpdesk.test:8080`
+
+**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">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

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,15 +205,7 @@
     <div id="popovers"></div>
     <script type="module" src="/src/main.js"></script>
     <script>
-      window.csrf_token = "{{ csrf_token }}";
-      window.frappe_version = "{{ frappe_version }}";
-      window.helpdesk_version = "{{ helpdesk_version }}";
       window.site_name = "{{ site_name }}";
-      window.favicon = "{{ favicon }}";
-
-      document.querySelectorAll("link[rel='icon']").forEach((link) => {
-        link.href = window.favicon;
-      });
     </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

@@ -1,53 +1,61 @@
 {
-	"name": "helpdesk-ui",
-	"private": true,
-	"version": "0.0.0",
-	"scripts": {
-		"dev": "vite",
-		"preview": "vite preview",
-		"build": "vite build --base=/assets/helpdesk/desk/ && yarn copy-html-entry",
-		"serve": "vite preview",
-		"copy-html-entry": "cp ../helpdesk/public/desk/index.html ../helpdesk/www/helpdesk/index.html"
-	},
-	"dependencies": {
-		"@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",
-		"@vee-validate/zod": "^4.8.2",
-		"@vitejs/plugin-vue": "^4.0.0",
-		"@vueuse/core": "^10.0.2",
-		"autoprefixer": "^10.4.13",
-		"dayjs": "^1.11.7",
-		"echarts": "^5.4.1",
-		"frappe-ui": "^0.1.53",
-		"lodash": "^4.17.21",
-		"lucide-static": "^0.276.0",
-		"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",
-		"vue-router": "^4.2.2",
-		"vuedraggable": "^4.1.0",
-		"zod": "^3.21.4"
-	},
-	"resolutions": {
-		"cheerio": "1.0.0-rc.12"
-	},
-	"devDependencies": {
-		"vite-plugin-pwa": "^0.20.5"
-	}
+  "name": "helpdesk-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "postinstall": "patch-package"
+  },
+  "dependencies": {
+    "@framework/ui": "link:../../frappe/ui",
+    "@headlessui/vue": "^1.7.22",
+    "@tailwindcss/typography": "^0.5.9",
+    "@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.6.2",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/integrations": "^14.1.0",
+    "dayjs": "^1.11.7",
+    "echarts": "^6.1.0",
+    "grid-layout-plus": "^1.1.0",
+    "frappe-ui": "1.0.0-rc.1",
+    "mime": "^3.0.0",
+    "pinia": "^2.0.33",
+    "sanitize-html": "^2.10.0",
+    "socket.io-client": "^4.7.2",
+    "tailwindcss-rtl": "^0.9.0",
+    "vue": "^3.5.14",
+    "vue-router": "^4.2.2",
+    "vuedraggable": "^4.1.0",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@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",
+    "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 { provide, ref, 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 { init as initTelemetry } from "@/telemetry";
-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";
 
-onMounted(async () => {
+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" }),
     });
   });
-  await initTelemetry();
-});
-
-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

@@ -1,10 +1,14 @@
 <template>
-  <Avatar v-if="config.brandLogo" size="xl" :image="config.brandLogo" />
-  <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
+  <img
+    v-if="config.brandLogo"
+    :src="config.brandLogo"
+    alt="Brand Logo"
+    class="h-8 w-8 shrink-0 object-cover"
+  />
+  <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,89 +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>
-    </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/ColumnSettings.vue

@@ -1,212 +0,0 @@
-<template>
-  <NestedPopover>
-    <template #target>
-      <Button label="Columns">
-        <template v-if="hideLabel">
-          <ColumnsIcon class="h-4" />
-        </template>
-        <template v-if="!hideLabel" #prefix>
-          <ColumnsIcon class="h-4" />
-        </template>
-      </Button>
-    </template>
-    <template #body>
-      <div
-        class="my-2 rounded-lg border border-gray-100 bg-white p-1.5 shadow-xl"
-      >
-        <div v-if="!edit">
-          <Draggable
-            :list="columns"
-            item-key="key"
-            class="list-group"
-            @end="update"
-          >
-            <template #item="{ element }">
-              <div
-                class="flex cursor-grab items-center justify-between gap-6 rounded px-2 py-1.5 text-base text-gray-800 hover:bg-gray-100"
-              >
-                <div class="flex items-center gap-2">
-                  <DragIcon class="h-3.5" />
-                  <div>{{ element.label }}</div>
-                </div>
-                <div class="flex cursor-pointer items-center gap-1">
-                  <Button
-                    variant="ghost"
-                    class="!h-5 w-5 !p-1"
-                    @click="editColumn(element)"
-                  >
-                    <EditIcon class="h-3.5" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    class="!h-5 w-5 !p-1"
-                    @click="removeColumn(element)"
-                  >
-                    <FeatherIcon name="x" class="h-3.5" />
-                  </Button>
-                </div>
-              </div>
-            </template>
-          </Draggable>
-          <div class="mt-1.5 flex flex-col gap-1 border-t pt-1.5">
-            <Autocomplete
-              value=""
-              :options="fields"
-              @change="(e) => addColumn(e)"
-            >
-              <template #target="{ togglePopover }">
-                <Button
-                  class="w-full !justify-start !text-gray-600"
-                  variant="ghost"
-                  label="Add Column"
-                  @click="togglePopover()"
-                >
-                  <template #prefix>
-                    <FeatherIcon name="plus" class="h-4" />
-                  </template>
-                </Button>
-              </template>
-            </Autocomplete>
-            <Button
-              class="w-full !justify-start !text-gray-600"
-              variant="ghost"
-              label="Reset to Default"
-              @click="resetToDefault(close)"
-            >
-              <template #prefix>
-                <ReloadIcon class="h-4" />
-              </template>
-            </Button>
-          </div>
-        </div>
-        <div v-else>
-          <div
-            class="flex flex-col items-center justify-between gap-2 rounded px-2 py-1.5 text-base text-gray-800"
-          >
-            <div class="flex flex-col items-center gap-3">
-              <FormControl
-                v-model="column.label"
-                type="text"
-                size="md"
-                label="Label"
-                class="w-full"
-                placeholder="Column Label"
-              />
-              <FormControl
-                v-model="column.width"
-                type="text"
-                size="md"
-                label="Width"
-                class="w-full"
-                placeholder="Column Width"
-                description="Width can be in number, pixel or rem (eg. 3, 30px, 10rem)"
-                :debounce="500"
-              />
-            </div>
-            <div class="flex w-full gap-2 border-t pt-2">
-              <Button
-                variant="subtle"
-                label="Cancel"
-                class="w-full flex-1"
-                @click="cancelUpdate"
-              />
-              <Button
-                variant="solid"
-                label="Update"
-                class="w-full flex-1"
-                @click="update"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </NestedPopover>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import ColumnsIcon from "@/components/icons/ColumnsIcon.vue";
-import EditIcon from "@/components/icons/EditIcon.vue";
-import NestedPopover from "@/components/NestedPopover.vue";
-import { Autocomplete } from "@/components";
-import Draggable from "vuedraggable";
-
-let emit = defineEmits(["event:column"]);
-let edit = ref(false);
-const column = ref({
-  old: {},
-  label: "",
-  key: "",
-  width: "10rem",
-});
-
-let props = defineProps({
-  fields: {
-    type: Array,
-    required: true,
-  },
-  columns: {
-    type: Array,
-    required: true,
-  },
-  hideLabel: {
-    type: Boolean,
-    default: false,
-  },
-  isCustomerPortal: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-function resetToDefault(close) {
-  let columnEvent = {
-    event: "reset",
-  };
-  emit("event:column", columnEvent);
-  close();
-}
-
-function editColumn(c) {
-  edit.value = true;
-  column.value = c;
-  column.value.old = { ...c };
-}
-
-function cancelUpdate() {
-  edit.value = false;
-  column.value.label = column.value.old.label;
-  column.value.width = column.value.old.width;
-  delete column.value.old;
-}
-
-function addColumn(c) {
-  let columnEvent = {
-    event: "add",
-    data: {
-      label: c.label,
-      type: c.type,
-      key: c.value,
-      width: "10rem",
-    },
-  };
-  emit("event:column", columnEvent);
-}
-
-function update() {
-  edit.value = false;
-  let columnEvent = {
-    event: "update",
-  };
-  emit("event:column", columnEvent);
-}
-
-function removeColumn(c) {
-  let columnEvent = {
-    event: "remove",
-    data: c,
-  };
-  emit("event:column", columnEvent);
-}
-</script>

desk/src/components/CommentBox.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="flex-col text-base">
-    <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">
-        <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">
-          <Dropdown
-            :options="[{ label: 'Delete', onClick: () => (showDialog = true) }]"
-          >
-            <Button
-              icon="more-horizontal"
-              class="text-gray-600"
-              variant="ghost"
-            />
-          </Dropdown>
-        </div>
-      </div>
-    </div>
-    <div
-      class="prose-f grow cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
-      v-html="content"
-    />
-  </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 } from "vue";
-import { Dropdown, createResource, Dialog, Avatar } from "frappe-ui";
-import { dateFormat, timeAgo, dateTooltipFormat, createToast } from "@/utils";
-import { useAuthStore } from "@/stores/auth";
-import { useUserStore } from "@/stores/user";
-
-const authStore = useAuthStore();
-const props = defineProps({
-  activity: {
-    type: Object,
-    required: true,
-  },
-});
-const { getUser } = useUserStore();
-
-const { name, creation, content, commenter, commentedBy } = props.activity;
-
-const emit = defineEmits(["update"]);
-const showDialog = ref(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",
-    });
-  },
-});
-</script>

desk/src/components/CommentTextEditor.vue

@@ -1,115 +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',
-    ]"
-    :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"
+    :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" />
+                  <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 } 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 { storeToRefs } from "pinia";
 
-const { agents: agentsList } = useAgentStore();
+const { updateOnboardingStep } = useOnboarding("helpdesk") ?? {};
+const { agents: agentsList, dropdown } = storeToRefs(useAgentStore());
+const authStore = useAuthStore();
+const { isManager } = authStore;
+const { getUser } = useUserStore();
 
 const props = defineProps({
+  ticketId: {
+    type: String,
+    default: null,
+  },
   placeholder: {
     type: String,
     default: null,
   },
+  label: {
+    type: String,
+    default: "Comment",
+  },
   editable: {
     type: Boolean,
     default: true,
@@ -120,83 +161,124 @@ const props = defineProps({
   },
 });
 
-const doc = defineModel();
+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 emit = defineEmits(["submit", "discard"]);
-const newComment = useStorage("commentBoxContent", "");
-const commentEmpty = computed(() => {
-  return !newComment.value || newComment.value === "<p></p>";
+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 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,
-      },
+      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;
     },
+    onError: () => {
+      toast.error(__("Could not add the comment"));
+      pendingRow.drop();
+      newComment.value = content;
+      attachments.value = sentAttachments;
+      loading.value = false;
+      emit("restore");
+    },
   });
 
   comment.submit();
 }
 
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
+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-10 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,78 +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">
-      <CommentTextEditor
-        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 { 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";
 
-import { EmailEditor, CommentTextEditor } from "@/components";
-import { EmailIcon, CommentIcon } from "@/components/icons/";
-
-const content = defineModel("content");
-const showEmailBox = ref(false);
-const showCommentBox = ref(false);
-const doc = defineModel();
-const attachments = ref([]);
 const emit = defineEmits(["update"]);
+const content = defineModel("content");
+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) {
@@ -105,13 +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();
+}
+
+function submitComment() {
+  commentTextEditorRef.value.submitComment();
+}
+
+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)
   );
 }
 
@@ -120,6 +184,10 @@ const props = defineProps({
     type: String,
     default: "HD Ticket",
   },
+  ticketId: {
+    type: String,
+    default: null,
+  },
   toEmails: {
     type: Array,
     default: () => [],
@@ -134,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>
@@ -148,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

@@ -0,0 +1,49 @@
+<template>
+  <Button :label="label" @click="handleDiscard" />
+</template>
+
+<script setup lang="ts">
+import { globalStore } from "@/stores/globalStore";
+const { $dialog } = globalStore();
+const emit = defineEmits<{
+  (event: "discard"): void;
+}>();
+
+const {
+  label = "Discard",
+  hideDialog = false,
+  title = "Discard?",
+  message = "Are you sure you want to discard this?",
+} = defineProps<{
+  label?: string;
+  hideDialog?: boolean;
+  title?: string;
+  message?: string;
+}>();
+
+function handleDiscard() {
+  if (hideDialog) {
+    emit("discard");
+    return;
+  }
+  $dialog({
+    title: title,
+    message: message,
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      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,172 +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: to ?? sender.name,
-            })
-          "
-        >
-          <ReplyIcon class="h-4 w-4" />
-        </Button>
-        <Button
-          variant="ghost"
-          class="text-gray-700"
-          @click="
-            emit('reply', {
-              content: content,
-              to: to ?? sender.name,
-              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>
-    <!-- <div
-      class="email-content prose-f max-h-[500px] overflow-y-auto"
-      v-html="content"
-    /> -->
-    <EmailContent :content="content" :emailBox="emailBox" />
-    <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 { UserAvatar, AttachmentItem } from "@/components";
-import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
-import { ReplyIcon, ReplyAllIcon } from "./icons";
-import { useScreenSize } from "@/composables/screen";
-import { inject } from "vue";
-
-const props = defineProps({
-  activity: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { sender, to, cc, bcc, creation, subject, attachments, content } =
-  props.activity;
-
-const emit = defineEmits(["reply"]);
-
-let emailBox = inject("communicationArea");
-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>