feat: add forward msg

test-client.ts

@@ -1,7 +1,8 @@
 import { WhatsAppClient } from "./src/client/whatsapp";
 import { getId } from "./ui/src/lib/utils";
 
-const wa = new WhatsAppClient("ws://127.0.0.1:8787");
+// const wa = new WhatsAppClient("ws://127.0.0.1:8787");
+const wa = new WhatsAppClient(process.env.WS_URL);
 await wa.connect();
 
 // console.log("status", await wa.status());
@@ -9,19 +10,30 @@ await wa.connect();
 // const devices = await wa.listDevices();
 // console.log("devices", devices);
 
-// const test = await wa.exec("return window.location;");
+// const data = JSON.stringify({
-// console.log("test", test);
+//   DEVICE_ID: "1789636162707",
+//   DEVICE_NAME: "7C-1",
+// });
+// console.log(data);
+// await wa.exec(`return localStorage.setItem('wa-bridge-consts', '${data}');`);
+// const test = await wa.exec(`return localStorage.getItem('wa-bridge-consts');`);
+
+// const test = await wa.exec(`return document.hasFocus();`);
+const test = await wa.exec(`window.location.reload(); return 1;`);
+console.log("test", test);
+
+// const test = await wa.exec(`return GM_info.script.version;`);
 
 // const groups = await wa.listGroups();
 // console.log(groups.map((i) => ({ name: i.subject, id: getId(i.id) })));
 
-const groupId = "[email protected]";
+// const groupId = "[email protected]";
 
-const messages = await wa.getMessages({ chatId: groupId, count: 50 });
+// const messages = await wa.getMessages({ chatId: groupId, count: 50 });
-console.log(
+// console.log(
-  messages
+//   messages
-    .filter((i) => i.type === "chat")
+//     .filter((i) => i.type === "chat")
-    .map((i) => ({ body: i.body, fromMe: i.fromMe })),
+//     .map((i) => ({ body: i.body, fromMe: i.fromMe })),
-);
+// );
 
 process.exit(0);

ui/package.json

@@ -21,9 +21,11 @@
     "nanoid": "^6.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-select": "^5.10.2",
     "shadcn": "^4.21.0",
     "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
     "@types/node": "^24.13.3",

ui/pnpm-lock.yaml

@@ -41,15 +41,21 @@ importers:
       react-dom:
         specifier: ^19.2.8
         version: 19.3.0([email protected])
+      react-select:
+        specifier: ^5.10.2
+        version: 5.10.2(@types/[email protected])([email protected]([email protected]))([email protected])
       shadcn:
         specifier: ^4.21.0
-        version: 4.21.0([email protected])
+        version: 4.21.0([email protected])([email protected])
       tailwindcss:
         specifier: ^4.3.3
         version: 4.3.3
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
+      zustand:
+        specifier: ^5.0.15
+        version: 5.0.15(@types/[email protected])([email protected])([email protected]([email protected]))
     devDependencies:
       '@types/node':
         specifier: ^24.13.3
@@ -242,6 +248,47 @@ packages:
   '@dotenvx/[email protected]':
     resolution: {integrity: sha512-VYJy0uhFm9zTJ1TxBaW/pA8bjbOM/OttaNMwZ1RHG4JKyRG7DhSdiqD1ipQoAyoD22olUtxbP78W9xY3Wd11bg==}
 
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/[email protected]':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@floating-ui/[email protected]':
     resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
 
@@ -625,11 +672,19 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-YJ7EqCstVTzIr0fMr7qul/977en+pQHrfmuKIo6Zr9i75Be21dr3MovcfvGtyvi2HAUrRerWps5sMO9I7WaxDw==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
   '@types/[email protected]':
     resolution: {integrity: sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==}
     peerDependencies:
       '@types/react': ^19.3.0
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/[email protected]':
     resolution: {integrity: sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==}
 
