agentik-desktop/approved/005-new-chat-picker.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Одобрено: Новый диалог — выбор ассистента</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #121218; --panel: #17212B; --panel2: #1C2733; --line: #232B36;
    --fg: #EBEBEB; --dim: #768C9E; --accent: #6AB2F2; --err: #EC3942; --ok: #63C88A;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #0A0A0F; color: var(--fg); line-height: 1.45;
    display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
  }

  .dialog {
    width: 480px; min-width: 480px; flex: 0 0 auto; max-height: 600px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 26px 80px rgba(0,0,0,.7);
  }
  .d-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
  .d-head h2 { font-size: 16px; font-weight: 600; flex: 1; }
  .x-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
    color: var(--dim); cursor: pointer; font-size: 17px; }
  .x-btn:hover { background: var(--panel2); color: var(--fg); }
  .d-body { flex: 1; overflow-y: auto; padding: 14px 18px 8px; }
  .d-foot { padding: 13px 18px 16px; border-top: 1px solid var(--line); display: flex; gap: 9px; }

  .d-lead { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; }

  .agent-opt {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px;
    background: var(--panel2); margin-bottom: 9px; cursor: pointer; border: 1.5px solid transparent;
  }
  .agent-opt:hover { border-color: #33414F; }
  .agent-opt.on { border-color: var(--accent); background: rgba(106,178,242,.10); }
  .avatar {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; font-weight: 600; color: #0F1922; background: var(--accent);
  }
  .avatar.g2 { background: #86C99A; }
  /* аватар-картинка: клиент показывает свою копию файла */
  .avatar.pic {
    background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%232F4A63'/%3E%3Ccircle cx='20' cy='15' r='6.5' fill='%23DCE6F0'/%3E%3Cpath d='M7 40c0-7.5 5.8-12 13-12s13 4.5 13 12z' fill='%23DCE6F0'/%3E%3C/svg%3E") center/cover;
  }
  .ag-mid { flex: 1; min-width: 0; }
  .ag-name { font-size: 14px; font-weight: 550; }
  .ag-addr { font-size: 11.5px; color: var(--dim); font-family: ui-monospace, "SF Mono", Menlo, monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
  .ag-state { font-size: 11px; display: flex; align-items: center; gap: 5px; margin-top: 4px; }
  .ag-state .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
  .ag-state.ok { color: var(--ok); }
  .ag-state.off { color: var(--dim); } .ag-state.off .d { background: var(--dim); }
  .ag-state.err { color: var(--err); } .ag-state.err .d { background: var(--err); }

  .pick { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 2px solid #3D4A58; }
  .agent-opt.on .pick { border-color: var(--accent); background: var(--accent); position: relative; }
  .agent-opt.on .pick::after {
    content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px;
    border: solid #0F1922; border-width: 0 2px 2px 0; transform: rotate(42deg);
  }

  .warn {
    display: none; gap: 8px; align-items: flex-start; margin-top: 4px; padding: 10px 12px;
    border-radius: 10px; background: rgba(236,57,66,.09); border: 1px solid rgba(236,57,66,.32);
    font-size: 12px; color: #F0A6AA;
  }
  .warn.on { display: flex; }

  .btn {
    padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2);
    color: var(--fg); font-size: 13.5px; cursor: pointer; font-family: inherit;
  }
  .btn:hover { border-color: #3D4A58; }
  .btn.prim { background: var(--accent); border-color: var(--accent); color: #0F1922; font-weight: 600; }
</style>
</head>
<body>

<div class="dialog">
  <div class="d-head">
    <h2>Новый диалог</h2>
    <button class="x-btn">✕</button>
  </div>

  <div class="d-body">
    <div class="d-lead">В каком ассистенте создать диалог?</div>

    <div class="agent-opt on" data-ok="1">
      <div class="avatar">АГ</div>
      <div class="ag-mid">
        <div class="ag-name">agentik · рабочий</div>
        <div class="ag-addr">http://192.168.88.135:8080/agentik</div>
        <div class="ag-state ok"><span class="d"></span>на связи</div>
      </div>
      <div class="pick"></div>
    </div>

    <div class="agent-opt" data-ok="1">
      <div class="avatar g2">ДМ</div>
      <div class="ag-mid">
        <div class="ag-name">домашний</div>
        <div class="ag-addr">http://192.168.76.199:8080/agentik</div>
        <div class="ag-state ok"><span class="d"></span>на связи</div>
      </div>
      <div class="pick"></div>
    </div>

    <div class="agent-opt" data-ok="0">
      <div class="avatar pic"></div>
      <div class="ag-mid">
        <div class="ag-name">Кот-ассистент</div>
        <div class="ag-addr">http://192.168.88.24:8080/agentik</div>
        <div class="ag-state err"><span class="d"></span>не отвечает</div>
      </div>
      <div class="pick"></div>
    </div>

    <div class="warn" id="warn">
      <span>⚠</span>
      <span>Ассистент сейчас не отвечает. Диалог создать можно, но
        сообщение не уйдёт, пока он не поднимется.</span>
    </div>
  </div>

  <div class="d-foot">
    <button class="btn" style="flex:1">Отмена</button>
    <button class="btn prim" style="flex:1">Создать диалог</button>
  </div>
</div>

<script>
  // Выбор ассистента. Первый отмечен сразу — создать диалог можно одним нажатием.
  document.querySelectorAll('.agent-opt').forEach(o => o.onclick = () => {
    document.querySelectorAll('.agent-opt').forEach(x => x.classList.remove('on'));
    o.classList.add('on');
    document.getElementById('warn').classList.toggle('on', o.dataset.ok === '0');
  });
</script>
</body>
</html>