@xmanrui/dsh-im 0.1.0 → 0.2.0

package/plugin-src/client/channels/whatsapp/index.js

@@ -0,0 +1,433 @@
+import * as React from 'react';
+
+import { WhatsappLogoGlyph } from '../../channel-logos.js';
+import { QrActionIcon } from '../../credential-binding.js';
+import { installDingtalkStyles } from '../dingtalk/styles.js';
+import {
+  WHATSAPP_ENDPOINTS,
+  formatRemaining,
+  normalizeProvisioning,
+  normalizeSnapshot,
+  presentError,
+  safeQrSource,
+  unwrapRpcResult,
+} from './api.js';
+import { installWhatsappStyles } from './styles.js';
+
+const h = React.createElement;
+const ACTIVE_STATES = new Set(['pending', 'connecting']);
+
+const Button = React.forwardRef(function Button(
+  { children, kind = 'secondary', className = '', ...props },
+  ref,
+) {
+  return h('button', {
+    ...props,
+    ref,
+    type: 'button',
+    className: `ddt-button ${className}`.trim(),
+    'data-kind': kind,
+  }, children);
+});
+
+function checkedTime(value) {
+  if (!value) return '尚未检查';
+  try {
+    return new Intl.DateTimeFormat('zh-CN', {
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+    }).format(new Date(value));
+  } catch {
+    return '刚刚';
+  }
+}
+
+function Heading({ totals, busy, onAdd, addButtonRef }) {
+  return h('div', { className: 'ddt-heading' },
+    h('div', { className: 'ddt-tools' },
+      h('div', { className: 'dim-bindActions' },
+        h(Button, {
+          kind: 'primary',
+          className: 'dim-scanButton',
+          onClick: onAdd,
+          disabled: busy,
+          ref: addButtonRef,
+          'aria-label': '扫码接入 WhatsApp 机器人',
+        }, h(QrActionIcon), busy ? '正在接入' : '扫码接入机器人')),
+      totals.configured > 0
+        ? h('div', { className: 'ddt-badge dim-onlineBadge' },
+            h('span', null, `${totals.connected} / ${totals.configured} 在线`))
+        : null));
+}
+
+function LoadingView() {
+  return h('div', {
+    className: 'ddt-card ddt-loading dim-surfaceCard dim-loadingView',
+    'aria-busy': 'true',
+  }, h('div', { className: 'ddt-spinner dim-spinner' }), '正在读取 WhatsApp 机器人状态…');
+}
+
+export function EmptyView({ busy, onStart }) {
+  return h('div', { className: 'ddt-card dim-surfaceCard' },
+    h('div', { className: 'ddt-cardBody ddt-empty dim-surfaceBody dim-emptyView' },
+      h('div', { className: 'dim-emptyCopy' },
+        h('div', { className: 'ddt-stateLabel dim-stateLabel' },
+          h('span', { className: 'ddt-dot dim-stateDot' }),
+          h('span', null, '尚未接入 WhatsApp 机器人')),
+        h('h3', null, '扫码绑定 WhatsApp 机器人'),
+        h('p', null, '使用手机 WhatsApp 扫描二维码即可接入。'),
+        h('div', { className: 'ddt-actions dim-viewActions' },
+          h(Button, { kind: 'primary', onClick: onStart, disabled: busy },
+            busy ? '正在生成二维码…' : '生成二维码'))),
+      h('div', {
+        className: 'ddt-brandMark dim-emptyBrand dwa-avatar',
+        'aria-hidden': 'true',
+      }, h(WhatsappLogoGlyph, { size: 64 }))));
+}
+
+export function QrPanel({ provision, now, busy, onRefresh, onCancel }) {
+  const source = safeQrSource(provision.qrCodeDataUrl);
+  const remaining = Math.max(0, provision.expiresAt - now);
+  const duration = Math.max(1, provision.durationMs ?? 60_000);
+  const progress = Math.round(Math.min(1, remaining / duration) * 100);
+  return h('div', { className: 'ddt-card dim-surfaceCard' },
+    h('div', { className: 'ddt-cardBody ddt-qrLayout dim-surfaceBody dim-qrLayout' },
+      h('div', { className: 'ddt-qrColumn dim-qrColumn' },
+        h('div', { className: 'ddt-qrFrame dim-qrFrame' },
+          source ? h('img', {
+            src: source,
+            alt: '用于关联 WhatsApp 设备的一次性二维码',
+          }) : h('div', { className: 'ddt-qrFallback dim-qrFallback' }, '二维码正在生成…')),
+        h('div', { className: 'ddt-countdown dim-countdown' },
+          h('div', { className: 'ddt-countdownTop dim-countdownTop' },
+            h('span', null, '当前二维码有效时间'),
+            h('strong', null, formatRemaining(remaining))),
+          h('div', {
+            className: 'ddt-progress dim-progress',
+            style: { '--ddt-progress': `${progress}%` },
+          }, h('span')))),
+      h('div', { className: 'ddt-qrCopy dim-qrCopy' },
+        h('div', { className: 'ddt-stateLabel dim-stateLabel' },
+          h('span', { className: 'ddt-dot dim-stateDot', 'data-tone': 'warning' }),
+          h('span', null, '等待 WhatsApp 扫码')),
+        h('h3', null, '用手机 WhatsApp 扫描二维码'),
+        h('ol', { className: 'ddt-steps dim-steps' },
+          h('li', null, '打开 WhatsApp → 设置 → 已关联设备'),
+          h('li', null, '点击“关联设备”并扫描左侧二维码')),
+        h('div', { className: 'ddt-actions dim-viewActions' },
+          h(Button, { onClick: onRefresh, disabled: busy }, '重新生成二维码'),
+          h(Button, { kind: 'quiet', onClick: onCancel, disabled: busy }, '取消')))));
+}
+
+export function ProvisionView({ provision, busy, onRetry, onClose }) {
+  if (provision.status === 'starting' || provision.status === 'connecting') {
+    const starting = provision.status === 'starting';
+    return h('div', {
+      className: 'ddt-card ddt-loading dim-surfaceCard dim-specialView',
+      'aria-busy': 'true',
+    }, h('div', { className: 'ddt-spinner dim-spinner' }),
+    h('h3', null, starting ? '正在生成 WhatsApp 二维码' : '已扫码，正在连接 WhatsApp'),
+    h('p', null, starting
+      ? '正在建立安全的关联设备会话。'
+      : '关联设备正在接入 DeepSeek Harness。'));
+  }
+  const error = provision.error ?? {
+    code: 'WHATSAPP_PROVISION_FAILED',
+    message: 'WhatsApp 没有接入完成',
+  };
+  return h('div', { className: 'ddt-card dim-surfaceCard' },
+    h('div', { className: 'ddt-inlineError dim-inlineError', role: 'alert' },
+      h('h3', null, 'WhatsApp 没有接入完成'),
+      h('p', null, error.message),
+      h('span', { className: 'ddt-errorCode' }, error.code),
+      h('div', { className: 'ddt-actions dim-viewActions' },
+        h(Button, { kind: 'primary', onClick: onRetry, disabled: busy }, '重新生成二维码'),
+        h(Button, { onClick: onClose, disabled: busy }, '关闭'))));
+}
+
+function RemoveConfirmation({ account, busy, onConfirm, onCancel }) {
+  return h('div', { className: 'ddt-confirm dim-confirm', role: 'alertdialog' },
+    h('strong', null, `从 DeepSeek Harness 移除“${account.bot.name}”？`),
+    h('p', null, '这会停止消息连接，并删除本机保存的 WhatsApp 关联设备和会话映射。'),
+    h('div', { className: 'ddt-actions dim-viewActions' },
+      h(Button, { onClick: onCancel, disabled: busy }, '保留机器人'),
+      h(Button, { kind: 'danger', onClick: onConfirm, disabled: busy },
+        busy ? '正在移除…' : '确认移除接入')));
+}
+
+export function WhatsappAccountCard({
+  account,
+  busy,
+  removing,
+  onReconnect,
+  onRequestRemove,
+  onConfirmRemove,
+  onCancelRemove,
+}) {
+  const state = busy === 'reconnect' ? 'connecting' : account.state;
+  const tone = account.connected ? 'success' : state === 'error' ? 'error' : 'warning';
+  const stateLabel = account.connected ? '运行正常' : state === 'connecting' ? '正在连接' : '连接未就绪';
+  const summary = account.error?.message ?? (account.connected ? null : account.health.summary);
+  return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
+    h('div', { className: 'ddt-cardBody dim-botCardBody' },
+      h('div', { className: 'ddt-accountTop dim-botCardTop' },
+        h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
+          h('div', {
+            className: 'ddt-avatar dim-botAvatar dwa-avatar',
+            'aria-hidden': 'true',
+          }, h(WhatsappLogoGlyph, { size: 29 })),
+          h('div', { className: 'dim-botName' },
+            h('h3', null, account.bot.name), h('p', null, account.bot.idMasked))),
+        h('div', { className: 'ddt-health dim-botHealth' },
+          h('span', { className: 'ddt-dot dim-healthDot', 'data-tone': tone }),
+          h('span', null, stateLabel))),
+      h('dl', { className: 'ddt-metrics dim-botMetrics' },
+        h('div', { className: 'ddt-metric dim-botMetric' },
+          h('dt', null, '消息通道'),
+          h('dd', null, account.connected ? 'WhatsApp Web' : '离线')),
+        h('div', { className: 'ddt-metric dim-botMetric' },
+          h('dt', null, '最近检查'), h('dd', null, checkedTime(account.health.lastCheckedAt)))),
+      h('div', { className: 'ddt-accountFooter dim-cardFooter' },
+        summary ? h('div', { className: 'ddt-summary dim-cardSummary' }, summary) : null,
+        h('div', { className: 'ddt-actions dim-cardActions' },
+          h(Button, {
+            className: 'dim-cardAction', onClick: onReconnect, disabled: Boolean(busy),
+          }, busy === 'reconnect' ? '检查中…' : account.connected ? '检查连接' : '重试连接'),
+          h(Button, {
+            className: 'dim-cardAction', kind: 'danger', onClick: onRequestRemove, disabled: Boolean(busy),
+          }, '移除接入')))),
+    removing ? h(RemoveConfirmation, {
+      account,
+      busy: busy === 'delete',
+      onConfirm: onConfirmRemove,
+      onCancel: onCancelRemove,
+    }) : null);
+}
+
+export function WhatsappSettingsTab({ rpcCall }) {
+  const [model, setModel] = React.useState({
+    phase: 'loading', bots: [], totals: { configured: 0, connected: 0 }, error: null,
+  });
+  const [provision, setProvision] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [busyByBot, setBusyByBot] = React.useState({});
+  const [removeTarget, setRemoveTarget] = React.useState(null);
+  const [now, setNow] = React.useState(Date.now());
+  const mounted = React.useRef(true);
+  const addButtonRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const disposeDingtalk = installDingtalkStyles();
+    const disposeWhatsapp = installWhatsappStyles();
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      disposeWhatsapp();
+      disposeDingtalk();
+    };
+  }, []);
+
+  const invoke = React.useCallback(async (endpoint, payload = {}, signal) => {
+    if (typeof rpcCall !== 'function') throw new TypeError('WhatsApp 设置页缺少 RPC 连接');
+    return unwrapRpcResult(await rpcCall(endpoint, payload, signal));
+  }, [rpcCall]);
+
+  const loadStatus = React.useCallback(async ({ signal, silent = false, restore = false } = {}) => {
+    if (!silent && mounted.current) setModel((current) => ({ ...current, phase: 'loading', error: null }));
+    try {
+      const snapshot = normalizeSnapshot(await invoke(WHATSAPP_ENDPOINTS.status, {}, signal));
+      if (!mounted.current || signal?.aborted) return undefined;
+      setModel({ phase: 'ready', bots: snapshot.bots, totals: snapshot.totals, error: null });
+      if (restore && snapshot.provisioning) setProvision({
+        ...snapshot.provisioning,
+        durationMs: Math.max(1, snapshot.provisioning.expiresAt - Date.now()),
+      });
+      return snapshot;
+    } catch (error) {
+      if (error?.name !== 'AbortError' && mounted.current && !signal?.aborted) {
+        setModel((current) => ({
+          ...current,
+          phase: silent ? current.phase : 'error',
+          error: presentError(error),
+        }));
+      }
+      return undefined;
+    }
+  }, [invoke]);
+
+  React.useEffect(() => {
+    const controller = new AbortController();
+    void loadStatus({ signal: controller.signal, restore: true });
+    return () => controller.abort();
+  }, [loadStatus]);
+
+  React.useEffect(() => {
+    if (model.phase !== 'ready') return undefined;
+    const controller = new AbortController();
+    const timer = window.setInterval(
+      () => void loadStatus({ signal: controller.signal, silent: true }),
+      15_000,
+    );
+    return () => { controller.abort(); window.clearInterval(timer); };
+  }, [loadStatus, model.phase]);
+
+  React.useEffect(() => {
+    if (!provision || !ACTIVE_STATES.has(provision.status)) return undefined;
+    const timer = window.setInterval(() => mounted.current && setNow(Date.now()), 1_000);
+    return () => window.clearInterval(timer);
+  }, [provision?.attemptId, provision?.status]);
+
+  const startProvisioning = React.useCallback(async (replace = false) => {
+    setBusy(true);
+    try {
+      if (replace && provision?.attemptId) {
+        await invoke(WHATSAPP_ENDPOINTS.cancelProvisioning, { attemptId: provision.attemptId });
+      }
+      if (!mounted.current) return;
+      setProvision({ status: 'starting' });
+      const started = normalizeProvisioning(await invoke(WHATSAPP_ENDPOINTS.beginProvisioning, {}));
+      if (!mounted.current) return;
+      setNow(Date.now());
+      setProvision({ ...started, durationMs: Math.max(1, started.expiresAt - Date.now()) });
+    } catch (error) {
+      if (mounted.current) setProvision({ status: 'failed', error: presentError(error) });
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [invoke, provision?.attemptId]);
+
+  const closeProvision = React.useCallback(async () => {
+    setBusy(true);
+    try {
+      if (provision?.attemptId && ACTIVE_STATES.has(provision.status)) {
+        await invoke(WHATSAPP_ENDPOINTS.cancelProvisioning, { attemptId: provision.attemptId });
+      }
+      if (mounted.current) setProvision(null);
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [invoke, provision?.attemptId, provision?.status]);
+
+  React.useEffect(() => {
+    const attemptId = provision?.attemptId;
+    if (!attemptId || !ACTIVE_STATES.has(provision.status)) return undefined;
+    const controller = new AbortController();
+    let disposed = false;
+    let timer;
+    const schedule = (delay) => {
+      if (disposed || controller.signal.aborted) return;
+      timer = window.setTimeout(() => void poll(), delay);
+    };
+    const poll = async () => {
+      try {
+        const current = normalizeProvisioning(await invoke(
+          WHATSAPP_ENDPOINTS.pollProvisioning,
+          { attemptId },
+          controller.signal,
+        ));
+        if (disposed || controller.signal.aborted || !mounted.current) return;
+        if (current.status === 'connected') {
+          setProvision(null);
+          await loadStatus({ signal: controller.signal, silent: true });
+          return;
+        }
+        setProvision((previous) => ({
+          ...current,
+          durationMs: previous?.durationMs ?? Math.max(1, current.expiresAt - Date.now()),
+        }));
+        if (ACTIVE_STATES.has(current.status)) schedule(current.pollIntervalMs);
+      } catch (error) {
+        if (!disposed && !controller.signal.aborted && mounted.current) {
+          setProvision({ status: 'failed', error: presentError(error) });
+        }
+      }
+    };
+    schedule(provision.pollIntervalMs ?? 1_000);
+    return () => {
+      disposed = true;
+      controller.abort();
+      if (timer) window.clearTimeout(timer);
+    };
+  }, [invoke, loadStatus, provision?.attemptId, provision?.status]);
+
+  const botAction = React.useCallback(async (account, operation, endpoint, payload) => {
+    setBusyByBot((current) => ({ ...current, [account.botId]: operation }));
+    try {
+      const snapshot = normalizeSnapshot(await invoke(endpoint, payload));
+      if (mounted.current) {
+        setModel({ phase: 'ready', bots: snapshot.bots, totals: snapshot.totals, error: null });
+      }
+    } finally {
+      if (mounted.current) setBusyByBot((current) => {
+        const next = { ...current };
+        delete next[account.botId];
+        return next;
+      });
+    }
+  }, [invoke]);
+
+  const botList = model.bots.length > 0
+    ? h('section', { className: 'dim-listSection' },
+        h('div', { className: 'ddt-listHeading dim-listHeading' },
+          h('h3', null, '已接入的 WhatsApp 机器人')),
+        h('ul', { className: 'ddt-list dim-botList' }, model.bots.map((account) =>
+          h('li', { key: account.botId }, h(WhatsappAccountCard, {
+            account,
+            busy: busyByBot[account.botId],
+            removing: removeTarget === account.botId,
+            onReconnect: () => void botAction(
+              account,
+              'reconnect',
+              WHATSAPP_ENDPOINTS.reconnectBot,
+              { botId: account.botId },
+            ),
+            onRequestRemove: () => setRemoveTarget(account.botId),
+            onCancelRemove: () => setRemoveTarget(null),
+            onConfirmRemove: async () => {
+              await botAction(account, 'delete', WHATSAPP_ENDPOINTS.deleteBot, {
+                botId: account.botId,
+                confirm: true,
+              });
+              if (mounted.current) setRemoveTarget(null);
+            },
+          })))))
+    : null;
+
+  return h('section', {
+    className: 'ddt-page dwa-page dim-channelPage',
+    'aria-label': 'WhatsApp 设置',
+  },
+  h(Heading, {
+    totals: model.totals,
+    busy,
+    onAdd: () => void startProvisioning(false),
+    addButtonRef,
+  }),
+  model.phase === 'loading'
+    ? h(LoadingView)
+    : model.phase === 'error'
+      ? h('div', { className: 'ddt-card dim-surfaceCard' },
+          h('div', { className: 'ddt-inlineError dim-inlineError' },
+            h('h3', null, '无法读取 WhatsApp 机器人状态'),
+            h('p', null, model.error?.message),
+            h(Button, { onClick: () => void loadStatus() }, '重新读取')))
+      : h(React.Fragment, null,
+          provision?.status === 'pending'
+            ? h(QrPanel, {
+                provision,
+                now,
+                busy,
+                onRefresh: () => void startProvisioning(true),
+                onCancel: () => void closeProvision(),
+              })
+            : provision
+              ? h(ProvisionView, {
+                  provision,
+                  busy,
+                  onRetry: () => void startProvisioning(true),
+                  onClose: () => void closeProvision(),
+                })
+              : model.bots.length === 0
+                ? h(EmptyView, { busy, onStart: () => void startProvisioning(false) })
+                : null,
+          botList));
+}

package/plugin-src/client/channels/whatsapp/styles.js

@@ -0,0 +1,19 @@
+export const WHATSAPP_STYLE_ID = 'xmanrui-dsh-im-whatsapp-settings';
+
+const CSS = String.raw`
+.dwa-page { --ddt-accent: #25d366; --ddt-accent-deep: #128c7e; --ddt-accent-wash: #eafbf0; }
+.dwa-avatar { color: #fff; background: #25d366; }
+.dwa-avatar svg { display: block; }
+`;
+
+export function installWhatsappStyles() {
+  if (typeof document === 'undefined') return () => {};
+  const existing = document.querySelector(`style[data-plugin-css="${WHATSAPP_STYLE_ID}"]`);
+  if (existing) return () => {};
+  const style = document.createElement('style');
+  style.dataset.plugin = '@xmanrui/dsh-im';
+  style.dataset.pluginCss = WHATSAPP_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  return () => style.remove();
+}

package/plugin-src/client/index.js

@@ -8,6 +8,7 @@ import {
   TelegramLogoGlyph,
   WecomLogoGlyph,
   WeixinLogoGlyph,
+  WhatsappLogoGlyph,
 } from './channel-logos.js';
 import { DINGTALK_RPC_CHANNEL } from './channels/dingtalk/api.js';
 import { DingtalkSettingsTab } from './channels/dingtalk/index.js';
@@ -29,6 +30,9 @@ import { installWecomStyles } from './channels/wecom/styles.js';
 import { WeixinSettingsTab } from './channels/weixin/index.js';
 import { WEIXIN_RPC_CHANNEL } from './channels/weixin/api.js';
 import { installWeixinStyles } from './channels/weixin/styles.js';
+import { WHATSAPP_RPC_CHANNEL } from './channels/whatsapp/api.js';
+import { WhatsappSettingsTab } from './channels/whatsapp/index.js';
+import { installWhatsappStyles } from './channels/whatsapp/styles.js';
 import { installImStyles } from './styles.js';
 
 const h = React.createElement;
@@ -44,6 +48,7 @@ const CHANNELS = Object.freeze([
   { id: 'qq', label: 'QQ' },
   { id: 'telegram', label: 'Telegram' },
   { id: 'discord', label: 'Discord' },
+  { id: 'whatsapp', label: 'WhatsApp' },
 ]);
 
 function WeixinLogo() {
@@ -79,6 +84,11 @@ function DiscordLogo() {
     h(DiscordLogoGlyph));
 }
 
+function WhatsappLogo() {
+  return h('span', { className: 'dim-logo dim-logoWhatsapp', 'aria-hidden': 'true' },
+    h(WhatsappLogoGlyph));
+}
+
 function ChannelLogo({ channel }) {
   if (channel === 'weixin') return h(WeixinLogo);
   if (channel === 'feishu') return h(FeishuLogo);
@@ -86,7 +96,8 @@ function ChannelLogo({ channel }) {
   if (channel === 'wecom') return h(WecomLogo);
   if (channel === 'qq') return h(QqLogo);
   if (channel === 'telegram') return h(TelegramLogo);
-  return h(DiscordLogo);
+  if (channel === 'discord') return h(DiscordLogo);
+  return h(WhatsappLogo);
 }
 
 export function IMSettingsTab({
@@ -97,6 +108,7 @@ export function IMSettingsTab({
   telegramRpcCall,
   wecomRpcCall,
   weixinRpcCall,
+  whatsappRpcCall,
 }) {
   const [selected, setSelected] = React.useState('weixin');
   const active = CHANNELS.find((channel) => channel.id === selected) ?? CHANNELS[0];
@@ -138,7 +150,9 @@ export function IMSettingsTab({
                 ? h(QqSettingsTab, { rpcCall: qqRpcCall })
                 : active.id === 'telegram'
                   ? h(TelegramSettingsTab, { rpcCall: telegramRpcCall })
-                  : h(DiscordSettingsTab, { rpcCall: discordRpcCall })),
+                  : active.id === 'discord'
+                    ? h(DiscordSettingsTab, { rpcCall: discordRpcCall })
+                    : h(WhatsappSettingsTab, { rpcCall: whatsappRpcCall })),
     ),
   );
 }
@@ -152,6 +166,7 @@ export function apply(ctx) {
       installQqStyles(),
       installTelegramStyles(),
       installDiscordStyles(),
+      installWhatsappStyles(),
       installImStyles(),
     ];
     return () => {
@@ -173,6 +188,8 @@ export function apply(ctx) {
     ctx.connection.rpc.call(TELEGRAM_RPC_CHANNEL, endpoint, payload, signal);
   const discordRpcCall = (endpoint, payload, signal) =>
     ctx.connection.rpc.call(DISCORD_RPC_CHANNEL, endpoint, payload, signal);
+  const whatsappRpcCall = (endpoint, payload, signal) =>
+    ctx.connection.rpc.call(WHATSAPP_RPC_CHANNEL, endpoint, payload, signal);
 
   ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
     name: 'settings.plugins.tab',
@@ -187,6 +204,7 @@ export function apply(ctx) {
       telegramRpcCall,
       wecomRpcCall,
       weixinRpcCall,
+      whatsappRpcCall,
     }),
   }, IMSettingsTab));
 }

package/plugin-src/client/styles.js

@@ -37,11 +37,13 @@ const CSS = String.raw`
 .dim-logoTelegram svg { width: 21px; height: 21px; }
 .dim-logoDiscord { color: white; background: #5865f2; }
 .dim-logoDiscord svg { width: 21px; height: 21px; }
+.dim-logoWhatsapp { color: white; background: #25d366; }
+.dim-logoWhatsapp svg { width: 21px; height: 21px; }
 .dim-channelCopy { min-width: 0; display: block; }
 .dim-channelCopy strong { overflow: hidden; color: inherit; font-size: 14px; line-height: 20px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
 .dim-divider { width: 1px; min-height: 520px; background: var(--dsw-alias-line-divider, #eef0f3); }
 .dim-panel { min-width: 0; container-type: inline-size; }
-.dim-panel .bxf-page, .dim-panel .dxw-page, .dim-panel .ddt-page, .dim-panel .dqq-page, .dim-panel .dwecom-page { width: 100%; max-width: none; padding: 0 0 24px; }
+.dim-panel .bxf-page, .dim-panel .dxw-page, .dim-panel .ddt-page, .dim-panel .dqq-page, .dim-panel .dwecom-page, .dim-panel .dwa-page { width: 100%; max-width: none; padding: 0 0 24px; }
 .dim-panel .bxf-heading, .dim-panel .dxw-heading, .dim-panel .ddt-heading { justify-content: flex-end; }
 .dim-panel .bxf-headingTools, .dim-panel .dxw-tools, .dim-panel .ddt-tools { width: 100%; justify-content: space-between; }
 .dim-panel .dim-bindActions { min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }

package/plugin-src/host/build.mjs

@@ -7,6 +7,14 @@ import { build } from 'esbuild';
 const sourceDirectory = dirname(fileURLToPath(import.meta.url));
 const packageRoot = resolve(sourceDirectory, '../..');
 const outputPath = resolve(packageRoot, 'lib/index.js');
+const externalRuntimePackages = [
+  '@tencent-connect/qqbot-connector',
+  '@tencent-connect/qqbot-nodejs',
+  '@wecom/aibot-node-sdk',
+  'dingtalk-stream',
+  'qrcode',
+];
+const external = externalRuntimePackages.flatMap((name) => [name, `${name}/*`]);
 
 await mkdir(dirname(outputPath), { recursive: true });
 await build({
@@ -15,10 +23,22 @@ await build({
   format: 'esm',
   platform: 'node',
   target: ['node22'],
-  packages: 'external',
+  mainFields: ['module', 'main'],
+  external,
   outfile: outputPath,
+  banner: {
+    js: [
+      "import { createRequire as __dshCreateRequire } from 'node:module';",
+      "import { dirname as __dshDirname } from 'node:path';",
+      "import { fileURLToPath as __dshFileURLToPath } from 'node:url';",
+      'const require = __dshCreateRequire(import.meta.url);',
+      'const __filename = __dshFileURLToPath(import.meta.url);',
+      'const __dirname = __dshDirname(__filename);',
+    ].join('\n'),
+  },
   sourcemap: false,
-  legalComments: 'none',
+  minify: true,
+  legalComments: 'eof',
 });
 
 console.log(`Wrote ${outputPath}`);

package/plugin-src/host/channels/whatsapp/index.mjs

@@ -0,0 +1,35 @@
+import { createProductionController } from './production.mjs';
+import { installWhatsappRpc } from './rpc.mjs';
+
+export const name = 'dsh-im-whatsapp-host';
+export const inject = ['connection', 'webServer'];
+
+export async function apply(ctx, config = {}) {
+  if (config?.controller) {
+    return installWhatsappRpc(ctx, config.controller, config.rpcOptions, config.rpcAuthority);
+  }
+  const production = await createProductionController(ctx, config, config.internals ?? {});
+  const disposeRpc = installWhatsappRpc(
+    ctx,
+    production.controller,
+    config.rpcOptions,
+    config.rpcAuthority,
+  );
+  ctx.effect(() => async () => production.close(), 'dsh-im: close WhatsApp Web connections');
+  return disposeRpc;
+}
+
+export function createWhatsappHostPlugin(config) {
+  return Object.freeze({ name, inject, apply: (ctx) => apply(ctx, config) });
+}
+
+export { createProductionController } from './production.mjs';
+export {
+  WHATSAPP_ENDPOINTS,
+  WHATSAPP_RPC_CHANNEL,
+  WHATSAPP_RPC_ENDPOINTS,
+  createWhatsappRpcHandler,
+  installWhatsappRpc,
+} from './rpc.mjs';
+export { WhatsappController } from '../../../../src/channels/whatsapp/whatsapp-controller.mjs';
+export { WhatsappRuntime } from '../../../../src/channels/whatsapp/whatsapp-runtime.mjs';