switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Feat v0.6.12 css isolation (#47)
All checks were successful
CI/CD / detect-changes (push) Successful in 4s
Details
CI/CD / test-frontend (push) Successful in 6s
Details
CI/CD / test-go-pg (push) Successful in 2m44s
Details
CI/CD / test-sqlite (push) Successful in 2m47s
Details
CI/CD / build-and-deploy (push) Successful in 1m46s
Details

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
Jeffrey Smith
2026-04-01 11:58:39 +00:00
committed by xcaliber
parent 786bc92768
commit 221ae94f4f
33 changed files with 1385 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
packages/chat/js/main.js
View File

@@ -123,60 +123,60 @@
var sMsgs = showSearch ? (searchResults.messages || []) : [];
return html`
<div class="chat-sidebar">
<div class="chat-sidebar__header">
<span class="chat-sidebar__title">Conversations</span>
<div class="ext-chat-sidebar">
<div class="ext-chat-sidebar__header">
<span class="ext-chat-sidebar__title">Conversations</span>
<${Button} size="sm" onClick=${onNew}>New<//>
</div>
<div class="chat-sidebar__search">
<input class="chat-sidebar__search-input"
<div class="ext-chat-sidebar__search">
<input class="ext-chat-sidebar__search-input"
type="text"
value=${searchQuery}
placeholder="Search\u2026"
onInput=${handleSearchInput} />
${searchQuery && html`
<button class="chat-sidebar__search-clear" onClick=${clearSearch}>\u00d7</button>`}
<button class="ext-chat-sidebar__search-clear" onClick=${clearSearch}>\u00d7</button>`}
</div>
${showSearch ? html`
<div class="chat-sidebar__search-results">
${searching && html`<div class="chat-sidebar__search-loading"><${Spinner} size="sm" /></div>`}
<div class="ext-chat-sidebar__search-results">
${searching && html`<div class="ext-chat-sidebar__search-loading"><${Spinner} size="sm" /></div>`}
${!searching && sConvs.length === 0 && sMsgs.length === 0 && html`
<div class="chat-sidebar__empty">No results</div>`}
<div class="ext-chat-sidebar__empty">No results</div>`}
${sConvs.length > 0 && html`
<div class="chat-sidebar__search-section">Conversations</div>
<div class="ext-chat-sidebar__search-section">Conversations</div>
${sConvs.map(c => html`
<div key=${c.id} class="chat-sidebar__item" onClick=${() => selectFromSearch(c.id)}>
<div class="chat-sidebar__item-top">
<span class="chat-sidebar__item-title">${c.title || 'Untitled'}</span>
<span class="chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
<div key=${c.id} class="ext-chat-sidebar__item" onClick=${() => selectFromSearch(c.id)}>
<div class="ext-chat-sidebar__item-top">
<span class="ext-chat-sidebar__item-title">${c.title || 'Untitled'}</span>
<span class="ext-chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
</div>
</div>`)}`}
${sMsgs.length > 0 && html`
<div class="chat-sidebar__search-section">Messages</div>
<div class="ext-chat-sidebar__search-section">Messages</div>
${sMsgs.map(m => html`
<div key=${m.id} class="chat-sidebar__item chat-sidebar__item--search-msg" onClick=${() => selectFromSearch(m.conversation_id)}>
<div class="chat-sidebar__item-top">
<span class="chat-sidebar__item-preview">${truncate(m.content, 80)}</span>
<div key=${m.id} class="ext-chat-sidebar__item ext-chat-sidebar__item--search-msg" onClick=${() => selectFromSearch(m.conversation_id)}>
<div class="ext-chat-sidebar__item-top">
<span class="ext-chat-sidebar__item-preview">${truncate(m.content, 80)}</span>
</div>
<div class="chat-sidebar__item-bottom">
<span class="chat-sidebar__item-time">${timeAgo(m.created_at)}</span>
<div class="ext-chat-sidebar__item-bottom">
<span class="ext-chat-sidebar__item-time">${timeAgo(m.created_at)}</span>
</div>
</div>`)}`}
</div>
` : html`
<div class="chat-sidebar__list">
<div class="ext-chat-sidebar__list">
${conversations.length === 0 && html`
<div class="chat-sidebar__empty">No conversations yet</div>`}
<div class="ext-chat-sidebar__empty">No conversations yet</div>`}
${conversations.map(c => html`
<div key=${c.id}
class=${'chat-sidebar__item' + (selected === c.id ? ' chat-sidebar__item--active' : '')}
class=${'ext-chat-sidebar__item' + (selected === c.id ? ' ext-chat-sidebar__item--active' : '')}
onClick=${() => onSelect(c.id)}>
<div class="chat-sidebar__item-top">
<span class="chat-sidebar__item-title">${c.title || 'Untitled'}</span>
<span class="chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
<div class="ext-chat-sidebar__item-top">
<span class="ext-chat-sidebar__item-title">${c.title || 'Untitled'}</span>
<span class="ext-chat-sidebar__item-time">${timeAgo(c.updated_at || c.created_at)}</span>
</div>
<div class="chat-sidebar__item-bottom">
<span class="chat-sidebar__item-preview">
<div class="ext-chat-sidebar__item-bottom">
<span class="ext-chat-sidebar__item-preview">
${c.last_message
? truncate(c.last_message.content_type === 'system'
? '\u2022 ' + c.last_message.content
@@ -184,7 +184,7 @@
: 'No messages yet'}
</span>
${(unread[c.id] || 0) > 0 && html`
<span class="chat-sidebar__badge">${unread[c.id]}</span>`}
<span class="ext-chat-sidebar__badge">${unread[c.id]}</span>`}
</div>
</div>`)}
</div>
@@ -204,14 +204,14 @@
if (msg._deleted) {
return html`
<div class="chat-msg chat-msg--deleted">
<div class="ext-chat-msg ext-chat-msg--deleted">
<em>This message was deleted</em>
</div>`;
}
if (msg.content_type === 'system') {
return html`
<div class="chat-msg chat-msg--system">
<div class="ext-chat-msg ext-chat-msg--system">
<span>${msg.content}</span>
</div>`;
}
@@ -239,37 +239,37 @@
}
return html`
<div class=${'chat-msg' + (isOwn ? ' chat-msg--own' : '')}
<div class=${'ext-chat-msg' + (isOwn ? ' ext-chat-msg--own' : '')}
onMouseEnter=${() => setHover(true)}
onMouseLeave=${() => setHover(false)}>
${!isOwn && html`
<${Avatar} name=${msg._display_name || msg.participant_id} size="sm" />`}
<div class="chat-msg__body">
${!isOwn && html`<span class="chat-msg__name">${msg._display_name || msg.participant_id}</span>`}
<div class="ext-chat-msg__body">
${!isOwn && html`<span class="ext-chat-msg__name">${msg._display_name || msg.participant_id}</span>`}
${editing ? html`
<div class="chat-msg__edit">
<textarea class="chat-msg__edit-input"
<div class="ext-chat-msg__edit">
<textarea class="ext-chat-msg__edit-input"
value=${editText}
onInput=${e => setEditText(e.target.value)}
onKeyDown=${onEditKeyDown}
rows="2" />
<div class="chat-msg__edit-actions">
<div class="ext-chat-msg__edit-actions">
<${Button} size="sm" variant="secondary" onClick=${cancelEdit}>Cancel<//>
<${Button} size="sm" onClick=${saveEdit}>Save<//>
</div>
</div>
` : msg.content_type === 'markdown' && sw?.markdown?.ready ? html`
<div class="chat-msg__content" dangerouslySetInnerHTML=${{ __html: sw.markdown.renderSync(msg.content, { sanitize: true }) }} />` : html`
<div class="chat-msg__content">${msg.content}</div>`}
<div class="chat-msg__meta">
<span class="chat-msg__time">${timeAgo(msg.created_at)}</span>
${msg.edited_at && html`<span class="chat-msg__edited">(edited)</span>`}
<div class="ext-chat-msg__content" dangerouslySetInnerHTML=${{ __html: sw.markdown.renderSync(msg.content, { sanitize: true }) }} />` : html`
<div class="ext-chat-msg__content">${msg.content}</div>`}
<div class="ext-chat-msg__meta">
<span class="ext-chat-msg__time">${timeAgo(msg.created_at)}</span>
${msg.edited_at && html`<span class="ext-chat-msg__edited">(edited)</span>`}
</div>
</div>
${hover && isOwn && !editing && html`
<div class="chat-msg__actions">
<button class="chat-msg__action" onClick=${startEdit} title="Edit">&#9998;</button>
<button class="chat-msg__action chat-msg__action--danger" onClick=${() => onDelete(msg.id)} title="Delete">&#128465;</button>
<div class="ext-chat-msg__actions">
<button class="ext-chat-msg__action" onClick=${startEdit} title="Edit">&#9998;</button>
<button class="ext-chat-msg__action ext-chat-msg__action--danger" onClick=${() => onDelete(msg.id)} title="Delete">&#128465;</button>
</div>`}
</div>`;
}
@@ -442,18 +442,18 @@
if (!conversationId) {
return html`
<div class="chat-thread chat-thread--empty">
<div class="ext-chat-thread chat-thread--empty">
<p>Select a conversation or start a new one</p>
</div>`;
}
return html`
<div class="chat-thread">
<div class="chat-thread__messages" ref=${listRef}>
${loading && messages.length === 0 && html`<div class="chat-thread__loading"><${Spinner} /></div>`}
${loading && messages.length > 0 && html`<div class="chat-thread__loading-more"><${Spinner} size="sm" /></div>`}
<div class="ext-chat-thread">
<div class="ext-chat-thread__messages" ref=${listRef}>
${loading && messages.length === 0 && html`<div class="ext-chat-thread__loading"><${Spinner} /></div>`}
${loading && messages.length > 0 && html`<div class="ext-chat-thread__loading-more"><${Spinner} size="sm" /></div>`}
${hasMore && !loading && html`
<button class="chat-thread__load-more" onClick=${loadMore}>
<button class="ext-chat-thread__load-more" onClick=${loadMore}>
Load older messages
</button>`}
${messages.map(m => html`
@@ -466,7 +466,7 @@
/>`)}
<div ref=${bottomRef} />
</div>
${typingText && html`<div class="chat-thread__typing">${typingText}</div>`}
${typingText && html`<div class="ext-chat-thread__typing">${typingText}</div>`}
</div>`;
}
@@ -533,8 +533,8 @@
if (!conversationId) return null;
return html`
<div class="chat-compose">
<textarea class="chat-compose__input"
<div class="ext-chat-compose">
<textarea class="ext-chat-compose__input"
ref=${textareaRef}
value=${text}
placeholder="Type a message\u2026"
@@ -580,22 +580,22 @@
}
return html`
<div class="chat-participants">
<div class="chat-participants__header">
<div class="ext-chat-participants">
<div class="ext-chat-participants__header">
<span>Participants (${(participants || []).length})</span>
${isAdmin && html`<${Button} size="sm" onClick=${() => setAddOpen(true)}>Add<//>` }
</div>
<div class="chat-participants__list">
<div class="ext-chat-participants__list">
${(participants || []).map(p => html`
<div key=${p.participant_id} class="chat-participants__item">
<div key=${p.participant_id} class="ext-chat-participants__item">
<${Avatar} name=${p.display_name || p.participant_id} size="sm" />
<span class="chat-participants__name">
<span class="ext-chat-participants__name">
${p.display_name || p.participant_id}
${p.role === 'admin' && html`<span class="chat-participants__badge">admin</span>`}
${p.role === 'admin' && html`<span class="ext-chat-participants__badge">admin</span>`}
</span>
<span class=${'chat-participants__status' + (presence[p.participant_id] ? ' chat-participants__status--online' : '')} />
<span class=${'chat-participants__status' + (presence[p.participant_id] ? ' ext-chat-participants__status--online' : '')} />
${isAdmin && p.participant_id !== currentUserId() && html`
<button class="chat-participants__remove" onClick=${() => removeUser(p.participant_id)} title="Remove">\u00d7</button>`}
<button class="ext-chat-participants__remove" onClick=${() => removeUser(p.participant_id)} title="Remove">\u00d7</button>`}
</div>`)}
</div>
@@ -671,8 +671,8 @@
return html`
<${Dialog} open=${open} title="New Conversation" onClose=${() => { reset(); onClose(); }} actions=${actions}>
<div class="chat-new">
<div class="chat-new__type">
<div class="ext-chat-new">
<div class="ext-chat-new__type">
<label>
<input type="radio" name="convType" value="group"
checked=${type === 'group'} onChange=${() => { setType('group'); setSelected([]); }} />
@@ -685,14 +685,14 @@
</label>
</div>
${type === 'group' && html`
<input class="chat-new__title" type="text" value=${title}
<input class="ext-chat-new__title" type="text" value=${title}
placeholder="Conversation title (optional)"
onInput=${e => setTitle(e.target.value)} />`}
<${UserPicker} onSelect=${addUser} placeholder=${type === 'direct' ? 'Search for a user\u2026' : 'Add participants\u2026'} />
${selected.length > 0 && html`
<div class="chat-new__selected">
<div class="ext-chat-new__selected">
${selected.map(u => html`
<span key=${u.id} class="chat-new__chip">
<span key=${u.id} class="ext-chat-new__chip">
${u.display_name || u.username}
<button onClick=${() => removeSelected(u.id)}>\u00d7</button>
</span>`)}
@@ -807,27 +807,27 @@
var threadTitle = selectedConv ? (selectedConv.title || 'Direct Message') : '';
if (loading) {
return html`<div class="chat-loading"><${Spinner} /></div>`;
return html`<div class="ext-chat-loading"><${Spinner} /></div>`;
}
return html`
<div class="chat-app">
<div class="ext-chat-app">
<${Topbar} title="Chat">
${selectedId && html`
<span class="chat-topbar__thread-title">${threadTitle}</span>
<span class="ext-chat-topbar__thread-title">${threadTitle}</span>
<${Button} size="sm" variant="secondary"
onClick=${() => setShowParticipants(!showParticipants)}>
${showParticipants ? 'Hide' : 'People'}
<//>`}
<//>
<div class="chat-body">
<div class="ext-chat-body">
<${ConversationList}
selected=${selectedId}
onSelect=${selectConversation}
onNew=${() => setShowNew(true)}
conversations=${conversations}
unread=${unread} />
<div class="chat-main">
<div class="ext-chat-main">
<${MessageThread}
conversationId=${selectedId}
participants=${participants} />