Skip to content

Commit 84d6dcc

Browse files
KilleaKillea
authored
Merge pull request #38 from bertheto/feat/ui-12-human-identity
UI-12: Human composer identity - avatar, localStorage, isHuman fix + UTF-8 emoji fixes
2 parents 6360ac2 + 2f6dc15 commit 84d6dcc

3 files changed

Lines changed: 66 additions & 19 deletions

File tree

‎src/static/css/main.css‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1697,25 +1697,42 @@ body[data-theme="light"] .msg-sys-admin-human-note-icon {
16971697
display: flex;
16981698
}
16991699

1700-
#compose-author {
1701-
background: var(--bg-input);
1702-
border: 1px solid var(--border-light);
1703-
color: var(--text-2);
1700+
#compose-author-wrap {
1701+
display: flex;
1702+
align-items: center;
1703+
gap: 4px;
1704+
padding: 4px 8px;
17041705
border-radius: 10px;
1705-
padding: 10px 14px;
1706-
font-size: 13.5px;
1707-
font-family: inherit;
1708-
width: 80px;
17091706
flex-shrink: 0;
1710-
text-align: center;
17111707
align-self: flex-start;
17121708
height: 42px;
17131709
box-sizing: border-box;
1710+
transition: border-color .15s;
1711+
}
1712+
1713+
#compose-author-wrap:focus-within {
1714+
border-color: var(--accent) !important;
1715+
}
1716+
1717+
#compose-author-avatar {
1718+
font-size: 18px;
1719+
line-height: 1;
1720+
flex-shrink: 0;
1721+
}
1722+
1723+
#compose-author {
1724+
background: transparent;
1725+
border: none;
1726+
color: var(--text-1);
1727+
font-size: 13.5px;
1728+
font-family: inherit;
1729+
width: 72px;
1730+
text-align: center;
1731+
box-sizing: border-box;
17141732
}
17151733

17161734
#compose-author:focus {
17171735
outline: none;
1718-
border-color: var(--accent);
17191736
}
17201737

17211738
#compose-input {
@@ -3049,4 +3066,4 @@ body.minimap-hidden #nav-sidebar {
30493066

30503067
@media (max-width: 1000px) {
30513068
#nav-sidebar { display: none; }
3052-
}
3069+
}

‎src/static/index.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
@@ -33,7 +33,7 @@
3333
<div class="status-label" id="status-label">Connected</div>
3434
<!-- <button id="btn-theme-toggle" type="button" onclick="toggleTheme()">Light</button> -->
3535
<!-- <button id="btn-settings" type="button" onclick="openSettingsModal()" title="MCP Server Settings"
36-
style="background: transparent; border: 1px solid var(--border-light); border-radius: 8px; font-size: 16px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-1); margin-left: 8px; transition: background 0.15s;">⚙️</button> -->
36+
style="background: transparent; border: 1px solid var(--border-light); border-radius: 8px; font-size: 16px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-1); margin-left: 8px; transition: background 0.15s;">☑️</button> -->
3737
<button id="btn-theme-toggle" type="button" title="Switch to light theme" aria-label="Switch theme" onclick="toggleTheme()">
3838
<!-- Sun icon — shown in dark mode (switch to light) -->
3939
<svg id="theme-icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -1064,7 +1064,7 @@
10641064
promptHeader.querySelector('.msg-sys-prompt-chevron').innerHTML = !expanded ? '&#9650;' : '&#9660;';
10651065
promptHeader.querySelector('.msg-sys-prompt-label').textContent = !expanded
10661066
? 'Thread Instructions (system)'
1067-
: 'Thread Instructions (system) — click to expand';
1067+
: 'Thread Instructions (system) u{2014} click to expand';
10681068
});
10691069

10701070
wrapper.appendChild(promptHeader);
@@ -1115,12 +1115,15 @@
11151115

