etalon
b4e919502f
- Messages: the message list now scrolls inside a fixed-height pane instead of growing the page; new messages autoscroll only when already at the bottom, and scrolling near the top loads older history (40 at a time) with the position preserved. - Add a message search box in the conversations sidebar backed by a new GET /api/v1/messages/search endpoint (searches the caller's conversations, returns snippets); clicking a result opens that conversation. - Manage-members dialog no longer grows horizontally: results are stacked in a fixed-width, scrollable list. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
93 lines
4.0 KiB
HTML
93 lines
4.0 KiB
HTML
{{define "content"}}
|
||
<div class="error-box" id="error" role="alert"></div>
|
||
<div class="chat-layout">
|
||
<aside class="chat-sidebar card">
|
||
<div class="spread">
|
||
<h2>Messages</h2>
|
||
<button class="btn small primary" id="conv-new">＋ New</button>
|
||
</div>
|
||
<input type="search" id="conv-search" class="mt" placeholder="Search messages…" aria-label="Search messages">
|
||
<ul id="conv-list" class="conv-list"></ul>
|
||
<ul id="search-results" class="conv-list" hidden></ul>
|
||
</aside>
|
||
<section class="chat-main card">
|
||
<div class="spread">
|
||
<h2 id="chat-title">Select a conversation</h2>
|
||
<span style="display:flex;align-items:center;gap:10px">
|
||
<span class="muted" id="typing-indicator" aria-live="polite"></span>
|
||
<button class="btn small" id="chat-members" type="button" hidden>Manage members</button>
|
||
</span>
|
||
</div>
|
||
<div id="chat-messages" class="chat-messages" aria-live="polite"></div>
|
||
<form id="chat-form" hidden>
|
||
<div id="chat-attachments" class="chat-attachments"></div>
|
||
<div class="chat-toolbar" role="toolbar" aria-label="Formatting">
|
||
<button class="btn small" type="button" data-cmd="bold" aria-label="Bold"><b>B</b></button>
|
||
<button class="btn small" type="button" data-cmd="italic" aria-label="Italic"><i>I</i></button>
|
||
<button class="btn small" type="button" data-cmd="underline" aria-label="Underline"><u>U</u></button>
|
||
<button class="btn small" type="button" data-cmd="strikeThrough" aria-label="Strikethrough"><s>S</s></button>
|
||
<button class="btn small" type="button" data-cmd="insertUnorderedList" aria-label="Bulleted list">• list</button>
|
||
<label class="btn small" style="cursor:pointer">📎<input type="file" id="chat-file" multiple hidden></label>
|
||
</div>
|
||
<div id="chat-composer" class="chat-composer" contenteditable="true" role="textbox"
|
||
aria-multiline="true" aria-label="Message" data-placeholder="Write a message… (drag & drop files)"></div>
|
||
<div class="spread mt">
|
||
<span class="hint">Enter to send · Shift+Enter for newline</span>
|
||
<button class="btn primary" type="submit">Send</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
|
||
<dialog id="newconv-dialog">
|
||
<form method="dialog" id="newconv-form" class="stack" style="min-width:420px">
|
||
<h2>New conversation</h2>
|
||
<div class="field">
|
||
<label for="nc-kind">Kind</label>
|
||
<select id="nc-kind">
|
||
<option value="dm">Direct message</option>
|
||
<option value="group">Group</option>
|
||
<option value="project">Project</option>
|
||
</select>
|
||
</div>
|
||
<div class="field" id="nc-title-wrap" hidden>
|
||
<label for="nc-title">Title</label>
|
||
<input type="text" id="nc-title">
|
||
</div>
|
||
<div class="field" id="nc-customer-wrap" hidden>
|
||
<label for="nc-customer">Customer id</label>
|
||
<input type="text" id="nc-customer" placeholder="paste customer id">
|
||
</div>
|
||
<div class="field">
|
||
<label for="nc-search">Participants</label>
|
||
<input type="search" id="nc-search" placeholder="Search people…">
|
||
<div id="nc-results" role="listbox" aria-label="Search results"></div>
|
||
<div id="nc-selected" class="mt"></div>
|
||
</div>
|
||
<div class="spread">
|
||
<button class="btn" type="button" id="nc-cancel">Cancel</button>
|
||
<button class="btn primary" type="submit">Start conversation</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog id="members-dialog">
|
||
<div class="stack" style="min-width:420px">
|
||
<div class="spread">
|
||
<h2 style="margin:0">Group members</h2>
|
||
<button class="btn small" type="button" id="mm-close">Close</button>
|
||
</div>
|
||
<ul id="mm-list" class="conv-list"></ul>
|
||
<div class="field" id="mm-add-wrap">
|
||
<label for="mm-search">Add someone</label>
|
||
<input type="search" id="mm-search" placeholder="Search people…">
|
||
<div id="mm-results" role="listbox" aria-label="Search results"></div>
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
|
||
<dialog id="lightbox" class="lightbox">
|
||
<img id="lightbox-img" alt="">
|
||
</dialog>
|
||
{{end}}
|