openclaw-openagent 1.0.13 → 1.0.14

package/src/plugin-ui/modules/agent-book/panel/agent-card.js

@@ -1,170 +0,0 @@
-// ── AgentCard 统一组件 ──
-//
-// 用法：AgentCard(agent, { mode, onAction, actionLabel })
-//   mode: 'mention' — 空 @ 默认面板的分类卡片
-//         'search'  — 有搜索词时的旧式搜索结果行
-//         'inline'  — 聊天消息中的内嵌卡片
-//   onAction: 按钮点击回调
-//   actionLabel: 按钮文案（默认 mention='Try', inline='@ Chat'）
-
-function AgentCard(agent, opts = {}) {
-  const { mode = 'inline', onAction, actionLabel } = opts;
-  const card = _el('div', `agent-card agent-card--${mode}`);
-
-  if (mode === 'mention') {
-    // ── Figma 结构：──
-    // Agent item (grid cell)
-    //   └── avart 实例
-    //       └── 第一行 (row)
-    //           ├── 内容组 (avatar 60 + info)
-    //           │   └── 信息列：名称 / 简介 / 统计
-    //           └── @Try 按钮
-
-    // avart 外壳
-    const avart = _el('div', 'agent-card__avart');
-
-    // ── 第一行：内容组 + @Try ──
-    const row1 = _el('div', 'agent-card__row1');
-
-    // 内容组：头像 + 信息列
-    const contentGroup = _el('div', 'agent-card__content-group');
-
-    // 头像
-    const avatar = document.createElement('img');
-    avatar.className = 'agent-card__avatar';
-    avatar.src = avatarUrl(agent);
-    avatar.alt = agent.name || '';
-    avatar.addEventListener('error', () => {
-      avatar.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=6366f1&color=fff&size=112`;
-    }, { once: true });
-    contentGroup.appendChild(avatar);
-
-    // 信息列：名称 + 简介
-    const info = _el('div', 'agent-card__info');
-    info.appendChild(_text('div', 'agent-card__name', agent.name || ''));
-    info.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
-    const stats = _el('div', 'agent-card__stats');
-    // 星标 + 数字 紧密组合（Figma gap 1.5px）
-    const statGroup = _el('span', 'agent-card__stat-group');
-    var starIcon = _el('span', 'agent-card__stat-icon');
-    starIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.94531 0.525391C6.08953 0.525551 6.20334 0.604267 6.25098 0.701172L7.59668 3.43262L7.71875 3.68066L7.99121 3.7207L11.0859 4.16992V4.1709H11.0869C11.1865 4.18536 11.2656 4.2375 11.3135 4.30371L11.3506 4.37402C11.3752 4.44422 11.3691 4.52183 11.3301 4.58984L11.2803 4.6543L9.01172 6.86914L8.81543 7.06152L8.86133 7.33301L9.3877 10.4043C9.40428 10.501 9.36472 10.6085 9.26172 10.6797C9.20158 10.7197 9.13 10.7412 9.05762 10.7412C9.00017 10.7412 8.94132 10.7275 8.8877 10.7002L6.18945 9.2793L5.94531 9.15039L5.7002 9.2793L3.00684 10.6982C2.95198 10.7266 2.89097 10.7412 2.83203 10.7412C2.77821 10.7412 2.72454 10.7298 2.67578 10.707L2.62891 10.6797C2.52556 10.6083 2.48649 10.5012 2.50293 10.4053V10.4043L3.0293 7.33301L3.0752 7.06152L2.87793 6.86914L0.611328 4.6543L0.610352 4.65332L0.560547 4.58984C0.521516 4.522 0.515166 4.44401 0.540039 4.37305L0.539062 4.37207C0.573747 4.27569 0.671018 4.18999 0.803711 4.1709L0.804688 4.16992L3.89844 3.7207L4.17188 3.68066L4.29395 3.43262L5.63867 0.702148C5.68788 0.603278 5.80274 0.525391 5.94531 0.525391Z" stroke="#666666" stroke-width="1.05"/></svg>';
-    statGroup.appendChild(starIcon);
-    statGroup.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', formatNumber(agent.claws)));
-    stats.appendChild(statGroup);
-    if (agent.owner) {
-      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · ${agent.owner}`));
-    }
-    info.appendChild(stats);
-    contentGroup.appendChild(info);
-
-    row1.appendChild(contentGroup);
-
-    // @召唤 按钮
-    const defaultLabel = '@召唤';
-    const btn = _text('button', 'agent-card__action', actionLabel || defaultLabel);
-    if (onAction) {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        console.log('[openagent] Try button clicked for:', agent.name);
-        onAction(agent);
-      });
-      card.addEventListener('click', (e) => {
-        e.stopPropagation();
-        console.log('[openagent] Card clicked for:', agent.name);
-        onAction(agent);
-      });
-      card.style.cursor = 'pointer';
-    }
-    row1.appendChild(btn);
-
-    avart.appendChild(row1);
-
-    card.appendChild(avart);
-
-  } else if (mode === 'search') {
-    const avatar = document.createElement('img');
-    avatar.className = 'agent-card__avatar';
-    avatar.src = avatarUrl(agent);
-    avatar.alt = agent.name || '';
-    avatar.addEventListener('error', () => {
-      avatar.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=6366f1&color=fff&size=112`;
-    }, { once: true });
-    card.appendChild(avatar);
-
-    const body = _el('div', 'agent-card__body');
-    body.appendChild(_text('div', 'agent-card__name', agent.name || ''));
-    body.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
-
-    const stats = _el('div', 'agent-card__stats');
-    const statGroup = _el('span', 'agent-card__stat-group');
-    var starIcon = _el('span', 'agent-card__stat-icon');
-    starIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.94531 0.525391C6.08953 0.525551 6.20334 0.604267 6.25098 0.701172L7.59668 3.43262L7.71875 3.68066L7.99121 3.7207L11.0859 4.16992V4.1709H11.0869C11.1865 4.18536 11.2656 4.2375 11.3135 4.30371L11.3506 4.37402C11.3752 4.44422 11.3691 4.52183 11.3301 4.58984L11.2803 4.6543L9.01172 6.86914L8.81543 7.06152L8.86133 7.33301L9.3877 10.4043C9.40428 10.501 9.36472 10.6085 9.26172 10.6797C9.20158 10.7197 9.13 10.7412 9.05762 10.7412C9.00017 10.7412 8.94132 10.7275 8.8877 10.7002L6.18945 9.2793L5.94531 9.15039L5.7002 9.2793L3.00684 10.6982C2.95198 10.7266 2.89097 10.7412 2.83203 10.7412C2.77821 10.7412 2.72454 10.7298 2.67578 10.707L2.62891 10.6797C2.52556 10.6083 2.48649 10.5012 2.50293 10.4053V10.4043L3.0293 7.33301L3.0752 7.06152L2.87793 6.86914L0.611328 4.6543L0.610352 4.65332L0.560547 4.58984C0.521516 4.522 0.515166 4.44401 0.540039 4.37305L0.539062 4.37207C0.573747 4.27569 0.671018 4.18999 0.803711 4.1709L0.804688 4.16992L3.89844 3.7207L4.17188 3.68066L4.29395 3.43262L5.63867 0.702148C5.68788 0.603278 5.80274 0.525391 5.94531 0.525391Z" stroke="#666666" stroke-width="1.05"/></svg>';
-    statGroup.appendChild(starIcon);
-    statGroup.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', formatNumber(agent.claws)));
-    stats.appendChild(statGroup);
-    if (agent.owner) {
-      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · ${agent.owner}`));
-    }
-    body.appendChild(stats);
-    card.appendChild(body);
-
-    const btn = _text('button', 'agent-card__action', actionLabel || '@召唤');
-    if (onAction) {
-      btn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        console.log('[openagent] Try button clicked for:', agent.name);
-        onAction(agent);
-      });
-      card.addEventListener('click', (e) => {
-        e.stopPropagation();
-        console.log('[openagent] Card clicked for:', agent.name);
-        onAction(agent);
-      });
-      card.style.cursor = 'pointer';
-    }
-    card.appendChild(btn);
-
-  } else {
-    // ── mode: inline（聊天内嵌卡片）— 保持原结构 ──
-    const avatar = document.createElement('img');
-    avatar.className = 'agent-card__avatar';
-    avatar.src = avatarUrl(agent);
-    avatar.alt = agent.name || '';
-    avatar.addEventListener('error', () => {
-      avatar.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(agent.name)}&background=6366f1&color=fff&size=112`;
-    }, { once: true });
-    card.appendChild(avatar);
-
-    const body = _el('div', 'agent-card__body');
-    const nameLine = _el('div', 'agent-card__name-line');
-    nameLine.appendChild(_text('span', 'agent-card__name', agent.name || ''));
-    if (agent.tag) {
-      nameLine.appendChild(_text('span', 'agent-card__tag', `@${agent.tag}`));
-    }
-    body.appendChild(nameLine);
-    body.appendChild(_text('div', 'agent-card__bio', agent.bio || '暂无简介'));
-
-    const stats = _el('div', 'agent-card__stats');
-    const statGroup = _el('span', 'agent-card__stat-group');
-    var starIcon = _el('span', 'agent-card__stat-icon');
-    starIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M5.94531 0.525391C6.08953 0.525551 6.20334 0.604267 6.25098 0.701172L7.59668 3.43262L7.71875 3.68066L7.99121 3.7207L11.0859 4.16992V4.1709H11.0869C11.1865 4.18536 11.2656 4.2375 11.3135 4.30371L11.3506 4.37402C11.3752 4.44422 11.3691 4.52183 11.3301 4.58984L11.2803 4.6543L9.01172 6.86914L8.81543 7.06152L8.86133 7.33301L9.3877 10.4043C9.40428 10.501 9.36472 10.6085 9.26172 10.6797C9.20158 10.7197 9.13 10.7412 9.05762 10.7412C9.00017 10.7412 8.94132 10.7275 8.8877 10.7002L6.18945 9.2793L5.94531 9.15039L5.7002 9.2793L3.00684 10.6982C2.95198 10.7266 2.89097 10.7412 2.83203 10.7412C2.77821 10.7412 2.72454 10.7298 2.67578 10.707L2.62891 10.6797C2.52556 10.6083 2.48649 10.5012 2.50293 10.4053V10.4043L3.0293 7.33301L3.0752 7.06152L2.87793 6.86914L0.611328 4.6543L0.610352 4.65332L0.560547 4.58984C0.521516 4.522 0.515166 4.44401 0.540039 4.37305L0.539062 4.37207C0.573747 4.27569 0.671018 4.18999 0.803711 4.1709L0.804688 4.16992L3.89844 3.7207L4.17188 3.68066L4.29395 3.43262L5.63867 0.702148C5.68788 0.603278 5.80274 0.525391 5.94531 0.525391Z" stroke="#666666" stroke-width="1.05"/></svg>';
-    statGroup.appendChild(starIcon);
-    statGroup.appendChild(_text('span', 'agent-card__stat agent-card__stat--claws', formatNumber(agent.claws)));
-    stats.appendChild(statGroup);
-    if (agent.owner) {
-      stats.appendChild(_text('span', 'agent-card__stat agent-card__stat--owner', ` · ${agent.owner}`));
-    }
-    body.appendChild(stats);
-    card.appendChild(body);
-
-    const btn = _text('button', 'agent-card__action', actionLabel || '@召唤');
-    if (onAction) {
-      btn.addEventListener('click', (e) => { e.stopPropagation(); onAction(agent); });
-      card.addEventListener('click', (e) => { e.stopPropagation(); onAction(agent); });
-      card.style.cursor = 'pointer';
-    }
-    card.appendChild(btn);
-  }
-
-  return card;
-}