Edit SiloTalk Chat

Source Code Viewer 8632 bytes loaded
<?php
$pageTitle = "SiloTalk Chat";
$logo = "/silocloud/assets/images/SiloTalk.png";
require __DIR__ . "/partials/customer-session.php";
?>
<!doctype html>
<html lang="en">
<head><link rel="icon" type="image/png" href="/silocloud/assets/images/cloud.png">
<meta charset="utf-8">
<title><?= htmlspecialchars($pageTitle) ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root{
  --bg:#f5f7fb;--card:#fff;--line:#e3e8f0;--text:#101828;--muted:#667085;
  --blue:#2563eb;--green:#16a34a;--red:#ef4444;--shadow:0 10px 28px rgba(15,23,42,.06);
  --r:10px;--top:74px;--foot:78px;--side:246px;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
.app{height:100vh;display:grid;grid-template-columns:var(--side) minmax(0,1fr);overflow:hidden}
.sidebar{height:100vh;background:#fff;border-right:1px solid var(--line);padding:18px 16px}
.brand{display:flex;align-items:center;gap:12px;height:52px;margin-bottom:22px}
.brand img{width:42px;height:42px;object-fit:contain}.brand b{font-size:24px}.brand small{color:var(--muted)}
.nav a{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:8px;color:#344054;text-decoration:none;margin-bottom:7px;font-size:15px}
.nav a.active,.nav a:hover{background:#eef4ff;color:var(--blue);font-weight:800}
.main{height:100vh;display:grid;grid-template-rows:var(--top) minmax(0,1fr) var(--foot)}
.top{height:var(--top);background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:220px minmax(320px,680px) 1fr 230px;align-items:center;gap:18px;padding:0 24px}
input{font-family:inherit}.search input,.thread-search input,.composer input{width:100%;height:42px;border:1px solid var(--line);border-radius:8px;padding:0 14px}
.avail{justify-self:end;color:var(--green);font-weight:800}.profile{text-align:right;font-size:14px}.profile small{color:#475467}
.workspace{min-height:0;height:100%;display:grid;grid-template-columns:340px minmax(0,1fr) 330px;gap:14px;padding:14px;overflow:hidden}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.threads{display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.panel-head{padding:18px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:22px}
.thread-search{padding:12px 14px;border-bottom:1px solid var(--line)}
.thread-list{overflow:auto}
.thread{height:72px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:0 14px;border-bottom:1px solid #edf1f6;cursor:pointer}
.thread.active{background:#eef4ff}
.avatar{width:38px;height:38px;border-radius:50%;background:#eef4ff;color:#2563eb;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.thread b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread small{display:block;color:#475467;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:#2563eb;color:#fff;border-radius:999px;font-size:11px;padding:3px 7px;margin-top:5px;display:inline-block}
.chat{display:grid;grid-template-rows:72px minmax(0,1fr) 82px}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line)}
.chat-title{display:flex;align-items:center;gap:12px}.chat-actions{display:flex;gap:10px}
.chat-actions button,.quick button,.fbtn{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
.chat-actions button{height:38px;min-width:42px;font-weight:800}
.messages{padding:20px;overflow:auto;background:linear-gradient(#fff,#fbfcff)}
.msg{display:flex;margin-bottom:16px}.msg.right{justify-content:flex-end}
.bubble{max-width:58%;padding:12px 14px;border-radius:10px;background:#f1f4f9;line-height:1.45}
.msg.right .bubble{background:#2563eb;color:#fff}.bubble b{display:block;font-size:12px;margin-bottom:4px;opacity:.75}
.composer{height:82px;border-top:1px solid var(--line);display:grid;grid-template-columns:42px 1fr 110px;gap:12px;align-items:center;padding:0 16px;background:#fff}
.composer button{height:42px;border:0;border-radius:8px;background:#2563eb;color:#fff;font-weight:800}
.info{display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.profile-card{text-align:center;padding:22px;border-bottom:1px solid var(--line)}
.profile-card .avatar{width:70px;height:70px;margin:auto;font-size:22px}.profile-card h3{margin:12px 0 4px}
.quick{padding:16px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.quick button{height:42px;text-align:left;padding:0 12px;font-weight:700;color:#344054}
.files{padding:16px;overflow:auto}.file{height:42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f6;font-size:13px}
.footer{height:var(--foot);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px}
.footer-left{display:flex;gap:16px;align-items:center;justify-content:center}
.fbtn{height:44px;padding:0 14px;color:#344054}.footer-end{display:flex;align-items:center;gap:12px;font-weight:800;justify-content:flex-end}
.end{height:44px;border-radius:8px;border:0;background:var(--red);color:#fff;font-weight:800;padding:0 18px}
#rtcStatus{font-size:12px;color:#667085}
</style>
</head>
<body>
<div class="app" data-user-uid="<?= htmlspecialchars($userUid) ?>" data-device-uid="<?= htmlspecialchars($deviceUid) ?>">
  <aside class="sidebar">
    <div class="brand"><img src="<?= htmlspecialchars($logo) ?>"><div><b>SiloTalk</b><br><small>Carrier Stack</small></div></div>
    <?php include __DIR__ . "/partials/customer-nav.php"; ?>
  </aside>

  <main class="main">
    <header class="top">
      <b>SiloTalk Workspace</b>
      <div class="search"><input id="globalSearch" placeholder="Search messages, contacts, files..."></div>
      <div class="avail" id="presenceBadge">Connecting</div>
      <div class="profile"><b id="profileName">Loading...</b><br><small id="rtcStatus">RTC initializing</small></div>
    </header>

    <section class="workspace">
      <aside class="card threads">
        <div class="panel-head"><h2>Messages</h2></div>
        <div class="thread-search"><input id="threadSearch" placeholder="Search conversations"></div>
        <div class="thread-list" id="threadList"></div>
      </aside>

      <section class="card chat">
        <div class="chat-head">
          <div class="chat-title">
            <div class="avatar" id="activeInitials">--</div>
            <div><b id="activeName">Select Conversation</b><br><small id="activeMeta">Messaging - Voice - Video - Data</small></div>
          </div>
          <div class="chat-actions">
            <button id="voiceBtn">Call</button>
            <button id="videoBtn">Video</button>
            <button id="dataBtn">Data</button>
          </div>
        </div>
        <div class="messages" id="messages"></div>
        <div class="composer">
          <button id="attachBtn" style="background:#f1f4f9;color:#111827">+</button>
          <input id="messageInput" placeholder="Type message...">
          <button id="sendBtn">Send</button>
        </div>
      </section>

      <aside class="card info">
        <div class="profile-card">
          <div class="avatar" id="sideInitials">--</div>
          <h3 id="sideName">No Contact</h3>
          <small id="sidePresence">Offline</small><br>
          <small id="sideEndpoint">Endpoint pending</small>
        </div>
        <div class="quick">
          <button id="quickVoice">Voice Call</button>
          <button id="quickVideo">Video Call</button>
          <button id="quickShare">Share File / Data</button>
        </div>
        <div class="files">
          <h3 style="margin-top:0">Shared Files</h3>
          <div id="fileList"></div>
        </div>
      </aside>
    </section>

    <footer class="footer">
      <div></div>
      <div class="footer-left">
        <button class="fbtn" id="muteBtn">Mute</button>
        <button class="fbtn" id="camBtn">Video</button>
        <button class="fbtn" id="msgBtn">Messages</button>
        <button class="fbtn" id="contactsBtn">Contacts</button>
        <button class="fbtn" id="settingsBtn">Settings</button>
      </div>
      <div class="footer-end"><button class="end" id="endCallBtn">End Call</button></div>
    </footer>
  </main>
</div>

<input type="file" id="filePicker" hidden>
<script src="/silocloud/apps/silotalk/assets/silotalk-carrier-client.js?v=20260528"></script>
</body>
</html>