UI fixes: svg attach icon, empty bubble, layout polish
This commit is contained in:
1504
package-lock.json
generated
Normal file
1504
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -660,6 +660,14 @@ function renderMessages() {
|
|||||||
|
|
||||||
renderMessageContent(row.querySelector('.message-content'), message);
|
renderMessageContent(row.querySelector('.message-content'), message);
|
||||||
|
|
||||||
|
// 用户消息内容为空时隐藏气泡(如纯附件消息)
|
||||||
|
if (message.role === 'user') {
|
||||||
|
const contentEl = row.querySelector('.message-content');
|
||||||
|
if (!contentEl.children.length && !contentEl.textContent.trim()) {
|
||||||
|
contentEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const attachmentWrap = row.querySelector('.message-attachments');
|
const attachmentWrap = row.querySelector('.message-attachments');
|
||||||
if (message.attachments?.length) {
|
if (message.attachments?.length) {
|
||||||
message.attachments.forEach((file) => {
|
message.attachments.forEach((file) => {
|
||||||
|
|||||||
@@ -72,7 +72,11 @@
|
|||||||
<div id="attachmentList" class="attachment-list"></div>
|
<div id="attachmentList" class="attachment-list"></div>
|
||||||
<textarea id="messageInput" placeholder="给 NekoAI 发消息" rows="1"></textarea>
|
<textarea id="messageInput" placeholder="给 NekoAI 发消息" rows="1"></textarea>
|
||||||
<div class="composer-bottom compact-composer-bottom">
|
<div class="composer-bottom compact-composer-bottom">
|
||||||
<label for="fileInput" id="attachBtn" class="attach-btn" aria-label="添加文件">+</label>
|
<label for="fileInput" id="attachBtn" class="attach-btn" aria-label="添加文件">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
<div class="composer-hint">支持图片、文档、压缩包等</div>
|
<div class="composer-hint">支持图片、文档、压缩包等</div>
|
||||||
<div class="composer-actions single-line-actions">
|
<div class="composer-actions single-line-actions">
|
||||||
<button type="submit" id="sendBtn" class="send-btn compact-send-btn">发送</button>
|
<button type="submit" id="sendBtn" class="send-btn compact-send-btn">发送</button>
|
||||||
|
|||||||
@@ -354,7 +354,7 @@ body.theme-light .send-btn {
|
|||||||
|
|
||||||
.message-row { display: flex; gap: 14px; padding: 12px 0; }
|
.message-row { display: flex; gap: 14px; padding: 12px 0; }
|
||||||
.user-row { justify-content: flex-end; }
|
.user-row { justify-content: flex-end; }
|
||||||
.user-row .message-bubble { max-width: min(78%, 680px); }
|
.user-row .message-bubble { max-width: min(78%, 680px); align-self: flex-end; }
|
||||||
.assistant-row .message-bubble { max-width: min(78%, 680px); }
|
.assistant-row .message-bubble { max-width: min(78%, 680px); }
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
@@ -376,9 +376,12 @@ body.theme-light .avatar.user { background: #dfe3ea; color: #111; }
|
|||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 18px 18px 4px 18px;
|
border-radius: 18px 18px 4px 18px;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
display: inline-block;
|
display: block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
.user-row .message-bubble .message-content:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.message-role { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
|
.message-role { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
|
||||||
.user-row .message-role { text-align: right; }
|
.user-row .message-role { text-align: right; }
|
||||||
.assistant-row { background: none; }
|
.assistant-row { background: none; }
|
||||||
@@ -587,7 +590,7 @@ body.theme-light .md-pre { background: #f3f4f6; border-color: rgba(15,23,42,.08)
|
|||||||
}
|
}
|
||||||
.topbar {
|
.topbar {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 2px 12px 6px;
|
padding: 10px 12px 6px;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
.topbar-mobile-row { gap: 8px; }
|
.topbar-mobile-row { gap: 8px; }
|
||||||
@@ -681,6 +684,9 @@ body.theme-light .md-pre { background: #f3f4f6; border-color: rgba(15,23,42,.08)
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
display: inline-grid;
|
||||||
|
place-items: center;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
.single-line-actions {
|
.single-line-actions {
|
||||||
|
|||||||
Reference in New Issue
Block a user