@@ -698,6 +753,10 @@ packages:
     resolution: {integrity: sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==}
     engines: {node: '>=10.12.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
@@ -803,6 +862,9 @@ packages:
     resolution: {integrity: sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==}
     engines: {node: '>=18'}
 
+  [email protected]:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
   [email protected]:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -818,6 +880,10 @@ packages:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
 
+  [email protected]:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
   [email protected]:
     resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
     engines: {node: '>=14'}
@@ -895,6 +961,9 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
+  [email protected]:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
   [email protected]:
     resolution: {integrity: sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==}
     engines: {node: '>=10'}
@@ -954,6 +1023,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
+  [email protected]:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
   [email protected]:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -1023,6 +1096,9 @@ packages:
     resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
     engines: {node: '>= 18.0.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   [email protected]:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -1097,6 +1173,9 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  [email protected]:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   [email protected]:
     resolution: {integrity: sha512-/Gng7NfoykZl2pjukW5Z6+8Yxm3BPRf86GTbQnt0SbySkvax4fyL4H3HhY1cCpBGmiW9XDRFzRV+CXK2W8QudQ==}
     engines: {node: '>=16.9.0'}
@@ -1139,6 +1218,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-J/vG0zBCbIKOQFfufSwyXdMrsohyJIUNkrnmo6WZGzoM7tr/lsbfW5b2BvisL6zsyMzK9UxV9L6c7AoFbyXHOA==}
+    engines: {node: '>= 0.4'}
+
   [email protected]:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
     engines: {node: '>=8'}
@@ -1422,6 +1505,10 @@ packages:
     resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
     engines: {node: '>=18'}
 
+  [email protected]:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1441,6 +1528,9 @@ packages:
     resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
     engines: {node: '>= 0.8'}
 
+  [email protected]:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   [email protected]:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
@@ -1607,9 +1697,16 @@ packages:
     resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
     engines: {node: '>=12'}
 
+  [email protected]:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
   [email protected]:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
+  [email protected]:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   [email protected]:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1653,6 +1750,9 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  [email protected]:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
   [email protected]:
     resolution: {integrity: sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==}
     engines: {node: '>= 0.10'}
@@ -1677,6 +1777,21 @@ packages:
     peerDependencies:
       react: ^19.3.0
 
+  [email protected]:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  [email protected]:
+    resolution: {integrity: sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  [email protected]:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   [email protected]:
     resolution: {integrity: sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==}
     engines: {node: '>=0.10.0'}
@@ -1696,6 +1811,11 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  [email protected]:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
@@ -1797,6 +1917,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
   [email protected]:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -1837,6 +1961,13 @@ packages:
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
     engines: {node: '>=18'}
 
+  [email protected]:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
+  [email protected]:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
   [email protected]:
     resolution: {integrity: sha512-/NXbMVASt2UbSVgmWto4aBTIAeuYY7zOELpZybmNxqpsrbo5uYHpuEPf5nkyrPng0uG5YOb+Yv6s0FyKY4mDQg==}
     engines: {node: '>=10.0.0'}
@@ -1912,6 +2043,15 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  [email protected]:
+    resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==}
     peerDependencies:
@@ -1991,6 +2131,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  [email protected]:
+    resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
+    engines: {node: '>= 6'}
+
   [email protected]:
     resolution: {integrity: sha512-DODGl1wJjA/s5pnJFKau9lIYHT81lnhob1i3e1TjxZRxEhWRKl74nTbWE6H5KlkViQQTo/Z29YFdxzTZAMY3ng==}
     engines: {node: '>=18.19'}
@@ -2007,6 +2151,24 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-MpSEjRiBkA9crSYeOUH32rJC7SVqAbm0Fqcqge/bUi2PPoLcBWKOsG+C8mevmpr8TwXHBVkChbbJiyvkE+i/3A==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@babel/[email protected]':
@@ -2241,6 +2403,70 @@ snapshots:
 
   '@dotenvx/[email protected]': {}
 
+  '@emotion/[email protected]':
+    dependencies:
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/[email protected]':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/[email protected]': {}
+
+  '@emotion/[email protected]': {}
+
+  '@emotion/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0([email protected])
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.3.0
+    optionalDependencies:
+      '@types/react': 19.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/[email protected]':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.2.3
+
+  '@emotion/[email protected]': {}
+
+  '@emotion/[email protected]': {}
+
+  '@emotion/[email protected]([email protected])':
+    dependencies:
+      react: 19.3.0
+
+  '@emotion/[email protected]': {}
+
+  '@emotion/[email protected]': {}
+
   '@floating-ui/[email protected]':
     dependencies:
       '@floating-ui/utils': 0.2.12
@@ -2512,10 +2738,16 @@ snapshots:
     dependencies:
       undici-types: 7.18.2
 
+  '@types/[email protected]': {}
+
   '@types/[email protected](@types/[email protected])':
     dependencies:
       '@types/react': 19.3.0
 
+  '@types/[email protected](@types/[email protected])':
+    dependencies:
+      '@types/react': 19.3.0
+
   '@types/[email protected]':
     dependencies:
       csstype: 3.2.3
@@ -2561,6 +2793,12 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      cosmiconfig: 7.1.0
+      resolve: 1.22.12
+
   [email protected]: {}
 
   [email protected]: {}
@@ -2658,6 +2896,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -2669,6 +2909,14 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  [email protected]:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.3
+
   [email protected]([email protected]):
     dependencies:
       env-paths: 2.2.1
@@ -2698,7 +2946,9 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  [email protected]: {}
+  [email protected]([email protected]):
+    optionalDependencies:
+      babel-plugin-macros: 3.1.0
 
   [email protected]: {}
 
@@ -2719,6 +2969,11 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      csstype: 3.2.3
+
   [email protected]:
     dependencies:
       is-obj: 2.0.0
@@ -2767,6 +3022,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -2884,6 +3141,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       locate-path: 3.0.0
@@ -2950,6 +3209,10 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  [email protected]:
+    dependencies:
+      react-is: 16.13.1
+
   [email protected]: {}
 
   [email protected]:
@@ -2983,6 +3246,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      hasown: 2.0.4
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3175,6 +3442,10 @@ snapshots:
       chalk: 5.6.2
       is-unicode-supported: 1.3.0
 
+  [email protected]:
+    dependencies:
+      js-tokens: 4.0.0
+
   [email protected]:
     dependencies:
       yallist: 3.1.1
@@ -3191,6 +3462,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3345,8 +3618,12 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3383,6 +3660,12 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  [email protected]:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   [email protected]:
     dependencies:
       forwarded: 0.2.0
@@ -3409,6 +3692,34 @@ snapshots:
       react: 19.3.0
       scheduler: 0.28.0
 
+  [email protected]: {}
+
+  [email protected](@types/[email protected])([email protected]([email protected]))([email protected]):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@emotion/cache': 11.14.0
+      '@emotion/react': 11.14.0(@types/[email protected])([email protected])
+      '@floating-ui/dom': 1.8.0
+      '@types/react-transition-group': 4.4.12(@types/[email protected])
+      memoize-one: 6.0.0
+      prop-types: 15.8.1
+      react: 19.3.0
+      react-dom: 19.3.0([email protected])
+      react-transition-group: 4.4.5([email protected]([email protected]))([email protected])
+      use-isomorphic-layout-effect: 1.2.1(@types/[email protected])([email protected])
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  [email protected]([email protected]([email protected]))([email protected]):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.3.0
+      react-dom: 19.3.0([email protected])
+
   [email protected]: {}
 
   [email protected]:
@@ -3425,6 +3736,13 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      es-errors: 1.3.0
+      is-core-module: 2.17.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
   [email protected]:
     dependencies:
       onetime: 7.0.0
@@ -3504,7 +3822,7 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected]([email protected]):
+  [email protected]([email protected])([email protected]):
     dependencies:
       '@babel/core': 7.29.7
       '@babel/parser': 7.29.8
