thandClaude Opus 4.6
9267c7c6a1
Generalises the flyout from peer-only to a thread abstraction
({kind: 'peer'|'room', key, label}). Conversations list and peer
strip render rooms with a group icon alongside 1:1 peers; clicking
either opens the same thread view.
New UI surface:
- Pick view gets a 1:1 / group mode switch. Group mode reveals a
name field + multi-select member list and a Create button.
- Room threads show an info icon in the flyout header that opens a
member list; owners can add/remove members, rename-later, or
delete the room; non-owners can leave.
- 1:1 threads show a disposable toggle (ph-fire) in the header;
flipping it tells the relay to drop future sends after delivery
instead of persisting.
- Group bubbles show the author's username above each message when
it changes, matching common chat UX.
Thread open triggers a backfill fetch so cold caches / second
devices catch up on older history from the relay.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
68 lines
4.6 KiB
HTML
68 lines
4.6 KiB
HTML
<!-- Chat plugin: bottom-right flyout. Hidden by default; toggled by the
|
|
footer button injected via chat.js. -->
|
|
<div id="chat-flyout" class="hidden">
|
|
<div id="chat-flyout-header">
|
|
<i class="ph ph-chats-circle text-t-accent text-sm"></i>
|
|
<span id="chat-flyout-title" class="font-pixel text-[10px] text-t-bright">chat</span>
|
|
<button id="chat-header-back" class="hidden text-t-muted hover:text-t-accent transition-colors" data-tip="back to list"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<span class="flex-1"></span>
|
|
<button id="chat-thread-disposable" class="hidden text-t-muted hover:text-t-accent transition-colors" data-tip="disposable: messages drop after delivery"><i class="ph ph-fire text-sm"></i></button>
|
|
<button id="chat-thread-info" class="hidden text-t-muted hover:text-t-accent transition-colors" data-tip="room info"><i class="ph ph-info text-sm"></i></button>
|
|
<button id="chat-new-btn" class="text-t-muted hover:text-t-accent transition-colors" data-tip="new conversation"><i class="ph ph-plus-square text-sm"></i></button>
|
|
<button id="chat-refresh-btn" class="text-t-muted hover:text-t-accent transition-colors" data-tip="refresh"><i class="ph ph-arrows-clockwise text-sm" id="chat-refresh-icon"></i></button>
|
|
<button id="chat-close-btn" class="text-t-muted hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i></button>
|
|
</div>
|
|
|
|
<!-- Conversation list (default view) -->
|
|
<div id="chat-list-view" class="chat-view">
|
|
<div id="chat-list" class="chat-list"></div>
|
|
<div id="chat-empty" class="hidden chat-empty">
|
|
<i class="ph ph-chats text-2xl text-t-dim mb-2"></i>
|
|
<p class="font-pixel text-[10px] text-t-dim cursor-blink">no conversations yet</p>
|
|
<button id="chat-empty-start" class="mt-3 px-2 py-1 text-[10px] font-pixel border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors">Start chat</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conversation thread view -->
|
|
<div id="chat-thread-view" class="chat-view hidden">
|
|
<div id="chat-thread-peers" class="chat-thread-peers"></div>
|
|
<div id="chat-thread-messages" class="chat-thread-messages"></div>
|
|
<form id="chat-thread-form">
|
|
<input id="chat-thread-input" type="text" autocomplete="off" placeholder="type a message..." maxlength="2000">
|
|
<button type="submit" id="chat-thread-send" class="text-t-accent hover:brightness-125" data-tip="send"><i class="ph ph-paper-plane-tilt text-sm"></i></button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- New-conversation peer picker / group creation.
|
|
Shared view: a mode toggle at top switches between picking one
|
|
peer (1:1) and building a group (name + multi-select). -->
|
|
<div id="chat-pick-view" class="chat-view hidden">
|
|
<div id="chat-pick-header">
|
|
<button id="chat-pick-back" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<span id="chat-pick-title" class="font-pixel text-[10px] text-t-bright flex-1">new conversation</span>
|
|
</div>
|
|
<div id="chat-pick-mode" class="chat-pick-mode">
|
|
<button class="chat-pick-mode-btn active" data-mode="peer" type="button">1:1</button>
|
|
<button class="chat-pick-mode-btn" data-mode="group" type="button">group</button>
|
|
</div>
|
|
<input id="chat-group-name" class="chat-group-name hidden" type="text" autocomplete="off" placeholder="group name..." maxlength="80">
|
|
<div id="chat-pick-list" class="chat-pick-list"></div>
|
|
<div id="chat-group-actions" class="chat-group-actions hidden">
|
|
<span id="chat-group-count" class="font-pixel text-[9px] text-t-dim"></span>
|
|
<span style="flex:1"></span>
|
|
<button id="chat-group-create" type="button" class="px-2 py-1 text-[10px] font-pixel border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Room info / member management view.
|
|
Shown when the user taps the info icon in a room thread. -->
|
|
<div id="chat-room-info-view" class="chat-view hidden">
|
|
<div id="chat-room-info-header">
|
|
<button id="chat-room-info-back" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
|
|
<i class="ph ph-users-three text-t-accent text-sm"></i>
|
|
<span id="chat-room-info-name" class="font-pixel text-[10px] text-t-bright flex-1 truncate"></span>
|
|
</div>
|
|
<div id="chat-room-info-body" class="chat-room-info-body"></div>
|
|
</div>
|
|
</div>
|