11161116
const authorLabel = String(m.author_name ?? m.author ?? '').trim() || 'unknown';
11171117
const isSystem = String(m.role ?? '').toLowerCase() === 'system' || authorLabel.toLowerCase() === 'system';
1118-
const isHuman = authorLabel.toLowerCase() === 'human';
1118+
const isHuman = !m.author_id && (
1119+
authorLabel.toLowerCase() === 'human'
1120+
|| String(m.role ?? '').toLowerCase() === 'user'
1121+
);
11191122
const authorKey = isHuman ? 'human' : (isSystem ? 'system' : String(m.author_id ?? authorLabel));
11201123
const color = authorColor(authorKey);
11211124
const avatarEmoji = String(m.author_emoji || '').trim()
11221125
|| String(currentAgents?.find((a) => a.id === String(m.author_id ?? ''))?.emoji || '').trim()
1123-
|| (isHuman ? '👤' : (isSystem ? '⚙️' : '🤖'));
1126+
|| (isHuman ? '👤' : (isSystem ? '☑️' : '🤖'));
11241127
const bgAlpha = `${color}22`; // ~13% alpha tint for avatar bg
11251128
const isAgentMessage = !isHuman && !isSystem;
11261129
const sentAtLabel = fmtTime(m.created_at);
@@ -1400,7 +1403,7 @@
14001403

14011404
function getStateEmoji(state) {
14021405
const map = { 'Offline': '⚫', 'Waiting': '⏳', 'Active': '🟢' };
1403-
return map[state] || 'Γ¥ô';
1406+
return map[state] || '❓';
14041407
}
14051408

14061409
// ==============================================================================================
@@ -1435,7 +1438,7 @@
14351438
// Extras: thread state & close (REST shims)
14361439
// ==============================================================================================
14371440
// Extend the REST API with two extra POST endpoints that main.py may serve later.
1438-
// If they 404, we silently ignore ΓÇö the MCP tool path is the canonical way.
1441+
// If they 404, we silently ignore — the MCP tool path is the canonical way.
14391442

14401443
// ==============================================================================================
14411444
// Utilities

‎src/static/js/components/acb-compose-shell.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@
88
connectedCallback() {
99
if (this.childElementCount > 0) return;
1010

11+
const HUMAN_COLOR = '#fb923c';
12+
1113
this.innerHTML = `
1214
<div id="compose">
13-
<input id="compose-author" type="text" value="human" placeholder="author" />
15+
<div id="compose-author-wrap">
16+
<span id="compose-author-avatar">👤</span>
17+
<input id="compose-author" type="text" value="human" placeholder="name" />
18+
</div>
1419
<div style="flex: 1; display: flex; flex-direction: column; min-width: 0;">
1520
<div id="mentions-bar" style="display:none; padding: 5px; font-size: 0.85em; background: rgba(0,0,0,0.1); border-radius: 4px; margin-bottom: 5px;">
1621
<span id="mentioned-agents"></span>
@@ -22,6 +27,28 @@
2227
<button id="btn-send" onclick="sendMessage()" title="Send">➤</button>
2328
</div>`;
2429

30+
// Fix 2 — Persistance du nom via localStorage
31+
const authorInput = this.querySelector('#compose-author');
32+
if (authorInput) {
33+
const savedName = localStorage.getItem('acb-human-name');
34+
if (savedName) authorInput.value = savedName;
35+
authorInput.addEventListener('input', () => {
36+
const val = authorInput.value.trim();
37+
if (val) localStorage.setItem('acb-human-name', val);
38+
});
39+
}
40+
41+
// Fix 3 — Couleur orange du wrapper auteur
42+
const wrap = this.querySelector('#compose-author-wrap');
43+
const avatar = this.querySelector('#compose-author-avatar');
44+
if (wrap) {
45+
wrap.style.border = `1px solid ${HUMAN_COLOR}44`;
46+
wrap.style.borderRadius = '6px';
47+
}
48+
if (avatar) {
49+
avatar.style.color = HUMAN_COLOR;
50+
}
51+
2552
const input = this.querySelector('#compose-input');
2653
if (input) {
2754
input.addEventListener('input', () => this.updateMentions());

0 commit comments

Comments
 (0)