@@ -3517,7 +3835,7 @@ snapshots:
       cn: 0.2.6
       commander: 14.0.3
       cosmiconfig: 9.0.2([email protected])
-      dedent: 1.7.2
+      dedent: 1.7.2([email protected])
       deepmerge: 4.3.1
       diff: 8.0.4
       execa: 9.6.1
@@ -3594,6 +3912,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3626,6 +3946,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3684,6 +4008,12 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 19.3.0
+    optionalDependencies:
+      '@types/react': 19.3.0
+
   [email protected]([email protected]):
     dependencies:
       react: 19.3.0
@@ -3723,6 +4053,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       yoctocolors: 2.2.0
@@ -3734,3 +4066,9 @@ snapshots:
       zod: 3.25.76
 
   [email protected]: {}
+
+  [email protected](@types/[email protected])([email protected])([email protected]([email protected])):
+    optionalDependencies:
+      '@types/react': 19.3.0
+      react: 19.3.0
+      use-sync-external-store: 1.7.0([email protected])

ui/src/app/chats.tsx

@@ -13,7 +13,7 @@ import {
   PhoneIcon,
   UsersIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 type Props = {
   selected: string | null;
@@ -23,10 +23,21 @@ export default function ChatsSection({ selected, onSelect }: Props) {
   const [query, setQuery] = useState("");
 
   const contacts = useContacts();
-  const { data: chats, isLoading } = useChats({
+  const {
+    data: chats,
+    isLoading,
+    refetch,
+  } = useChats({
     refetchInterval: 10_000,
   });
 
+  useEffect(() => {
+    // Refetch chat list when returning to main screen
+    if (!selected) {
+      refetch();
+    }
+  }, [selected]);
+
   const chatList = useMemo(() => {
     return (
       chats?.map((i) => {

ui/src/app/messages.tsx

@@ -7,7 +7,9 @@ import {
   CheckCheckIcon,
   CheckIcon,
   ChevronDown,
+  CornerUpRightIcon,
   Loader2Icon,
+  MousePointer2Icon,
   PaperclipIcon,
   PhoneCallIcon,
   SendIcon,
@@ -32,9 +34,11 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { forwardDlg } from "./stores";
 
 dayjs.extend(relativeTime);
 
@@ -53,6 +57,7 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
   const { data: chats } = useChats();
   const { data: contacts } = useContacts();
   const [search, setSearch] = useState("");
+  const [selectedIds, setSelectedIds] = useState<Set<string> | null>(null);
 
   const {
     data: messages,
@@ -83,7 +88,10 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
   });
 
   useEffect(() => {
-    if (chatId) msgContainerRef.current.scrollTop = 0;
+    if (chatId) {
+      msgContainerRef.current.scrollTop = 0;
+      setSelectedIds(null);
+    }
   }, [chatId]);
 
   useMessageEvent((data) => {
@@ -163,11 +171,23 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
       });
   }, [messages, contacts, search]);
 
-  async function onDeleteMsg(id: string) {
+  function onSelectMsg(id: string) {
+    setSelectedIds((s) => {
+      const set = new Set(s || []);
+      if (!set.has(id)) {
+        set.add(id);
+      } else {
+        set.delete(id);
+      }
+      return !set.size ? null : set;
+    });
+  }
+
+  async function onDeleteMsg(id: string | string[]) {
     if (!window.confirm("Delete this message?")) return;
     try {
       await client.exec(
-        `return WPP.chat.deleteMessage('${chatId}', '${id}', true, true);`,
+        `return WPP.chat.deleteMessage('${chatId}', ${JSON.stringify(id)}, true, true);`,
       );
       refetch();
     } catch (err) {
@@ -192,6 +212,44 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
       className={`flex min-w-0 h-full flex-1 flex-col bg-muted ${chatId ? "flex" : "hidden md:flex"}`}
     >
       <header className="flex items-center justify-between border-b border-border bg-card px-4 py-3 sm:px-6">
+        {selectedIds?.size ? (
+          <div className="flex items-center gap-3 w-full">
+            <button
+              aria-label="Cancel selection"
+              onClick={() => setSelectedIds(null)}
+              className="grid size-10 place-items-center rounded-full text-muted-foreground hover:bg-muted cursor-pointer -ml-2"
+            >
+              <XIcon size={19} />
+            </button>
+            <p className="text-sm font-medium truncate">{`${selectedIds.size} selected`}</p>
+            <div className="flex-1" />
+
+            <Button
+              variant="ghost"
+              size="icon-lg"
+              className="rounded-full"
+              title="Forward"
+              onClick={() => {
+                forwardDlg.onOpen({ messageIds: [...selectedIds] });
+                setSelectedIds(null);
+              }}
+            >
+              <CornerUpRightIcon />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-lg"
+              className="rounded-full"
+              title="Delete"
+              onClick={() => {
+                onDeleteMsg([...selectedIds]);
+                setSelectedIds(null);
+              }}
+            >
+              <Trash2Icon />
+            </Button>
+          </div>
+        ) : (
           <div className="flex min-w-0 items-center gap-3 w-full">
             <button
               aria-label="Back to conversations"
@@ -203,7 +261,7 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
 
             <Avatar
               name={chat?.formattedTitle || chat?.name}
-            className="size-10"
+              className="size-10 -ml-2"
             />
 
             <div className="min-w-0 flex-1 truncate">
@@ -224,31 +282,12 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
               onValueChange={setSearch}
             />
           </div>
-        {/* <div className="flex items-center gap-1 text-muted-foreground">
+        )}
-          <button
-            aria-label="Start video call"
-            className="grid size-9 place-items-center rounded-full hover:bg-muted"
-          >
-            <VideoIcon size={18} />
-          </button>
-          <button
-            aria-label="Start voice call"
-            className="grid size-9 place-items-center rounded-full hover:bg-muted"
-          >
-            <Phone size={18} />
-          </button>
-          <button
-            aria-label="Chat details"
-            className="grid size-9 place-items-center rounded-full hover:bg-muted"
-          >
-            <EllipsisVertical size={18} />
-          </button>
-        </div> */}
       </header>
 
       <div
         ref={msgContainerRef}
-        className="message-pattern flex-1 px-4 py-6 sm:px-8 flex flex-col-reverse overflow-y-auto"
+        className="message-pattern flex-1 py-6 flex flex-col-reverse overflow-y-auto"
       >
         {/* <div className="mb-6 flex items-center justify-center gap-2 text-[11px] text-muted-foreground">
             <span className="h-px flex-1 bg-border" />
@@ -261,9 +300,20 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
             id={item.id.replace(/^(?:false_|true_)/, "")}
             key={`${item.timestamp}-${index}`}
             className={cn(
-              "mb-3 flex",
+              "flex px-4 sm:px-8 py-1.5",
               item.fromMe ? "justify-end" : "justify-start",
+              selectedIds != null && "cursor-pointer hover:bg-[#26855c]/10",
+              selectedIds?.has(item.id) && "bg-[#26855c]/30!",
             )}
+            role={selectedIds != null ? "button" : undefined}
+            onClick={
+              selectedIds != null
+                ? (e) => {
+                    if (e.target !== e.currentTarget) return;
+                    onSelectMsg(item.id);
+                  }
+                : undefined
+            }
           >
             <div className="max-w-[82%] sm:max-w-[65%]">
               <a
@@ -280,7 +330,7 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
               </a>
               <div
                 className={cn(
-                  "rounded-2xl px-4 py-2.5 text-sm shadow-sm relative group",
+                  "rounded-2xl px-4 py-2.5 text-sm shadow-sm relative group rounded-tr-md",
                   item.fromMe
                     ? "rounded-br-md bg-[#d8f5e8] dark:bg-[#26855c] text-foreground"
                     : "rounded-bl-md bg-card text-card-foreground",
@@ -290,15 +340,28 @@ export default function MessagesSection({ chatId, maxCount = 20 }: Props) {
                   <DropdownMenuTrigger
                     render={
                       <Button
-                        variant="default"
+                        variant="ghost"
                         size="icon-sm"
-                        className="absolute top-1 right-1 z-1 rounded-full opacity-0 group-hover:opacity-100"
+                        className="absolute top-0 right-0 z-1 md:opacity-0 group-hover:opacity-100"
                       />
                     }
                   >
                     <ChevronDown />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => onSelectMsg(item.id)}>
+                      <MousePointer2Icon />
+                      Select
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() =>
+                        forwardDlg.onOpen({ messageIds: [item.id] })
+                      }
+                    >
+                      <CornerUpRightIcon />
+                      Forward
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
                     <DropdownMenuItem onClick={() => onDeleteMsg(item.id)}>
                       <Trash2Icon />
                       Delete

ui/src/app/page.tsx

@@ -3,6 +3,7 @@ import DevicesSection from "./devices";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { useHashRouter } from "@/hooks/useHashRouter";
 import MessagesSection from "./messages";
+import ForwardDialog from "@/components/forward-dialog";
 
 export default function Page() {
   const router = useHashRouter();
@@ -75,6 +76,8 @@ export default function Page() {
 
       {chatId ? <MessagesSection chatId={chatId} /> : null}
       {/* </div> */}
+
+      <ForwardDialog />
     </main>
   );
 }

ui/src/app/stores.ts

@@ -0,0 +1,5 @@
+import { createDisclosure } from "@/lib/utils";
+
+export const forwardDlg = createDisclosure<{
+  messageIds: string[];
+}>();

ui/src/components/forward-dialog.tsx

@@ -0,0 +1,100 @@
+import { forwardDlg } from "@/app/stores";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "./ui/button";
+import { useChats } from "@/hooks/useChats";
+import Select, { type Option } from "@/components/ui/react-select";
+import { useEffect, useMemo, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useWAClient } from "@/app/context";
+import { Loader2Icon } from "lucide-react";
+
+export default function ForwardDialog() {
+  const { data, isOpen } = forwardDlg.useStore();
+  const { client } = useWAClient();
+  const { data: chats } = useChats();
+
+  const [selectedChat, setSelectedChat] = useState<Option[]>([]);
+  const fwd = useMutation({
+    mutationFn: async (payload: { chatIds: string[]; msgIds: string[] }) => {
+      const { chatIds, msgIds } = payload;
+      for (const chatId of chatIds) {
+        await client.exec(
+          `return WPP.chat.forwardMessages('${chatId}', ${JSON.stringify(msgIds)});`,
+        );
+      }
+    },
+    onSuccess() {
+      alert("Message forwarded!");
+      forwardDlg.onClose();
+    },
+    onError(err) {
+      alert(err.message);
+    },
+  });
+
+  useEffect(() => {
+    if (isOpen) setSelectedChat([]);
+  }, [isOpen]);
+
+  const chatOptions = useMemo(() => {
+    return (chats || []).map((chat) => ({
+      value: chat.id,
+      label: chat.formattedTitle || chat.name,
+    }));
+  }, [chats]);
+
+  function onSubmit() {
+    if (
+      fwd.isPending ||
+      !data?.messageIds?.length ||
+      !window.confirm("Send message?")
+    )
+      return;
+
+    fwd.mutate({
+      chatIds: selectedChat.map((i) => i.value),
+      msgIds: data!.messageIds,
+    });
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={forwardDlg.onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Forward Messages</DialogTitle>
+          <DialogDescription>
+            {data?.messageIds.length} messages
+          </DialogDescription>
+        </DialogHeader>
+
+        <div>
+          <Select
+            options={chatOptions}
+            isMulti
+            value={selectedChat}
+            onChange={(i) => setSelectedChat(i as never)}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline">Cancel</Button>} />
+          <Button
+            onClick={onSubmit}
+            disabled={!selectedChat.length || fwd.isPending}
+          >
+            {fwd.isPending && <Loader2Icon className="mr-2 animate-spin" />}
+            Send Message
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

ui/src/components/ui/dialog.tsx

@@ -0,0 +1,154 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "cn";
+
+import { Button } from "@/components/ui/button";
+import { XIcon } from "lucide-react";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("leading-none font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

ui/src/components/ui/react-select.tsx

@@ -0,0 +1,251 @@
+import BaseSelect, {
+  components,
+  type ControlProps,
+  type MultiValueProps,
+  type OptionProps,
+  type SingleValueProps,
+  type StylesConfig,
+} from "react-select";
+
+export type Option = {
+  value: string;
+  label: string;
+};
+
+// ─────────────────────────────────────────────
+// Custom Control
+// ─────────────────────────────────────────────
+
+function CustomControl(props: ControlProps<Option, true>) {
+  return <components.Control {...props}>{props.children}</components.Control>;
+}
+
+// ─────────────────────────────────────────────
+// Custom Option
+// ─────────────────────────────────────────────
+
+function CustomOption(props: OptionProps<Option, true>) {
+  return (
+    <components.Option {...props}>
+      <div className="flex items-center justify-between">
+        <span>{props.data.label}</span>
+
+        {props.isSelected && <span className="text-zinc-300">✓</span>}
+      </div>
+    </components.Option>
+  );
+}
+
+// ─────────────────────────────────────────────
+// Custom Single Value
+// ─────────────────────────────────────────────
+
+function CustomSingleValue(props: SingleValueProps<Option>) {
+  return (
+    <components.SingleValue {...props}>
+      <div className="flex items-center gap-2">
+        <span className="h-2 w-2 rounded-full bg-indigo-400" />
+        {props.data.label}
+      </div>
+    </components.SingleValue>
+  );
+}
+
+// ─────────────────────────────────────────────
+// Custom Multi Value
+// ─────────────────────────────────────────────
+
+function CustomMultiValue(props: MultiValueProps<Option, true>) {
+  return (
+    <components.MultiValue {...props}>
+      <span>{props.data.label}</span>
+    </components.MultiValue>
+  );
+}
+
+// ─────────────────────────────────────────────
+// Shadcn-inspired dark styles
+// ─────────────────────────────────────────────
+
+const darkStyles: StylesConfig<Option, true> = {
+  control: (base, state) => ({
+    ...base,
+
+    minHeight: 40,
+    backgroundColor: "#09090b",
+    borderColor: state.isFocused ? "#71717a" : "#27272a",
+    borderRadius: 6,
+
+    boxShadow: state.isFocused ? "0 0 0 1px #71717a" : "none",
+
+    cursor: "pointer",
+
+    "&:hover": {
+      borderColor: "#3f3f46",
+    },
+  }),
+
+  valueContainer: (base) => ({
+    ...base,
+    padding: "3px 8px",
+    gap: 4,
+  }),
+
+  input: (base) => ({
+    ...base,
+    color: "#fafafa",
+    margin: 0,
+    padding: 0,
+  }),
+
+  placeholder: (base) => ({
+    ...base,
+    color: "#71717a",
+  }),
+
+  singleValue: (base) => ({
+    ...base,
+    color: "#fafafa",
+  }),
+
+  // ───────────────────────────────────────────
+  // Menu
+  // ───────────────────────────────────────────
+
+  menu: (base) => ({
+    ...base,
+    marginTop: 4,
+    backgroundColor: "#09090b",
+    border: "1px solid #27272a",
+    borderRadius: 6,
+    overflow: "hidden",
+
+    boxShadow:
+      "0 10px 15px -3px rgb(0 0 0 / 0.3), " + "0 4px 6px -4px rgb(0 0 0 / 0.3)",
+  }),
+
+  menuList: (base) => ({
+    ...base,
+    padding: 4,
+  }),
+
+  // ───────────────────────────────────────────
+  // Options
+  // ───────────────────────────────────────────
+
+  option: (base, state) => ({
+    ...base,
+
+    borderRadius: 4,
+    padding: "7px 8px",
+
+    backgroundColor: state.isSelected
+      ? "#27272a"
+      : state.isFocused
+        ? "#18181b"
+        : "transparent",
+
+    color: state.isDisabled ? "#52525b" : "#fafafa",
+
+    cursor: state.isDisabled ? "not-allowed" : "pointer",
+
+    "&:active": {
+      backgroundColor: "#27272a",
+    },
+  }),
+
+  // ───────────────────────────────────────────
+  // Multi value
+  // ───────────────────────────────────────────
+
+  multiValue: (base) => ({
+    ...base,
+
+    backgroundColor: "#27272a",
+    borderRadius: 4,
+  }),
+
+  multiValueLabel: (base) => ({
+    ...base,
+
+    color: "#e4e4e7",
+    padding: "2px 6px",
+  }),
+
+  multiValueRemove: (base) => ({
+    ...base,
+
+    color: "#a1a1aa",
+    borderRadius: "0 4px 4px 0",
+
+    "&:hover": {
+      backgroundColor: "#3f3f46",
+      color: "#fafafa",
+    },
+  }),
+
+  // ───────────────────────────────────────────
+  // Indicators
+  // ───────────────────────────────────────────
+
+  indicatorSeparator: () => ({
+    display: "none",
+  }),
+
+  dropdownIndicator: (base) => ({
+    ...base,
+
+    color: "#71717a",
+    padding: "0 8px",
+
+    "&:hover": {
+      color: "#a1a1aa",
+    },
+  }),
+
+  clearIndicator: (base) => ({
+    ...base,
+
+    color: "#71717a",
+
+    "&:hover": {
+      color: "#fafafa",
+    },
+  }),
+
+  // ───────────────────────────────────────────
+  // Messages
+  // ───────────────────────────────────────────
+
+  noOptionsMessage: (base) => ({
+    ...base,
+    color: "#71717a",
+  }),
+
+  loadingMessage: (base) => ({
+    ...base,
+    color: "#71717a",
+  }),
+};
+// ─────────────────────────────────────────────
+// Select
+// ─────────────────────────────────────────────
+
+type Props = React.ComponentProps<typeof BaseSelect>;
+
+function Select({ ...props }: Props) {
+  return (
+    <BaseSelect
+      styles={darkStyles}
+      components={{
+        Control: CustomControl,
+        Option: CustomOption,
+        SingleValue: CustomSingleValue,
+        MultiValue: CustomMultiValue,
+      }}
+      {...(props as any)}
+    />
+  );
+}
+
+export default Select;

ui/src/lib/utils.ts

@@ -1,5 +1,5 @@
 import type { ContactDTO, MessageIdDTO, SerializedId } from "@shared/dto";
-
+import { createStore, useStore } from "zustand";
 export { cn } from "cn";
 
 export function getId(id?: string | SerializedId | MessageIdDTO | null) {
@@ -45,3 +45,17 @@ export async function getFilesAsBase64(files: File[]) {
     }),
   );
 }
+
+export function createDisclosure<T = any>(data?: T | null) {
+  const store = createStore(() => ({
+    isOpen: false,
+    data,
+  }));
+
+  return Object.assign(store, {
+    onOpen: (data?: T | null) => store.setState({ isOpen: true, data }),
+    onClose: () => store.setState({ isOpen: false }),
+    onOpenChange: (open: boolean) => store.setState({ isOpen: open }),
+    useStore: () => useStore(store),
+  });
+}