@gemboss/ui 0.41.0 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +137 -0
- package/README.md +120 -10
- package/catalog/editor.html +9 -7
- package/catalog/index.html +157 -54
- package/gemboss-ui.css +3 -3
- package/package.json +6 -1
- package/parts/components.css +1 -1
- package/parts/core.css +2 -2
- package/parts/shell.css +1 -1
- package/src/assistant/engine.tsx +3 -2
- package/src/assistant.css +1 -1
- package/src/briefing-card.css +1 -0
- package/src/briefing-card.tsx +50 -0
- package/src/editor/controls.tsx +52 -8
- package/src/editor/index.ts +2 -2
- package/src/editor/swatch.ts +133 -9
- package/src/editor-plain.js +1 -1
- package/src/editor.css +1 -1
- package/src/gemboss-tokens.css +1 -1
- package/src/icons.tsx +2 -0
- package/src/index.ts +10 -4
- package/src/portal.tsx +12 -6
- package/src/progress-ring.css +1 -0
- package/src/progress-ring.tsx +65 -0
- package/src/question-card.css +1 -0
- package/src/question-card.tsx +116 -0
- package/src/range-bar.css +1 -0
- package/src/range-bar.tsx +102 -0
- package/src/reactions-data.ts +13 -0
- package/src/reactions.tsx +36 -10
- package/src/spot-art.css +1 -0
- package/src/spot-art.tsx +130 -0
- package/src/team-chat-data.ts +46 -13
- package/src/team-chat-plain.js +1 -1
- package/src/team-chat.css +1 -1
- package/src/team-chat.tsx +106 -9
- package/src/theme-dark.css +1 -1
package/catalog/index.html
CHANGED
|
@@ -27,8 +27,8 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
27
27
|
@media (max-width:760px){.cat{grid-template-columns:1fr;padding:16px}.cat-nav{position:static;flex-direction:row;flex-wrap:wrap}}
|
|
28
28
|
</style></head><body>
|
|
29
29
|
<div class="cat"><nav class="cat-nav" aria-label="Mục"><a href="#tokens">Token</a><a href="#buttons">Nút</a><a href="#fields">Ô nhập</a><a href="#choice">Tab, nhóm nút, thẻ</a><a href="#surfaces">Thẻ, số liệu, bảng, trạng thái trống</a><a href="#report">Báo cáo</a><a href="#collections">Bảng, list, lưới, board</a><a href="#resizer">Thanh kéo giữa hai cột</a><a href="#modal">Hộp thoại, toast, menu (JS thuần)</a><a href="#sheet">Ngăn trượt cạnh phải</a><a href="#reader">Hộp đọc tài liệu</a><a href="#settings">Hộp cài đặt</a><a href="#switcher">Chuyển dịch vụ</a><a href="#shell">Khung app</a><a href="#nav">Chờ điều hướng</a><a href="#page">Bề rộng nội dung</a><a href="#portal">Cổng công khai: tab trên topbar, tìm kiếm, sáng / tối, người dẫn đầu</a><a href="#site">Trang công khai: thanh trên, logo cỡ site, nút, chân trang</a><a href="#auth">Đăng nhập</a><a href="#setup">Hướng dẫn thiết lập</a><a href="#chat">Thân chat</a><a href="#reactions">Reactions</a><a href="#team-chat">Chat đội</a><a href="#action-card">Thẻ hành động</a><a href="#assistant-engine">Trợ lý: chọn engine</a><a href="#assistant-bridge">Trợ lý: cầu nối trên máy (0.32.0)</a><a href="#assistant-chat">Trợ lý: khung chat (0.29.0)</a><a href="#assistant">Trợ lý: cột phiên</a><a href="#icons">Icon</a><a href="#editor">Editor</a></nav>
|
|
30
|
-
<main><header class="cat-head"><h1>@gemboss/ui 0.
|
|
31
|
-
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
30
|
+
<main><header class="cat-head"><h1>@gemboss/ui 0.43.0</h1><p>Ngôn ngữ thiết kế chung của các công cụ GemBoss. Markup dưới mỗi ví dụ là đúng thứ package render ra; bề mặt không dùng React (HTML tĩnh, Python) chép markup này và nạp <code>gemboss-ui.css</code>. Dựng từ gemboss <code>976cc8bd86a5</code>.</p></header>
|
|
31
|
+
<section id="tokens"><h2>Token</h2><p>Đổi giao diện một bề mặt bằng cách đặt lại token, không viết đè class. Tên và giá trị đọc thẳng từ gemboss-ui.css.</p><div class="cat-swatches"><div class="cat-swatch"><i style="background:var(--gemboss-primary)"></i><code>--gemboss-primary</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-dark)"></i><code>--gemboss-primary-dark</code><span>#000000</span></div><div class="cat-swatch"><i style="background:var(--gemboss-primary-soft)"></i><code>--gemboss-primary-soft</code><span>#f2f3f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent)"></i><code>--gemboss-accent</code><span>#5661f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-strong)"></i><code>--gemboss-accent-strong</code><span>#3a44de</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-soft)"></i><code>--gemboss-accent-soft</code><span>#eef0fe</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-wash)"></i><code>--gemboss-accent-wash</code><span>#f7f8ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-tint)"></i><code>--gemboss-accent-tint</code><span>#dfe2ff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-accent-mid)"></i><code>--gemboss-accent-mid</code><span>#c9cffd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-strong)"></i><code>--gemboss-text-strong</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text)"></i><code>--gemboss-text</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-text-muted)"></i><code>--gemboss-text-muted</code><span>#686b71</span></div><div class="cat-swatch"><i style="background:var(--gemboss-surface)"></i><code>--gemboss-surface</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-canvas)"></i><code>--gemboss-canvas</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-preview-canvas)"></i><code>--gemboss-preview-canvas</code><span>#eceef1</span></div><div class="cat-swatch"><i style="background:var(--gemboss-rail-bg)"></i><code>--gemboss-rail-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-panel-bg)"></i><code>--gemboss-panel-bg</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider)"></i><code>--gemboss-divider</code><span>#e5e7ea</span></div><div class="cat-swatch"><i style="background:var(--gemboss-divider-soft)"></i><code>--gemboss-divider-soft</code><span>#edeff2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-hover)"></i><code>--gemboss-hover</code><span>#eceef2</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-bg)"></i><code>--gemboss-active-bg</code><span>#f0f1f4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-active-fg)"></i><code>--gemboss-active-fg</code><span>#1b1c1e</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger)"></i><code>--gemboss-danger</code><span>#d72c0d</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-strong)"></i><code>--gemboss-danger-strong</code><span>#b42318</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-soft)"></i><code>--gemboss-danger-soft</code><span>#fff0e9</span></div><div class="cat-swatch"><i style="background:var(--gemboss-danger-border)"></i><code>--gemboss-danger-border</code><span>#f5c9bc</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success)"></i><code>--gemboss-success</code><span>#007f5f</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-strong)"></i><code>--gemboss-success-strong</code><span>#0a6a4c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-soft)"></i><code>--gemboss-success-soft</code><span>#e3f1df</span></div><div class="cat-swatch"><i style="background:var(--gemboss-success-border)"></i><code>--gemboss-success-border</code><span>#b7dfcd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning)"></i><code>--gemboss-warning</code><span>#9a6700</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-soft)"></i><code>--gemboss-warning-soft</code><span>#fff8e0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-warning-border)"></i><code>--gemboss-warning-border</code><span>#f5d569</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-bg)"></i><code>--gemboss-dark-bg</code><span>#0a0a0c</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-rail)"></i><code>--gemboss-dark-rail</code><span>#0e0e11</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface)"></i><code>--gemboss-dark-surface</code><span>#16161a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-surface-2)"></i><code>--gemboss-dark-surface-2</code><span>#1e1e24</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-divider)"></i><code>--gemboss-dark-divider</code><span>#2a2a31</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-text)"></i><code>--gemboss-dark-text</code><span>#ededf0</span></div><div class="cat-swatch"><i style="background:var(--gemboss-dark-muted)"></i><code>--gemboss-dark-muted</code><span>#9a9aa4</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg)"></i><code>--gemboss-field-bg</code><span>#fdfdfd</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-bg-hover)"></i><code>--gemboss-field-bg-hover</code><span>#fafafa</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-ink)"></i><code>--gemboss-field-ink</code><span>#303030</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-placeholder)"></i><code>--gemboss-field-placeholder</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line)"></i><code>--gemboss-field-line</code><span>#8a8a8a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-hover)"></i><code>--gemboss-field-line-hover</code><span>#616161</span></div><div class="cat-swatch"><i style="background:var(--gemboss-field-line-active)"></i><code>--gemboss-field-line-active</code><span>#1a1a1a</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-ink)"></i><code>--gemboss-chip-ink</code><span>#303633</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line)"></i><code>--gemboss-chip-line</code><span>#cfd6ce</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-line-hover)"></i><code>--gemboss-chip-line-hover</code><span>#aab4ad</span></div><div class="cat-swatch"><i style="background:var(--gemboss-chip-bg-hover)"></i><code>--gemboss-chip-bg-hover</code><span>#f6f7f5</span></div><div class="cat-swatch"><i style="background:var(--gemboss-on-primary)"></i><code>--gemboss-on-primary</code><span>#ffffff</span></div><div class="cat-swatch"><i style="background:var(--gemboss-app-bg)"></i><code>--gemboss-app-bg</code><span>#ffffff</span></div></div><table class="ui-table cat-scale"><thead><tr><th>Token</th><th>Giá trị</th><th>Mẫu</th></tr></thead><tbody><tr><td><code>--gemboss-fs-micro</code></td><td>11px</td><td style="font-size:var(--gemboss-fs-micro)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-caption</code></td><td>12px</td><td style="font-size:var(--gemboss-fs-caption)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body</code></td><td>14px</td><td style="font-size:var(--gemboss-fs-body)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-body-lg</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-body-lg)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h3</code></td><td>16px</td><td style="font-size:var(--gemboss-fs-h3)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h2</code></td><td>20px</td><td style="font-size:var(--gemboss-fs-h2)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-h1</code></td><td>24px</td><td style="font-size:var(--gemboss-fs-h1)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-fs-display</code></td><td>30px</td><td style="font-size:var(--gemboss-fs-display)">Ngôn ngữ thiết kế chung</td></tr><tr><td><code>--gemboss-radius-xs</code></td><td>4px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xs)"></i></td></tr><tr><td><code>--gemboss-radius-sm</code></td><td>6px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-sm)"></i></td></tr><tr><td><code>--gemboss-radius-md</code></td><td>8px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-md)"></i></td></tr><tr><td><code>--gemboss-radius-lg</code></td><td>12px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-lg)"></i></td></tr><tr><td><code>--gemboss-radius-xl</code></td><td>16px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-xl)"></i></td></tr><tr><td><code>--gemboss-radius-2xl</code></td><td>20px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-2xl)"></i></td></tr><tr><td><code>--gemboss-radius-full</code></td><td>999px</td><td><i class="cat-radius" style="border-radius:var(--gemboss-radius-full)"></i></td></tr><tr><td><code>--gemboss-shadow-resting</code></td><td class="cat-small">0 1px 2px rgba(31, 30, 29, 0.04), 0 2px 6px rgba(31, 30, 29, 0.06)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-resting);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-raised</code></td><td class="cat-small">0 4px 16px rgba(31, 30, 29, 0.10)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-raised);border:0"></i></td></tr><tr><td><code>--gemboss-shadow-overlay</code></td><td class="cat-small">0 16px 48px rgba(31, 30, 29, 0.18)</td><td><i class="cat-radius" style="box-shadow:var(--gemboss-shadow-overlay);border:0"></i></td></tr></tbody></table></section>
|
|
32
32
|
<section id="buttons"><h2>Nút</h2><p>Một lớp <code>ui-btn</code>, ba biến thể, tông đỏ, một cỡ nhỏ. Cao 28px dưới chuột như Button của Polaris (ô nhập và ô chọn 32, như TextField), 44px dưới ngón tay và ở khổ điện thoại, cỡ nhỏ cũng vậy. Dùng được trên <code><button></code> lẫn <code><a></code> (căn giữa sẵn).</p><figure class="cat-demo"><figcaption>Mặc định · chính · ghost · nhỏ · tắt</figcaption><div class="cat-live"><div class="cat-row"><button type="button" class="ui-btn">Lưu nháp</button><button type="button" class="ui-btn ui-btn--primary">Xuất bản</button><button type="button" class="ui-btn ui-btn--ghost">Huỷ</button><button type="button" class="ui-btn ui-btn--sm">Nhỏ</button><button type="button" class="ui-btn ui-btn--primary" disabled>Đang lưu…</button><a class="ui-btn" href="#buttons">Link dạng nút</a></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="cat-row">
|
|
33
33
|
<button type="button" class="ui-btn">Lưu nháp</button>
|
|
34
34
|
<button type="button" class="ui-btn ui-btn--primary">Xuất bản</button>
|
|
@@ -7371,13 +7371,20 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
7371
7371
|
</svg>
|
|
7372
7372
|
</button>
|
|
7373
7373
|
</div>
|
|
7374
|
-
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>ReactionPicker: bảng chọn</figcaption><div class="cat-live"><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction"><input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/><div class="ui-reaction-picker__body"><p class="ui-reaction-picker__head">Frequently used</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button></div><p class="ui-reaction-picker__head">Smileys</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button><button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button><button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button><button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button><button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button><button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button><button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button><button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button><button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button><button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button><button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button><button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button><button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button><button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button><button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button><button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button><button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button><button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button><button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button><button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button><button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button><button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button><button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button><button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button><button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button><button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button><button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button><button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button><button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button><button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button><button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button><button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button><button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button><button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button><button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button><button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button><button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button><button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button></div><p class="ui-reaction-picker__head">Hands</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button><button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button><button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button><button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button><button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button><button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button><button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button><button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button><button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button><button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button></div><p class="ui-reaction-picker__head">Marks</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button><button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button><button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button><button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button><button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button><button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button><button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button><button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button><button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button><button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button><button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button><button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button><button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button><button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button><button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button><button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button><button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button><button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button></div><p class="ui-reaction-picker__head">Work</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button><button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button><button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button><button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button><button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button><button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button><button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button><button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button><button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button><button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button><button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button><button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button><button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button><button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button><button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button><button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button><button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button><button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button><button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button><button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button><button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button><button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button><button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button><button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button><button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button><button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button><button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button><button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button><button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button><button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button><button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button><button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction">
|
|
7374
|
+
</div></code></pre></details></figure><figure class="cat-demo"><figcaption>ReactionPicker: bảng chọn</figcaption><div class="cat-live"><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction"><input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/><div class="ui-reaction-picker__body"><p class="ui-reaction-picker__head">Frequently used</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button></div><p class="ui-reaction-picker__head">Smileys</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😀 grin smile happy" aria-pressed="false">😀</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😃 smile happy" aria-pressed="false">😃</button><button type="button" class="ui-reaction-picker__btn" title="smile" aria-label="Add 😄 smile laugh happy" aria-pressed="false">😄</button><button type="button" class="ui-reaction-picker__btn" title="grin" aria-label="Add 😁 grin beam" aria-pressed="false">😁</button><button type="button" class="ui-reaction-picker__btn" title="laugh" aria-label="Add 😆 laugh squint" aria-pressed="false">😆</button><button type="button" class="ui-reaction-picker__btn" title="sweat" aria-label="Add 😅 sweat smile relief" aria-pressed="false">😅</button><button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button><button type="button" class="ui-reaction-picker__btn" title="rofl" aria-label="Add 🤣 rofl rolling laugh" aria-pressed="false">🤣</button><button type="button" class="ui-reaction-picker__btn" title="blush" aria-label="Add 😊 blush smile" aria-pressed="false">😊</button><button type="button" class="ui-reaction-picker__btn" title="innocent" aria-label="Add 😇 innocent halo" aria-pressed="false">😇</button><button type="button" class="ui-reaction-picker__btn" title="slight" aria-label="Add 🙂 slight smile ok" aria-pressed="false">🙂</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😉 wink" aria-pressed="false">😉</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 😍 heart eyes love" aria-pressed="false">😍</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🥰 love hearts" aria-pressed="false">🥰</button><button type="button" class="ui-reaction-picker__btn" title="kiss" aria-label="Add 😘 kiss" aria-pressed="false">😘</button><button type="button" class="ui-reaction-picker__btn" title="yum" aria-label="Add 😋 yum tasty" aria-pressed="false">😋</button><button type="button" class="ui-reaction-picker__btn" title="wink" aria-label="Add 😜 wink tongue" aria-pressed="false">😜</button><button type="button" class="ui-reaction-picker__btn" title="zany" aria-label="Add 🤪 zany crazy" aria-pressed="false">🤪</button><button type="button" class="ui-reaction-picker__btn" title="hug" aria-label="Add 🤗 hug" aria-pressed="false">🤗</button><button type="button" class="ui-reaction-picker__btn" title="oops" aria-label="Add 🤭 oops giggle" aria-pressed="false">🤭</button><button type="button" class="ui-reaction-picker__btn" title="think" aria-label="Add 🤔 think hmm" aria-pressed="false">🤔</button><button type="button" class="ui-reaction-picker__btn" title="raised" aria-label="Add 🤨 raised eyebrow doubt" aria-pressed="false">🤨</button><button type="button" class="ui-reaction-picker__btn" title="neutral" aria-label="Add 😐 neutral" aria-pressed="false">😐</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add 😶 no words" aria-pressed="false">😶</button><button type="button" class="ui-reaction-picker__btn" title="eye" aria-label="Add 🙄 eye roll" aria-pressed="false">🙄</button><button type="button" class="ui-reaction-picker__btn" title="smirk" aria-label="Add 😏 smirk" aria-pressed="false">😏</button><button type="button" class="ui-reaction-picker__btn" title="grimace" aria-label="Add 😬 grimace awkward" aria-pressed="false">😬</button><button type="button" class="ui-reaction-picker__btn" title="relieved" aria-label="Add 😌 relieved" aria-pressed="false">😌</button><button type="button" class="ui-reaction-picker__btn" title="sleep" aria-label="Add 😴 sleep tired" aria-pressed="false">😴</button><button type="button" class="ui-reaction-picker__btn" title="mask" aria-label="Add 😷 mask sick" aria-pressed="false">😷</button><button type="button" class="ui-reaction-picker__btn" title="mind" aria-label="Add 🤯 mind blown" aria-pressed="false">🤯</button><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🥳 party celebrate" aria-pressed="false">🥳</button><button type="button" class="ui-reaction-picker__btn" title="cool" aria-label="Add 😎 cool sunglasses" aria-pressed="false">😎</button><button type="button" class="ui-reaction-picker__btn" title="nerd" aria-label="Add 🤓 nerd" aria-pressed="false">🤓</button><button type="button" class="ui-reaction-picker__btn" title="confused" aria-label="Add 😕 confused" aria-pressed="false">😕</button><button type="button" class="ui-reaction-picker__btn" title="worried" aria-label="Add 😟 worried" aria-pressed="false">😟</button><button type="button" class="ui-reaction-picker__btn" title="wow" aria-label="Add 😮 wow surprised" aria-pressed="false">😮</button><button type="button" class="ui-reaction-picker__btn" title="astonished" aria-label="Add 😲 astonished" aria-pressed="false">😲</button><button type="button" class="ui-reaction-picker__btn" title="flushed" aria-label="Add 😳 flushed embarrassed" aria-pressed="false">😳</button><button type="button" class="ui-reaction-picker__btn" title="pleading" aria-label="Add 🥺 pleading please" aria-pressed="false">🥺</button><button type="button" class="ui-reaction-picker__btn" title="cry" aria-label="Add 😢 cry sad" aria-pressed="false">😢</button><button type="button" class="ui-reaction-picker__btn" title="sob" aria-label="Add 😭 sob crying" aria-pressed="false">😭</button><button type="button" class="ui-reaction-picker__btn" title="scream" aria-label="Add 😱 scream shock" aria-pressed="false">😱</button><button type="button" class="ui-reaction-picker__btn" title="huff" aria-label="Add 😤 huff frustrated" aria-pressed="false">😤</button><button type="button" class="ui-reaction-picker__btn" title="angry" aria-label="Add 😡 angry mad" aria-pressed="false">😡</button><button type="button" class="ui-reaction-picker__btn" title="swear" aria-label="Add 🤬 swear" aria-pressed="false">🤬</button><button type="button" class="ui-reaction-picker__btn" title="dead" aria-label="Add 💀 dead skull" aria-pressed="false">💀</button><button type="button" class="ui-reaction-picker__btn" title="melting" aria-label="Add 🫠 melting" aria-pressed="false">🫠</button><button type="button" class="ui-reaction-picker__btn" title="salute" aria-label="Add 🫡 salute" aria-pressed="false">🫡</button></div><p class="ui-reaction-picker__head">Hands</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button><button type="button" class="ui-reaction-picker__btn" title="dislike" aria-label="Add 👎 dislike thumbs down no" aria-pressed="false">👎</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 👌 ok perfect" aria-pressed="false">👌</button><button type="button" class="ui-reaction-picker__btn" title="peace" aria-label="Add ✌️ peace victory" aria-pressed="false">✌️</button><button type="button" class="ui-reaction-picker__btn" title="fingers" aria-label="Add 🤞 fingers crossed luck" aria-pressed="false">🤞</button><button type="button" class="ui-reaction-picker__btn" title="love" aria-label="Add 🤟 love you" aria-pressed="false">🤟</button><button type="button" class="ui-reaction-picker__btn" title="rock" aria-label="Add 🤘 rock" aria-pressed="false">🤘</button><button type="button" class="ui-reaction-picker__btn" title="clap" aria-label="Add 👏 clap applause" aria-pressed="false">👏</button><button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button><button type="button" class="ui-reaction-picker__btn" title="open" aria-label="Add 👐 open hands" aria-pressed="false">👐</button><button type="button" class="ui-reaction-picker__btn" title="handshake" aria-label="Add 🤝 handshake deal" aria-pressed="false">🤝</button><button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button><button type="button" class="ui-reaction-picker__btn" title="strong" aria-label="Add 💪 strong muscle" aria-pressed="false">💪</button><button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add 🫶 heart hands" aria-pressed="false">🫶</button><button type="button" class="ui-reaction-picker__btn" title="writing" aria-label="Add ✍️ writing" aria-pressed="false">✍️</button><button type="button" class="ui-reaction-picker__btn" title="wave" aria-label="Add 👋 wave hi bye" aria-pressed="false">👋</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add ☝️ point up" aria-pressed="false">☝️</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👇 point down" aria-pressed="false">👇</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👉 point right" aria-pressed="false">👉</button><button type="button" class="ui-reaction-picker__btn" title="point" aria-label="Add 👈 point left" aria-pressed="false">👈</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 🤙 call me" aria-pressed="false">🤙</button><button type="button" class="ui-reaction-picker__btn" title="stop" aria-label="Add 🖐️ stop hand" aria-pressed="false">🖐️</button><button type="button" class="ui-reaction-picker__btn" title="pinched" aria-label="Add 🤌 pinched" aria-pressed="false">🤌</button></div><p class="ui-reaction-picker__head">Marks</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button><button type="button" class="ui-reaction-picker__btn" title="orange" aria-label="Add 🧡 orange heart" aria-pressed="false">🧡</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 💛 yellow heart" aria-pressed="false">💛</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 💚 green heart" aria-pressed="false">💚</button><button type="button" class="ui-reaction-picker__btn" title="blue" aria-label="Add 💙 blue heart" aria-pressed="false">💙</button><button type="button" class="ui-reaction-picker__btn" title="purple" aria-label="Add 💜 purple heart" aria-pressed="false">💜</button><button type="button" class="ui-reaction-picker__btn" title="black" aria-label="Add 🖤 black heart" aria-pressed="false">🖤</button><button type="button" class="ui-reaction-picker__btn" title="hundred" aria-label="Add 💯 hundred perfect" aria-pressed="false">💯</button><button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button><button type="button" class="ui-reaction-picker__btn" title="checked" aria-label="Add ☑️ checked box" aria-pressed="false">☑️</button><button type="button" class="ui-reaction-picker__btn" title="check" aria-label="Add ✔️ check mark" aria-pressed="false">✔️</button><button type="button" class="ui-reaction-picker__btn" title="no" aria-label="Add ❌ no cross wrong" aria-pressed="false">❌</button><button type="button" class="ui-reaction-picker__btn" title="important" aria-label="Add ❗ important exclamation" aria-pressed="false">❗</button><button type="button" class="ui-reaction-picker__btn" title="question" aria-label="Add ❓ question" aria-pressed="false">❓</button><button type="button" class="ui-reaction-picker__btn" title="warning" aria-label="Add ⚠️ warning" aria-pressed="false">⚠️</button><button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button><button type="button" class="ui-reaction-picker__btn" title="star" aria-label="Add ⭐ star" aria-pressed="false">⭐</button><button type="button" class="ui-reaction-picker__btn" title="sparkles" aria-label="Add ✨ sparkles new" aria-pressed="false">✨</button><button type="button" class="ui-reaction-picker__btn" title="idea" aria-label="Add 💡 idea" aria-pressed="false">💡</button><button type="button" class="ui-reaction-picker__btn" title="pin" aria-label="Add 📌 pin" aria-pressed="false">📌</button><button type="button" class="ui-reaction-picker__btn" title="rocket" aria-label="Add 🚀 rocket ship launch" aria-pressed="false">🚀</button><button type="button" class="ui-reaction-picker__btn" title="target" aria-label="Add 🎯 target goal" aria-pressed="false">🎯</button><button type="button" class="ui-reaction-picker__btn" title="ok" aria-label="Add 🆗 ok button" aria-pressed="false">🆗</button><button type="button" class="ui-reaction-picker__btn" title="new" aria-label="Add 🆕 new" aria-pressed="false">🆕</button><button type="button" class="ui-reaction-picker__btn" title="red" aria-label="Add 🔴 red circle urgent" aria-pressed="false">🔴</button><button type="button" class="ui-reaction-picker__btn" title="green" aria-label="Add 🟢 green circle" aria-pressed="false">🟢</button><button type="button" class="ui-reaction-picker__btn" title="yellow" aria-label="Add 🟡 yellow circle" aria-pressed="false">🟡</button><button type="button" class="ui-reaction-picker__btn" title="plus" aria-label="Add ➕ plus one add" aria-pressed="false">➕</button></div><p class="ui-reaction-picker__head">Work</p><div class="ui-reaction-picker__grid"><button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button><button type="button" class="ui-reaction-picker__btn" title="confetti" aria-label="Add 🎊 confetti" aria-pressed="false">🎊</button><button type="button" class="ui-reaction-picker__btn" title="trophy" aria-label="Add 🏆 trophy win" aria-pressed="false">🏆</button><button type="button" class="ui-reaction-picker__btn" title="gold" aria-label="Add 🥇 gold medal first" aria-pressed="false">🥇</button><button type="button" class="ui-reaction-picker__btn" title="gift" aria-label="Add 🎁 gift" aria-pressed="false">🎁</button><button type="button" class="ui-reaction-picker__btn" title="coffee" aria-label="Add ☕ coffee" aria-pressed="false">☕</button><button type="button" class="ui-reaction-picker__btn" title="cheers" aria-label="Add 🍻 cheers beer" aria-pressed="false">🍻</button><button type="button" class="ui-reaction-picker__btn" title="pizza" aria-label="Add 🍕 pizza" aria-pressed="false">🍕</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📈 chart up growth" aria-pressed="false">📈</button><button type="button" class="ui-reaction-picker__btn" title="chart" aria-label="Add 📉 chart down" aria-pressed="false">📉</button><button type="button" class="ui-reaction-picker__btn" title="money" aria-label="Add 💰 money" aria-pressed="false">💰</button><button type="button" class="ui-reaction-picker__btn" title="cart" aria-label="Add 🛒 cart shop" aria-pressed="false">🛒</button><button type="button" class="ui-reaction-picker__btn" title="package" aria-label="Add 📦 package order shipping" aria-pressed="false">📦</button><button type="button" class="ui-reaction-picker__btn" title="receipt" aria-label="Add 🧾 receipt invoice" aria-pressed="false">🧾</button><button type="button" class="ui-reaction-picker__btn" title="note" aria-label="Add 📝 note memo" aria-pressed="false">📝</button><button type="button" class="ui-reaction-picker__btn" title="calendar" aria-label="Add 📅 calendar date" aria-pressed="false">📅</button><button type="button" class="ui-reaction-picker__btn" title="alarm" aria-label="Add ⏰ alarm time" aria-pressed="false">⏰</button><button type="button" class="ui-reaction-picker__btn" title="waiting" aria-label="Add ⏳ waiting hourglass" aria-pressed="false">⏳</button><button type="button" class="ui-reaction-picker__btn" title="fix" aria-label="Add 🔧 fix wrench" aria-pressed="false">🔧</button><button type="button" class="ui-reaction-picker__btn" title="bug" aria-label="Add 🐛 bug" aria-pressed="false">🐛</button><button type="button" class="ui-reaction-picker__btn" title="test" aria-label="Add 🧪 test" aria-pressed="false">🧪</button><button type="button" class="ui-reaction-picker__btn" title="search" aria-label="Add 🔍 search look" aria-pressed="false">🔍</button><button type="button" class="ui-reaction-picker__btn" title="comment" aria-label="Add 💬 comment chat" aria-pressed="false">💬</button><button type="button" class="ui-reaction-picker__btn" title="call" aria-label="Add 📞 call phone" aria-pressed="false">📞</button><button type="button" class="ui-reaction-picker__btn" title="email" aria-label="Add 📧 email" aria-pressed="false">📧</button><button type="button" class="ui-reaction-picker__btn" title="lock" aria-label="Add 🔒 lock private" aria-pressed="false">🔒</button><button type="button" class="ui-reaction-picker__btn" title="link" aria-label="Add 🔗 link" aria-pressed="false">🔗</button><button type="button" class="ui-reaction-picker__btn" title="image" aria-label="Add 🖼️ image picture" aria-pressed="false">🖼️</button><button type="button" class="ui-reaction-picker__btn" title="laptop" aria-label="Add 💻 laptop computer" aria-pressed="false">💻</button><button type="button" class="ui-reaction-picker__btn" title="phone" aria-label="Add 📱 phone mobile" aria-pressed="false">📱</button><button type="button" class="ui-reaction-picker__btn" title="see" aria-label="Add 🙈 see no evil oops" aria-pressed="false">🙈</button><button type="button" class="ui-reaction-picker__btn" title="hear" aria-label="Add 🙉 hear no evil" aria-pressed="false">🙉</button><button type="button" class="ui-reaction-picker__btn" title="robot" aria-label="Add 🤖 robot bot ai" aria-pressed="false">🤖</button><button type="button" class="ui-reaction-picker__btn" title="brain" aria-label="Add 🧠 brain" aria-pressed="false">🧠</button><button type="button" class="ui-reaction-picker__btn" title="crown" aria-label="Add 👑 crown vip" aria-pressed="false">👑</button><button type="button" class="ui-reaction-picker__btn" title="gem" aria-label="Add 💎 gem diamond" aria-pressed="false">💎</button></div></div></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div class="ui-reaction-picker" role="group" aria-label="Pick a reaction">
|
|
7375
7375
|
<input type="search" class="gemboss-field ui-reaction-picker__search" placeholder="Search emoji" aria-label="Search emoji" autoComplete="off" value=""/>
|
|
7376
7376
|
<div class="ui-reaction-picker__body">
|
|
7377
7377
|
<p class="ui-reaction-picker__head">Frequently used</p>
|
|
7378
7378
|
<div class="ui-reaction-picker__grid">
|
|
7379
7379
|
<button type="button" class="ui-reaction-picker__btn" title="like" aria-label="Remove 👍 like thumbs up yes ok" aria-pressed="true">👍</button>
|
|
7380
7380
|
<button type="button" class="ui-reaction-picker__btn" title="done" aria-label="Add ✅ done check yes" aria-pressed="false">✅</button>
|
|
7381
|
+
<button type="button" class="ui-reaction-picker__btn" title="thanks" aria-label="Add 🙏 thanks please pray" aria-pressed="false">🙏</button>
|
|
7382
|
+
<button type="button" class="ui-reaction-picker__btn" title="party" aria-label="Add 🎉 party tada celebrate" aria-pressed="false">🎉</button>
|
|
7383
|
+
<button type="button" class="ui-reaction-picker__btn" title="joy" aria-label="Add 😂 joy tears laugh lol" aria-pressed="false">😂</button>
|
|
7384
|
+
<button type="button" class="ui-reaction-picker__btn" title="heart" aria-label="Add ❤️ heart love red" aria-pressed="false">❤️</button>
|
|
7385
|
+
<button type="button" class="ui-reaction-picker__btn" title="eyes" aria-label="Add 👀 eyes looking" aria-pressed="false">👀</button>
|
|
7386
|
+
<button type="button" class="ui-reaction-picker__btn" title="raise" aria-label="Add 🙌 raise hands hooray" aria-pressed="false">🙌</button>
|
|
7387
|
+
<button type="button" class="ui-reaction-picker__btn" title="fire" aria-label="Add 🔥 fire hot lit" aria-pressed="false">🔥</button>
|
|
7381
7388
|
</div>
|
|
7382
7389
|
<p class="ui-reaction-picker__head">Smileys</p>
|
|
7383
7390
|
<div class="ui-reaction-picker__grid">
|
|
@@ -7530,7 +7537,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
7530
7537
|
</div>
|
|
7531
7538
|
</div>
|
|
7532
7539
|
</div></code></pre></details></figure></section>
|
|
7533
|
-
<section id="team-chat"><h2>Chat đội</h2><p>Lớp <code>team-chat</code> (20/10/2026, CSS <code>team-chat.css</code> do component tự nạp): chat kênh của GemCare thành chung cho cả fleet, GemCare (HTML thuần) và GemCommunity (React) vẽ cùng một thứ. Cột kênh có số chưa đọc và <code>@</code> gọi tên, vạch ngày, vạch "New messages", tin liền nhau của một người gộp thành một lượt, trích tin được trả lời, thanh thao tác khi rê chuột (dưới ngón tay: chạm vào tin là hiện), reactions của gói, luồng bên phải, nút về tin mới nhất, và cột người. Màn tự quyết theo bề rộng CỦA NÓ (container query): trên 1100px ngăn phải là một cột, từ 1100px trở xuống là ngăn trượt phủ lên cuộc trò chuyện, từ 760px trở xuống chỉ hiện danh sách kênh HOẶC cuộc trò chuyện. Markup của từng phần là hợp đồng ở README "The team chat layer" (test giữ React và hợp đồng khớp nhau). HTML thuần (GemCare) không viết tay markup đó: <code>team-chat-plain.js</code> (<code>gembossUI.teamChat</code>) dựng tin, vạch ngày, vạch "New messages", nút về tin mới nhất, hàng kênh và hàng người từ dữ liệu, cùng markup với component (test so từng nút trong Chromium); khung cuối chạy thật.</p><figure class="cat-demo cat-screen"><figcaption>Desktop 1366: cột kênh · cuộc trò chuyện · luồng</figcaption><div class="cat-wide"><iframe title="Desktop 1366: cột kênh · cuộc trò chuyện · luồng" style="height:680px;width:1366px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
7540
|
+
<section id="team-chat"><h2>Chat đội</h2><p>Lớp <code>team-chat</code> (20/10/2026, CSS <code>team-chat.css</code> do component tự nạp): chat kênh của GemCare thành chung cho cả fleet, GemCare (HTML thuần) và GemCommunity (React) vẽ cùng một thứ. Cột kênh có số chưa đọc và <code>@</code> gọi tên, vạch ngày, vạch "New messages", tin liền nhau của một người gộp thành một lượt, trích tin được trả lời, thanh thao tác khi rê chuột (dưới ngón tay: chạm vào tin là hiện), reactions của gói, luồng bên phải, nút về tin mới nhất, và cột người. Màn tự quyết theo bề rộng CỦA NÓ (container query): trên 1100px ngăn phải là một cột, từ 1100px trở xuống là ngăn trượt phủ lên cuộc trò chuyện, từ 760px trở xuống chỉ hiện danh sách kênh HOẶC cuộc trò chuyện. Markup của từng phần là hợp đồng ở README "The team chat layer" (test giữ React và hợp đồng khớp nhau). HTML thuần (GemCare) không viết tay markup đó: <code>team-chat-plain.js</code> (<code>gembossUI.teamChat</code>) dựng tin, vạch ngày, vạch "New messages", nút về tin mới nhất, hàng kênh và hàng người từ dữ liệu, cùng markup với component (test so từng nút trong Chromium); khung cuối chạy thật.</p><figure class="cat-demo cat-screen"><figcaption>Desktop 1366: cột kênh · cuộc trò chuyện · luồng</figcaption><div class="cat-wide"><iframe title="Desktop 1366: cột kênh · cuộc trò chuyện · luồng" style="height:680px;width:1366px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
7534
7541
|
<div style="position:fixed;inset:0">
|
|
7535
7542
|
<div class="gb-tc" data-view="conversation" data-panel="thread">
|
|
7536
7543
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -8047,14 +8054,26 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8047
8054
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
8048
8055
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
8049
8056
|
</textarea>
|
|
8050
|
-
<button type="
|
|
8057
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
8051
8058
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8052
8059
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8053
|
-
<
|
|
8054
|
-
</
|
|
8055
|
-
<path d="
|
|
8060
|
+
<circle cx="10" cy="10" r="6.5">
|
|
8061
|
+
</circle>
|
|
8062
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
8056
8063
|
</path>
|
|
8057
|
-
|
|
8064
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
8065
|
+
</path>
|
|
8066
|
+
</g>
|
|
8067
|
+
</svg>
|
|
8068
|
+
</button>
|
|
8069
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
8070
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8071
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8072
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
8073
|
+
</path>
|
|
8074
|
+
<path d="M9.5 11 16.5 3.5">
|
|
8075
|
+
</path>
|
|
8076
|
+
</g>
|
|
8058
8077
|
</svg>
|
|
8059
8078
|
</button>
|
|
8060
8079
|
</div>
|
|
@@ -8251,15 +8270,27 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8251
8270
|
<label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label>
|
|
8252
8271
|
<textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…">
|
|
8253
8272
|
</textarea>
|
|
8254
|
-
<button type="
|
|
8273
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
8255
8274
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8256
8275
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8257
|
-
<
|
|
8258
|
-
</
|
|
8259
|
-
<path d="
|
|
8276
|
+
<circle cx="10" cy="10" r="6.5">
|
|
8277
|
+
</circle>
|
|
8278
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
8260
8279
|
</path>
|
|
8261
|
-
|
|
8262
|
-
|
|
8280
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
8281
|
+
</path>
|
|
8282
|
+
</g>
|
|
8283
|
+
</svg>
|
|
8284
|
+
</button>
|
|
8285
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
8286
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8287
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8288
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
8289
|
+
</path>
|
|
8290
|
+
<path d="M9.5 11 16.5 3.5">
|
|
8291
|
+
</path>
|
|
8292
|
+
</g>
|
|
8293
|
+
</svg>
|
|
8263
8294
|
</button>
|
|
8264
8295
|
</div>
|
|
8265
8296
|
<label class="ui-check gb-tc-composer__also">
|
|
@@ -8269,7 +8300,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8269
8300
|
</form>
|
|
8270
8301
|
</aside>
|
|
8271
8302
|
</div>
|
|
8272
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Desktop 1366, tối: cột người (Online / Members)</figcaption><div class="cat-wide"><iframe title="Desktop 1366, tối: cột người (Online / Members)" style="height:680px;width:1366px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="people"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="true" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-people" class="gb-tc-people" aria-labelledby="tc-people-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-people-title">Members</h2></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle" aria-expanded="true" aria-controls="tc-people-body" aria-label="Hide members" title="Hide members"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg></button></header><div class="gb-tc-people__body" id="tc-people-body"><div class="gb-tc-people__section" role="group" aria-labelledby="tc-on-h"><h3 class="gb-tc-people__heading" id="tc-on-h">Online — 3</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person" title="Linh Tran"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">LT</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Linh Tran</span><span class="gb-tc-person__sub">Support lead</span></span><span class="gb-tc-person__role">Admin</span></button></li><li><button type="button" class="gb-tc-person" title="Mai Pham"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="7" aria-hidden="true">MP</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Mai Pham</span><span class="gb-tc-person__sub">Writing the hero copy</span></span></button></li><li><button type="button" class="gb-tc-person" title="Quan Le"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">QL</span><span class="gb-tc-presence gb-tc-presence--away"><span class="gb-tc-sr">Away</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Quan Le</span><span class="gb-tc-person__sub">In a meeting until 11:00</span></span></button></li></ul></div><div class="gb-tc-people__section" role="group" aria-labelledby="tc-all-h"><h3 class="gb-tc-people__heading" id="tc-all-h">Members — 2</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="Bo Nguyen"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">BN</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Bo Nguyen</span><span class="gb-tc-person__sub">Back Monday</span></span></button></li><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="An Vo"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">AV</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">An Vo</span></span></button></li></ul></div></div></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8303
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Desktop 1366, tối: cột người (Online / Members)</figcaption><div class="cat-wide"><iframe title="Desktop 1366, tối: cột người (Online / Members)" style="height:680px;width:1366px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="people"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="true" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-people" class="gb-tc-people" aria-labelledby="tc-people-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-people-title">Members</h2></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-people__toggle" aria-expanded="true" aria-controls="tc-people-body" aria-label="Hide members" title="Hide members"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg></button></header><div class="gb-tc-people__body" id="tc-people-body"><div class="gb-tc-people__section" role="group" aria-labelledby="tc-on-h"><h3 class="gb-tc-people__heading" id="tc-on-h">Online — 3</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person" title="Linh Tran"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">LT</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Linh Tran</span><span class="gb-tc-person__sub">Support lead</span></span><span class="gb-tc-person__role">Admin</span></button></li><li><button type="button" class="gb-tc-person" title="Mai Pham"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="7" aria-hidden="true">MP</span><span class="gb-tc-presence gb-tc-presence--online"><span class="gb-tc-sr">Online</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Mai Pham</span><span class="gb-tc-person__sub">Writing the hero copy</span></span></button></li><li><button type="button" class="gb-tc-person" title="Quan Le"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="0" aria-hidden="true">QL</span><span class="gb-tc-presence gb-tc-presence--away"><span class="gb-tc-sr">Away</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Quan Le</span><span class="gb-tc-person__sub">In a meeting until 11:00</span></span></button></li></ul></div><div class="gb-tc-people__section" role="group" aria-labelledby="tc-all-h"><h3 class="gb-tc-people__heading" id="tc-all-h">Members — 2</h3><ul class="gb-tc-people__list"><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="Bo Nguyen"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="1" aria-hidden="true">BN</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">Bo Nguyen</span><span class="gb-tc-person__sub">Back Monday</span></span></button></li><li><button type="button" class="gb-tc-person gb-tc-person--offline" title="An Vo"><span class="gb-tc-person__av"><span class="gb-avatar gb-avatar--32" data-tone="4" aria-hidden="true">AV</span><span class="gb-tc-presence gb-tc-presence--offline"><span class="gb-tc-sr">Offline</span></span></span><span class="gb-tc-person__text"><span class="gb-tc-person__name">An Vo</span></span></button></li></ul></div></div></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8273
8304
|
<div style="position:fixed;inset:0">
|
|
8274
8305
|
<div class="gb-tc" data-view="conversation" data-panel="people">
|
|
8275
8306
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -8786,14 +8817,26 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8786
8817
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
8787
8818
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
8788
8819
|
</textarea>
|
|
8789
|
-
<button type="
|
|
8820
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
8790
8821
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8791
8822
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8792
|
-
<
|
|
8793
|
-
</
|
|
8794
|
-
<path d="
|
|
8823
|
+
<circle cx="10" cy="10" r="6.5">
|
|
8824
|
+
</circle>
|
|
8825
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
8795
8826
|
</path>
|
|
8796
|
-
|
|
8827
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
8828
|
+
</path>
|
|
8829
|
+
</g>
|
|
8830
|
+
</svg>
|
|
8831
|
+
</button>
|
|
8832
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
8833
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
8834
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
8835
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
8836
|
+
</path>
|
|
8837
|
+
<path d="M9.5 11 16.5 3.5">
|
|
8838
|
+
</path>
|
|
8839
|
+
</g>
|
|
8797
8840
|
</svg>
|
|
8798
8841
|
</button>
|
|
8799
8842
|
</div>
|
|
@@ -8901,7 +8944,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
8901
8944
|
</div>
|
|
8902
8945
|
</aside>
|
|
8903
8946
|
</div>
|
|
8904
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng</figcaption><div class="cat-wide"><iframe title="1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng" style="height:640px;width:1024px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8947
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng</figcaption><div class="cat-wide"><iframe title="1024: luồng là ngăn trượt phủ lên, cuộc trò chuyện giữ nguyên bề rộng" style="height:640px;width:1024px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation" data-panel="thread"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section><div class="gb-tc-scrim" aria-hidden="true"></div><aside id="tc-thread" class="gb-tc-thread" aria-labelledby="tc-thread-title" tabindex="-1"><header class="gb-tc-panel-head"><div class="gb-tc-panel-head__text"><h2 class="gb-tc-panel-head__title" id="tc-thread-title">Thread</h2><p class="gb-tc-panel-head__sub">#general</p></div><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-panel-head__close" aria-label="Close thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg></button></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-labelledby="tc-thread-title" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-thread__count"><span>2 replies</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">17:02</time></div><div class="gb-tc-msg__body">I can take the cart drawer.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction" aria-pressed="false" title="Linh" aria-label="👍, Linh. Add yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Quan Le" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">17:05</time></div><div class="gb-tc-msg__body">Hero copy is mine.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label><textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div><label class="ui-check gb-tc-composer__also"><input type="checkbox"/><span>Also send to #general</span></label></form></aside></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
8905
8948
|
<div style="position:fixed;inset:0">
|
|
8906
8949
|
<div class="gb-tc" data-view="conversation" data-panel="thread">
|
|
8907
8950
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -9418,14 +9461,26 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
9418
9461
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
9419
9462
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
9420
9463
|
</textarea>
|
|
9421
|
-
<button type="
|
|
9464
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
9422
9465
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9423
9466
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9424
|
-
<
|
|
9425
|
-
</
|
|
9426
|
-
<path d="
|
|
9467
|
+
<circle cx="10" cy="10" r="6.5">
|
|
9468
|
+
</circle>
|
|
9469
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
9427
9470
|
</path>
|
|
9428
|
-
|
|
9471
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
9472
|
+
</path>
|
|
9473
|
+
</g>
|
|
9474
|
+
</svg>
|
|
9475
|
+
</button>
|
|
9476
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
9477
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9478
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9479
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
9480
|
+
</path>
|
|
9481
|
+
<path d="M9.5 11 16.5 3.5">
|
|
9482
|
+
</path>
|
|
9483
|
+
</g>
|
|
9429
9484
|
</svg>
|
|
9430
9485
|
</button>
|
|
9431
9486
|
</div>
|
|
@@ -9622,15 +9677,27 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
9622
9677
|
<label class="gb-tc-sr" for="tc-thread-input">Reply to thread</label>
|
|
9623
9678
|
<textarea id="tc-thread-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Reply…">
|
|
9624
9679
|
</textarea>
|
|
9625
|
-
<button type="
|
|
9680
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
9626
9681
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9627
9682
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9628
|
-
<
|
|
9629
|
-
</
|
|
9630
|
-
<path d="
|
|
9683
|
+
<circle cx="10" cy="10" r="6.5">
|
|
9684
|
+
</circle>
|
|
9685
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
9631
9686
|
</path>
|
|
9632
|
-
|
|
9633
|
-
|
|
9687
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
9688
|
+
</path>
|
|
9689
|
+
</g>
|
|
9690
|
+
</svg>
|
|
9691
|
+
</button>
|
|
9692
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
9693
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
9694
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
9695
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
9696
|
+
</path>
|
|
9697
|
+
<path d="M9.5 11 16.5 3.5">
|
|
9698
|
+
</path>
|
|
9699
|
+
</g>
|
|
9700
|
+
</svg>
|
|
9634
9701
|
</button>
|
|
9635
9702
|
</div>
|
|
9636
9703
|
<label class="ui-check gb-tc-composer__also">
|
|
@@ -9640,7 +9707,7 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
9640
9707
|
</form>
|
|
9641
9708
|
</aside>
|
|
9642
9709
|
</div>
|
|
9643
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)</figcaption><div class="cat-wide"><iframe title="Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)" style="height:720px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
9710
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)</figcaption><div class="cat-wide"><iframe title="Điện thoại 390: cuộc trò chuyện (nút quay về danh sách ở đầu)" style="height:720px;width:390px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
9644
9711
|
<div style="position:fixed;inset:0">
|
|
9645
9712
|
<div class="gb-tc" data-view="conversation">
|
|
9646
9713
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -10157,21 +10224,33 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
10157
10224
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
10158
10225
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
10159
10226
|
</textarea>
|
|
10160
|
-
<button type="
|
|
10227
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
10161
10228
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10162
10229
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10163
|
-
<
|
|
10164
|
-
</
|
|
10165
|
-
<path d="
|
|
10230
|
+
<circle cx="10" cy="10" r="6.5">
|
|
10231
|
+
</circle>
|
|
10232
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
10166
10233
|
</path>
|
|
10167
|
-
|
|
10234
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
10235
|
+
</path>
|
|
10236
|
+
</g>
|
|
10237
|
+
</svg>
|
|
10238
|
+
</button>
|
|
10239
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
10240
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10241
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10242
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
10243
|
+
</path>
|
|
10244
|
+
<path d="M9.5 11 16.5 3.5">
|
|
10245
|
+
</path>
|
|
10246
|
+
</g>
|
|
10168
10247
|
</svg>
|
|
10169
10248
|
</button>
|
|
10170
10249
|
</div>
|
|
10171
10250
|
</form>
|
|
10172
10251
|
</section>
|
|
10173
10252
|
</div>
|
|
10174
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390, tối: danh sách kênh</figcaption><div class="cat-wide"><iframe title="Điện thoại 390, tối: danh sách kênh" style="height:520px;width:390px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="list"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
10253
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>Điện thoại 390, tối: danh sách kênh</figcaption><div class="cat-wide"><iframe title="Điện thoại 390, tối: danh sách kênh" style="height:520px;width:390px" srcdoc="<!doctype html><html data-theme="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="list"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2><div class="gb-tc-rail__actions"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon" aria-label="New message"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg></button></div></div><div class="gb-tc-rail__scroll"><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-ch-h"><h3 class="gb-tc-rail__heading" id="tc-ch-h">Channels</h3><ul class="gb-tc-rail__list"><li><button type="button" class="gb-tc-channel" aria-current="true" aria-label="general"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">general</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="launch-week, 2 mentioning you, 12 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">launch-week</span><span class="gb-tc-badge gb-tc-badge--mention" aria-hidden="true">@2</span><span class="gb-tc-badge" aria-hidden="true">12</span></button></li><li><button type="button" class="gb-tc-channel gb-tc-channel--unread" aria-label="support-escalations, 3 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-channel__name">support-escalations</span><span class="gb-tc-badge" aria-hidden="true">3</span></button></li><li><button type="button" class="gb-tc-channel" aria-label="payroll, private channel"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg></span><span class="gb-tc-channel__name">payroll</span></button></li></ul></div><div class="gb-tc-rail__section" role="group" aria-labelledby="tc-dm-h"><h3 class="gb-tc-rail__heading" id="tc-dm-h">Direct messages</h3><ul class="gb-tc-rail__list"><li><a class="gb-tc-channel gb-tc-channel--unread" href="#team-chat" aria-label="Linh Tran, direct message, 1 unread"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--online"></span></span><span class="gb-tc-channel__name">Linh Tran</span><span class="gb-tc-badge" aria-hidden="true">1</span></a></li><li><a class="gb-tc-channel" href="#team-chat" aria-label="Quan Le, direct message"><span class="gb-tc-channel__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><span class="gb-tc-presence gb-tc-presence--offline"></span></span><span class="gb-tc-channel__name">Quan Le</span></a></li></ul></div></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"><li class="gb-tc-day"><span class="gb-tc-day__label">Yesterday</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="4" aria-hidden="true">LT</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Linh Tran</span><time class="gb-tc-msg__time">16:20</time></div><div class="gb-tc-msg__body">The launch checklist is in the doc: hero copy, the cart drawer, the welcome email. Each needs an owner by Thursday, and the cart drawer needs a second pair of eyes on mobile.</div><div class="ui-reactions"><div class="ui-reactions__row"><button type="button" class="ui-reaction is-mine" aria-pressed="true" title="Linh, Quan, An" aria-label="👍, Linh, Quan, An. Remove yours"><span class="ui-reaction__emoji">👍</span><span class="ui-reaction__names">Linh, Quan +1</span></button><button type="button" class="ui-reaction" aria-pressed="false" title="Bo" aria-label="🎉, Bo. Add yours"><span class="ui-reaction__emoji">🎉</span><span class="ui-reaction__names">Bo</span></button><button type="button" class="ui-reaction-add" title="Add reaction" aria-label="Add a reaction to the message from Linh Tran" aria-expanded="false"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button></div></div><button type="button" class="gb-tc-threadprev" aria-label="Open the thread, 3 replies, Last reply 2 hours ago"><span class="gb-tc-threadprev__faces" aria-hidden="true"><span class="gb-avatar gb-avatar--24" data-tone="0" aria-hidden="true">QL</span><span class="gb-avatar gb-avatar--24" data-tone="7" aria-hidden="true">MP</span></span><span class="gb-tc-threadprev__count">3 replies</span><span class="gb-tc-threadprev__last">Last reply 2 hours ago</span></button></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="true" aria-label="Remove 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">16:21</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Linh Tran, 16:21: </span><div class="gb-tc-msg__body">Who takes the hero copy?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Linh Tran"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Linh Tran">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Linh Tran">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Linh Tran" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Linh Tran" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Linh Tran" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-day"><span class="gb-tc-day__label">Today</span></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="7" aria-hidden="true">MP</span><div class="gb-tc-msg__main"><button type="button" class="gb-tc-quote"><span class="gb-tc-quote__who">Linh Tran</span><span class="gb-tc-quote__text">Who takes the hero copy?</span></button><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Mai Pham</span><time class="gb-tc-msg__time">09:02</time></div><div class="gb-tc-msg__body">Mine. Shipping it at noon.<span class="gb-tc-msg__edited">(edited)</span><span class="gb-tc-receipt" role="img" aria-label="Read by Linh, Quan. Not yet: Bo" title="Read by Linh, Quan. Not yet: Bo"><svg viewBox="0 0 14 14" width="14" height="14" aria-hidden="true" focusable="false"><circle cx="7" cy="7" r="6" fill="none" stroke="currentColor" stroke-width="1.4"></circle><path d="M7 7 L7 1 A6 6 0 1 1 1.80 10.00 Z" fill="currentColor"></path></svg></span></div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Mai Pham"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Mai Pham">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Mai Pham">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Mai Pham" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Mai Pham" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Mai Pham" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-new"><span class="gb-tc-new__label" role="separator" aria-label="New messages">New messages</span></li><li class="gb-tc-msg gb-tc-msg--mention" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="0" aria-hidden="true">QL</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">Quan Le</span><time class="gb-tc-msg__time">09:40</time></div><div class="gb-tc-msg__body">Pushed the cart drawer fix, @Mai can you check it on your phone?</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg gb-tc-msg--grouped" tabindex="-1"><time class="gb-tc-msg__hover-time">09:41</time><div class="gb-tc-msg__main"><span class="gb-tc-sr">Quan Le, 09:41: </span><div class="gb-tc-msg__body">Preview is up.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from Quan Le"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from Quan Le">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from Quan Le">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from Quan Le" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from Quan Le" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from Quan Le" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li><li class="gb-tc-msg" tabindex="-1"><span class="gb-avatar gb-avatar--32 gb-tc-msg__av" data-tone="5" aria-hidden="true">AI</span><div class="gb-tc-msg__main"><div class="gb-tc-msg__who"><span class="gb-tc-msg__name">GemCare</span><span class="ui-badge ui-badge--info">AI</span><time class="gb-tc-msg__time">09:42</time></div><div class="gb-tc-msg__body">Three customers asked about the cart drawer this morning; all on iOS Safari.</div></div><div class="gb-tc-acts" role="toolbar" aria-label="Actions for the message from GemCare"><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add 👍 on the message from GemCare">👍</button><button type="button" class="gb-tc-act gb-tc-act--quick" aria-pressed="false" aria-label="Add ✅ on the message from GemCare">✅</button><button type="button" class="gb-tc-act" aria-expanded="false" aria-label="More reactions for the message from GemCare" title="Add reaction"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply to the message from GemCare" title="Reply"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg></button><button type="button" class="gb-tc-act" aria-label="Reply in thread to the message from GemCare" title="Reply in thread"><svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg></button></div></li></ol></div><button type="button" class="gb-tc-jump" aria-label="Jump to the latest message, 3 new"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><span class="gb-tc-jump__n" aria-hidden="true">3</span></button></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div></body></html>"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code><link rel="stylesheet" href="../src/team-chat.css">
|
|
10175
10254
|
<div style="position:fixed;inset:0">
|
|
10176
10255
|
<div class="gb-tc" data-view="list">
|
|
10177
10256
|
<nav class="gb-tc-rail" aria-label="Channels">
|
|
@@ -10688,21 +10767,33 @@ body{margin:0;background:var(--gemboss-app-bg,#f1f1f1);color:var(--gemboss-text)
|
|
|
10688
10767
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
10689
10768
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
10690
10769
|
</textarea>
|
|
10691
|
-
<button type="
|
|
10770
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
10692
10771
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10693
10772
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10694
|
-
<
|
|
10695
|
-
</
|
|
10696
|
-
<path d="
|
|
10773
|
+
<circle cx="10" cy="10" r="6.5">
|
|
10774
|
+
</circle>
|
|
10775
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
10697
10776
|
</path>
|
|
10698
|
-
|
|
10777
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
10778
|
+
</path>
|
|
10779
|
+
</g>
|
|
10780
|
+
</svg>
|
|
10781
|
+
</button>
|
|
10782
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
10783
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10784
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10785
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
10786
|
+
</path>
|
|
10787
|
+
<path d="M9.5 11 16.5 3.5">
|
|
10788
|
+
</path>
|
|
10789
|
+
</g>
|
|
10699
10790
|
</svg>
|
|
10700
10791
|
</button>
|
|
10701
10792
|
</div>
|
|
10702
10793
|
</form>
|
|
10703
10794
|
</section>
|
|
10704
10795
|
</div>
|
|
10705
|
-
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component</figcaption><div class="cat-wide"><iframe title="HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component" style="height:600px;width:1280px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2></div><div class="gb-tc-rail__scroll"></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div><script src="../src/team-chat-plain.js"></script><script>
|
|
10796
|
+
</div></code></pre></details></figure><figure class="cat-demo cat-screen"><figcaption>HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component</figcaption><div class="cat-wide"><iframe title="HTML thuần (team-chat-plain.js, chạy thật): cột kênh và các tin dựng từ dữ liệu bằng gembossUI.teamChat, cùng markup với component" style="height:600px;width:1280px" srcdoc="<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../gemboss-ui.css"><link rel="stylesheet" href="../src/collections.css"><link rel="stylesheet" href="../src/reactions.css"><link rel="stylesheet" href="../src/assistant-engine.css"><link rel="stylesheet" href="../src/action-card.css"><link rel="stylesheet" href="../src/assistant-chat.css"><link rel="stylesheet" href="../src/minichart.css"><link rel="stylesheet" href="../src/setup-guide.css"><link rel="stylesheet" href="../src/sheet.css"><link rel="stylesheet" href="../src/reader-dialog.css"><link rel="stylesheet" href="../src/settings-dialog.css"><link rel="stylesheet" href="../src/service-switcher.css"><link rel="stylesheet" href="../src/site.css"></head><body><link rel="stylesheet" href="../src/team-chat.css"><div style="position:fixed;inset:0"><div class="gb-tc" data-view="conversation"><nav class="gb-tc-rail" aria-label="Channels"><div class="gb-tc-rail__head"><h2 class="gb-tc-rail__title">Acme team</h2></div><div class="gb-tc-rail__scroll"></div></nav><section class="gb-tc-main" aria-label="Conversation"><header class="gb-tc-head"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-head__back" aria-label="Back to channels"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg></button><div class="gb-tc-head__text"><h2 class="gb-tc-head__title"><span class="gb-tc-head__glyph" aria-hidden="true"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg></span><span class="gb-tc-head__name">general</span></h2><p class="gb-tc-head__sub">Everyone on the team is here. Customers never see this.</p></div><div class="gb-tc-head__actions"><button type="button" class="ui-btn ui-btn--ghost gb-tc-head__members" aria-expanded="false" aria-controls="tc-people" aria-label="Members, 8"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><span class="gb-tc-head__count">8</span></button></div></header><div class="gb-tc-body"><div class="gb-tc-log" role="log" aria-live="polite" aria-label="Messages in #general" tabindex="0"><ol class="gb-tc-list"></ol></div></div><form class="gb-tc-composer"><div class="gb-tc-composer__box"><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__attach" aria-label="Attach a file"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg></button><label class="gb-tc-sr" for="tc-input">Message</label><textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general"></textarea><button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg></button><button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled=""><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg></button></div></form></section></div></div><script src="../src/team-chat-plain.js"></script><script>
|
|
10706
10797
|
var tc = gembossUI.teamChat, noop = function () {}, at = function (hm) { return "2026-10-20T" + hm + ":00+07:00"; };
|
|
10707
10798
|
document.querySelector(".gb-tc-rail__scroll").replaceChildren(
|
|
10708
10799
|
tc.channelSection({ id: "p-ch", label: "Channels", items: [{ name: "general", active: true, onOpen: noop }, { name: "launch-week", unread: 12, mentions: 2, onOpen: noop }, { name: "payroll", kind: "private", onOpen: noop }] }),
|
|
@@ -10788,14 +10879,26 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
10788
10879
|
<label class="gb-tc-sr" for="tc-input">Message</label>
|
|
10789
10880
|
<textarea id="tc-input" class="gb-tc-composer__input" rows="1" maxLength="4000" placeholder="Message #general">
|
|
10790
10881
|
</textarea>
|
|
10791
|
-
<button type="
|
|
10882
|
+
<button type="button" class="ui-btn ui-btn--ghost ui-btn--icon gb-tc-composer__emoji" aria-label="Emoji" aria-expanded="false">
|
|
10792
10883
|
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10793
10884
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10794
|
-
<
|
|
10795
|
-
</
|
|
10796
|
-
<path d="
|
|
10885
|
+
<circle cx="10" cy="10" r="6.5">
|
|
10886
|
+
</circle>
|
|
10887
|
+
<path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2">
|
|
10797
10888
|
</path>
|
|
10798
|
-
|
|
10889
|
+
<path d="M7.8 8.2h.01M12.2 8.2h.01">
|
|
10890
|
+
</path>
|
|
10891
|
+
</g>
|
|
10892
|
+
</svg>
|
|
10893
|
+
</button>
|
|
10894
|
+
<button type="submit" class="ui-btn ui-btn--primary ui-btn--icon gb-tc-composer__send" aria-label="Send" disabled="">
|
|
10895
|
+
<svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
10896
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
10897
|
+
<path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z">
|
|
10898
|
+
</path>
|
|
10899
|
+
<path d="M9.5 11 16.5 3.5">
|
|
10900
|
+
</path>
|
|
10901
|
+
</g>
|
|
10799
10902
|
</svg>
|
|
10800
10903
|
</button>
|
|
10801
10904
|
</div>
|
|
@@ -11844,7 +11947,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11844
11947
|
</div>
|
|
11845
11948
|
</div>
|
|
11846
11949
|
</div></code></pre></details></figure></section>
|
|
11847
|
-
<section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">
|
|
11950
|
+
<section id="assistant"><h2>Trợ lý: cột phiên</h2><p><code>SessionRail</code> (React). Khung toàn màn hình / cửa sổ nổi / cột phải cao hết màn (<code>allowSide</code>) / thanh là <code>AssistantHost</code>, cần React vì có trạng thái.</p><figure class="cat-demo"><figcaption>SessionRail</figcaption><div class="cat-live"><div style="height:360px;display:flex"><aside class="gemboss-assistant-rail"><div class="gemboss-assistant-rail-top"><button type="button" class="gemboss-assistant-newchat" title="Phiên mới"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9"></path><path d="M14.5 3.5l2 2L10 12H8v-2z"></path></g></svg><span>Phiên mới</span></button><button type="button" class="gemboss-assistant-collapse" aria-label="Collapse sidebar" title="Collapse"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5l-5 5 5 5"></path></g></svg></button></div><div class="gemboss-assistant-search gemboss-field gemboss-field--group"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5"></circle><path d="M13 13l3.5 3.5"></path></g></svg><input class="gemboss-field__bare" placeholder="Tìm phiên…" aria-label="Search history" value=""/><kbd class="gemboss-assistant-kbd">/</kbd></div><div class="gemboss-assistant-threads"><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Đã ghim</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="So sánh advertorial với listicle"><span class="gemboss-assistant-thread-titlerow"><svg viewBox="0 0 20 20" class="gemboss-assistant-pin-dot" aria-hidden="true" focusable="false"><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor"></path><path d="M10 11v5.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg><span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span></span><span class="gemboss-assistant-thread-meta">11/9/2026</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm nay</div><div class="gemboss-assistant-thread active"><button type="button" class="gemboss-assistant-thread-main" title="Store nào đang dựng loạt landing?"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Store nào đang dựng loạt landing?</span></span><span class="gemboss-assistant-thread-meta">3 giờ trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div><div class="gemboss-assistant-group"><div class="gemboss-assistant-group-label">Hôm qua</div><div class="gemboss-assistant-thread"><button type="button" class="gemboss-assistant-thread-main" title="Landing điểm cao nhất của corpus"><span class="gemboss-assistant-thread-titlerow"><span class="gemboss-assistant-thread-title">Landing điểm cao nhất của corpus</span></span><span class="gemboss-assistant-thread-meta">1 ngày trước</span></button><div class="gemboss-assistant-thread-actions"><button type="button" class="gemboss-assistant-thread-act" aria-label="Options"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="10" r=".8"></circle><circle cx="10" cy="10" r=".8"></circle><circle cx="15" cy="10" r=".8"></circle></g></svg></button></div></div></div></div></aside></div></div><details class="cat-code"><summary>Markup</summary><pre><code><div style="height:360px;display:flex">
|
|
11848
11951
|
<aside class="gemboss-assistant-rail">
|
|
11849
11952
|
<div class="gemboss-assistant-rail-top">
|
|
11850
11953
|
<button type="button" class="gemboss-assistant-newchat" title="Phiên mới">
|
|
@@ -11893,7 +11996,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11893
11996
|
</svg>
|
|
11894
11997
|
<span class="gemboss-assistant-thread-title">So sánh advertorial với listicle</span>
|
|
11895
11998
|
</span>
|
|
11896
|
-
<span class="gemboss-assistant-thread-meta">
|
|
11999
|
+
<span class="gemboss-assistant-thread-meta">11/9/2026</span>
|
|
11897
12000
|
</button>
|
|
11898
12001
|
<div class="gemboss-assistant-thread-actions">
|
|
11899
12002
|
<button type="button" class="gemboss-assistant-thread-act" aria-label="Options">
|
|
@@ -11964,7 +12067,7 @@ document.querySelector(".gb-tc-body").append(tc.jumpToLatest({ count:
|
|
|
11964
12067
|
</div>
|
|
11965
12068
|
</aside>
|
|
11966
12069
|
</div></code></pre></details></figure></section>
|
|
11967
|
-
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 54 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div><div class="gnav-ico cat-icon" title="hash"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg><code>hash</code></div><div class="gnav-ico cat-icon" title="lock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg><code>lock</code></div><div class="gnav-ico cat-icon" title="reply"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg><code>reply</code></div><div class="gnav-ico cat-icon" title="thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg><code>thread</code></div><div class="gnav-ico cat-icon" title="paperclip"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg><code>paperclip</code></div><div class="gnav-ico cat-icon" title="send"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg><code>send</code></div><div class="gnav-ico cat-icon" title="chevronLeft"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg><code>chevronLeft</code></div><div class="gnav-ico cat-icon" title="chevronsDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><code>chevronsDown</code></div><div class="gnav-ico cat-icon" title="panelRight"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg><code>panelRight</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
12070
|
+
<section id="icons"><h2>Icon</h2><p>Bộ icon GemBoss: 55 icon, lưới 20px, nét 1.5. <code>fill="none"</code> nằm trên <code><g></code>, không trên <code><svg></code>.</p><div class="cat-icons"><div class="gnav-ico cat-icon" title="reaction"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 10a6.5 6.5 0 1 1-6.5-6.5"></path><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path><path d="M15 2.5v4M13 4.5h4"></path></g></svg><code>reaction</code></div><div class="gnav-ico cat-icon" title="home"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9 10 3.5 16.5 9"></path><path d="M5 7.8v8.7h10V7.8"></path><path d="M8.5 16.5v-4h3v4"></path></g></svg><code>home</code></div><div class="gnav-ico cat-icon" title="dashboard"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6" rx="1.3"></rect><rect x="11" y="3" width="6" height="6" rx="1.3"></rect><rect x="3" y="11" width="6" height="6" rx="1.3"></rect><rect x="11" y="11" width="6" height="6" rx="1.3"></rect></g></svg><code>dashboard</code></div><div class="gnav-ico cat-icon" title="board"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg><code>board</code></div><div class="gnav-ico cat-icon" title="layout"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="8.25" width="13" height="3.5" rx="1"></rect><rect x="3.5" y="13.5" width="13" height="3.5" rx="1"></rect></g></svg><code>layout</code></div><div class="gnav-ico cat-icon" title="layers"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3 17 6.8 10 10.6 3 6.8z"></path><path d="M3 10.1l7 3.8 7-3.8"></path><path d="M3 13.4l7 3.8 7-3.8"></path></g></svg><code>layers</code></div><div class="gnav-ico cat-icon" title="document"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 2.8h6.8l3.2 3.2v11.2H5z"></path><path d="M11.8 2.8V6H15M7.5 10h5M7.5 13h5"></path></g></svg><code>document</code></div><div class="gnav-ico cat-icon" title="article"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.5"></rect><path d="M6 7h8M6 10h8M6 13h5"></path></g></svg><code>article</code></div><div class="gnav-ico cat-icon" title="page"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="3.5" width="15" height="13" rx="2"></rect><path d="M2.5 7.5h15M6 11h8M6 13.5h5"></path></g></svg><code>page</code></div><div class="gnav-ico cat-icon" title="image"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="1.8"></rect><circle cx="7.3" cy="7.8" r="1.3"></circle><path d="M3.5 15l4.2-4.2 3 3 2.2-2.2 3.6 3.6"></path></g></svg><code>image</code></div><div class="gnav-ico cat-icon" title="folder"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.8 5.3c0-.8.6-1.3 1.3-1.3h3.4l1.8 2h6.6c.8 0 1.3.6 1.3 1.3v7.7c0 .8-.6 1.3-1.3 1.3H4.1c-.8 0-1.3-.6-1.3-1.3z"></path></g></svg><code>folder</code></div><div class="gnav-ico cat-icon" title="list"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5h9M8 10h9M8 15h9"></path><circle cx="4" cy="5" r=".9"></circle><circle cx="4" cy="10" r=".9"></circle><circle cx="4" cy="15" r=".9"></circle></g></svg><code>list</code></div><div class="gnav-ico cat-icon" title="activity"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 10h3l2-5 3 10 2-5h5"></path></g></svg><code>activity</code></div><div class="gnav-ico cat-icon" title="chart"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16.5h14"></path><rect x="4.5" y="9" width="2.8" height="5.5" rx=".7"></rect><rect x="8.6" y="5" width="2.8" height="9.5" rx=".7"></rect><rect x="12.7" y="11" width="2.8" height="3.5" rx=".7"></rect></g></svg><code>chart</code></div><div class="gnav-ico cat-icon" title="radar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><circle cx="10" cy="10" r="3.5"></circle><path d="M10 10l5-5"></path></g></svg><code>radar</code></div><div class="gnav-ico cat-icon" title="map"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="14" height="14" rx="2"></rect><path d="M3 7.7h14M3 12.3h14M7.7 3v14M12.3 3v14"></path></g></svg><code>map</code></div><div class="gnav-ico cat-icon" title="globe"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M3 10h14M10 3c2 2 2.8 4.3 2.8 7s-.8 5-2.8 7c-2-2-2.8-4.3-2.8-7s.8-5 2.8-7z"></path></g></svg><code>globe</code></div><div class="gnav-ico cat-icon" title="megaphone"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8v4h3l6 4V4L6 8H3z"></path><path d="M15 7.5a3.5 3.5 0 0 1 0 5"></path></g></svg><code>megaphone</code></div><div class="gnav-ico cat-icon" title="star"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.8l2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5L2.8 8l5-.7z"></path></g></svg><code>star</code></div><div class="gnav-ico cat-icon" title="eye"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1.8 10S4.7 4.8 10 4.8 18.2 10 18.2 10 15.3 15.2 10 15.2 1.8 10 1.8 10z"></path><circle cx="10" cy="10" r="2.5"></circle></g></svg><code>eye</code></div><div class="gnav-ico cat-icon" title="inbox"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l2-7h10l2 7v5H3z"></path><path d="M3 11h4l1 2h4l1-2h4"></path></g></svg><code>inbox</code></div><div class="gnav-ico cat-icon" title="bell"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13.5V9a5 5 0 0 1 10 0v4.5l1.3 1.5H3.7z"></path><path d="M8.3 17.2a1.9 1.9 0 0 0 3.4 0"></path></g></svg><code>bell</code></div><div class="gnav-ico cat-icon" title="chat"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path></g></svg><code>chat</code></div><div class="gnav-ico cat-icon" title="money"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M12 7.6c-.5-.7-1.2-1-2-1-1.1 0-2 .7-2 1.6 0 2.1 4 1.2 4 3.4 0 .9-.9 1.6-2 1.6-.8 0-1.6-.3-2.1-1M10 5v1.6M10 13.2V15"></path></g></svg><code>money</code></div><div class="gnav-ico cat-icon" title="store"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 7.5 4.5 3.5h11l1.3 4"></path><path d="M3.2 7.5c0 1.3 1 2.2 2.3 2.2s2.2-1 2.2-2.2c0 1.3 1 2.2 2.3 2.2s2.3-1 2.3-2.2c0 1.3.9 2.2 2.2 2.2s2.3-.9 2.3-2.2"></path><path d="M4.5 9.5v7h11v-7M8.5 16.5v-3.5h3v3.5"></path></g></svg><code>store</code></div><div class="gnav-ico cat-icon" title="user"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3.2"></circle><path d="M3.8 16.5c.8-2.8 3.3-4.5 6.2-4.5s5.4 1.7 6.2 4.5"></path></g></svg><code>user</code></div><div class="gnav-ico cat-icon" title="users"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="7.3" r="2.8"></circle><path d="M2.5 16.3c.6-2.5 2.5-4 5-4s4.4 1.5 5 4"></path><path d="M12.3 4.8a2.8 2.8 0 0 1 0 5.2M14.3 12.5c1.6.4 2.7 1.7 3.2 3.8"></path></g></svg><code>users</code></div><div class="gnav-ico cat-icon" title="calendar"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="14" height="12.5" rx="1.8"></rect><path d="M3 8.5h14M7 3v3M13 3v3"></path></g></svg><code>calendar</code></div><div class="gnav-ico cat-icon" title="clock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 6v4l2.8 1.8"></path></g></svg><code>clock</code></div><div class="gnav-ico cat-icon" title="search"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.8" cy="8.8" r="5.3"></circle><path d="M12.8 12.8 17 17"></path></g></svg><code>search</code></div><div class="gnav-ico cat-icon" title="moon"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.6 12.4A6.2 6.2 0 0 1 7.6 4.4a6.2 6.2 0 1 0 8 8Z"></path></g></svg><code>moon</code></div><div class="gnav-ico cat-icon" title="sun"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="3.2"></circle><path d="M10 2.6v1.8M10 15.6v1.8M2.6 10h1.8M15.6 10h1.8M4.8 4.8l1.3 1.3M13.9 13.9l1.3 1.3M4.8 15.2l1.3-1.3M13.9 6.1l1.3-1.3"></path></g></svg><code>sun</code></div><div class="gnav-ico cat-icon" title="link"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8.6 11.4a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1"></path><path d="M11.4 8.6a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"></path></g></svg><code>link</code></div><div class="gnav-ico cat-icon" title="sliders"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h14M3 10h14M3 15h14"></path><circle cx="7" cy="5" r="1.6"></circle><circle cx="13" cy="10" r="1.6"></circle><circle cx="9" cy="15" r="1.6"></circle></g></svg><code>sliders</code></div><div class="gnav-ico cat-icon" title="settings"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.52 9.08 17.15 9.15 17.15 10.85 15.52 10.92 14.56 13.26 15.66 14.45 14.45 15.66 13.26 14.56 10.92 15.52 10.85 17.15 9.15 17.15 9.08 15.52 6.74 14.56 5.55 15.66 4.34 14.45 5.44 13.26 4.48 10.92 2.85 10.85 2.85 9.15 4.48 9.08 5.44 6.74 4.34 5.55 5.55 4.34 6.74 5.44 9.08 4.48 9.15 2.85 10.85 2.85 10.92 4.48 13.26 5.44 14.45 4.34 15.66 5.55 14.56 6.74Z"></path><circle cx="10" cy="10" r="2.4"></circle></g></svg><code>settings</code></div><div class="gnav-ico cat-icon" title="alert"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 17.3 16H2.7z"></path><path d="M10 8.2v3.6M10 13.9v.1"></path></g></svg><code>alert</code></div><div class="gnav-ico cat-icon" title="info"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"></circle><path d="M10 9v4.5M10 6.4v.1"></path></g></svg><code>info</code></div><div class="gnav-ico cat-icon" title="check"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10.5 8 14.5 16 5.5"></path></g></svg><code>check</code></div><div class="gnav-ico cat-icon" title="plus"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12M4 10h12"></path></g></svg><code>plus</code></div><div class="gnav-ico cat-icon" title="close"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10M15 5 5 15"></path></g></svg><code>close</code></div><div class="gnav-ico cat-icon" title="more"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle></g></svg><code>more</code></div><div class="gnav-ico cat-icon" title="apps"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="4.5" cy="4.5" r="1"></circle><circle cx="10" cy="4.5" r="1"></circle><circle cx="15.5" cy="4.5" r="1"></circle><circle cx="4.5" cy="10" r="1"></circle><circle cx="10" cy="10" r="1"></circle><circle cx="15.5" cy="10" r="1"></circle><circle cx="4.5" cy="15.5" r="1"></circle><circle cx="10" cy="15.5" r="1"></circle><circle cx="15.5" cy="15.5" r="1"></circle></g></svg><code>apps</code></div><div class="gnav-ico cat-icon" title="utensils"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14"></path><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17"></path></g></svg><code>utensils</code></div><div class="gnav-ico cat-icon" title="signOut"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8"></path></g></svg><code>signOut</code></div><div class="gnav-ico cat-icon" title="sparkle"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z"></path><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z"></path></g></svg><code>sparkle</code></div><div class="gnav-ico cat-icon" title="hash"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16"></path></g></svg><code>hash</code></div><div class="gnav-ico cat-icon" title="lock"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4.5" y="9" width="11" height="8" rx="1.5"></rect><path d="M7 9V6.5a3 3 0 0 1 6 0V9"></path></g></svg><code>lock</code></div><div class="gnav-ico cat-icon" title="reply"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2"></path></g></svg><code>reply</code></div><div class="gnav-ico cat-icon" title="thread"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z"></path><path d="M6.5 8h7M6.5 10.5h4.5"></path></g></svg><code>thread</code></div><div class="gnav-ico cat-icon" title="paperclip"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3"></path></g></svg><code>paperclip</code></div><div class="gnav-ico cat-icon" title="send"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z"></path><path d="M9.5 11 16.5 3.5"></path></g></svg><code>send</code></div><div class="gnav-ico cat-icon" title="chevronLeft"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.5 4.5 7 10l5.5 5.5"></path></g></svg><code>chevronLeft</code></div><div class="gnav-ico cat-icon" title="chevronsDown"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4"></path></g></svg><code>chevronsDown</code></div><div class="gnav-ico cat-icon" title="panelRight"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="14" height="13" rx="2"></rect><path d="M12.5 3.5v13"></path></g></svg><code>panelRight</code></div><div class="gnav-ico cat-icon" title="emoji"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"></circle><path d="M7.5 11.8s.9 1.2 2.5 1.2 2.5-1.2 2.5-1.2"></path><path d="M7.8 8.2h.01M12.2 8.2h.01"></path></g></svg><code>emoji</code></div></div><figure class="cat-demo"><figcaption>Một icon (markup)</figcaption><div class="cat-live"><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3.5" width="4" height="13" rx="1.2"></rect><rect x="8" y="3.5" width="4" height="9" rx="1.2"></rect><rect x="13" y="3.5" width="4" height="6" rx="1.2"></rect></g></svg></div><details class="cat-code"><summary>Markup</summary><pre><code><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" focusable="false">
|
|
11968
12071
|
<g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
11969
12072
|
<rect x="3" y="3.5" width="4" height="13" rx="1.2">
|
|
11970
12073
|
</rect>
|