xenforo聊天新样式

岁暮流年 · 星期五，17:11

研究出来的聊天新样式，但是目前发送消息和接收消息刷新不正常，没有BB代码按钮区域，有能力的可以修复一下，

模板名称：conversation_view

模板代码：
<xf:css>
.chat-app {
display: flex;
height: 85vh;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
position: relative;
}

/* 左侧侧边栏 - 所有功能都放在这里 */
.chat-sidebar {
width: 280px;
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
border-right: 1px solid rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 10;
}

.sidebar-header {
padding: 24px 20px;
background: white;
border-bottom: 1px solid rgba(0,0,0,0.08);
}

.conversation-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
word-break: break-word;
line-height: 1.4;
}

.conversation-stats {
display: flex;
gap: 16px;
color: #666;
font-size: 13px;
}

.stat-item {
display: flex;
align-items: center;
gap: 6px;
}

.stat-item .fa {
color: #888;
}

.sidebar-sections {
flex: 1;
overflow-y: auto;
padding: 20px 0;
}

.sidebar-section {
margin-bottom: 28px;
}

.section-title {
font-size: 12px;
font-weight: 600;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0 20px 12px 20px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* 参与者列表 */
.participants-list {
padding: 0;
margin: 0;
}

.participant-item {
display: flex;
align-items: center;
padding: 12px 20px;
cursor: pointer;
transition: all 0.2s;
border-left: 3px solid transparent;
}

.participant-item:hover {
background: rgba(0,0,0,0.02);
border-left-color: var(--xf-palettePrimary1, #FF5733);
}

.participant-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.participant-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}

.participant-info {
flex: 1;
min-width: 0;
}

.participant-name {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.participant-title {
font-size: 12px;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 操作按钮 */
.sidebar-actions {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 20px;
}

.sidebar-button {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: white;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
font-size: 14px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.sidebar-button:hover {
background: #f8f9fa;
border-color: var(--xf-palettePrimary1, #FF5733);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,123,255,0.15);
text-decoration: none;
}

.sidebar-button.primary {
background: linear-gradient(135deg, var(--xf-palettePrimary1, #FF5733), var(--xf-palettePrimary2, #FF5733));
color: white;
border: none;
}

.sidebar-button.primary:hover {
background: linear-gradient(135deg, var(--xf-palettePrimary2, #FF5733), var(--xf-palettePrimary3, #FF5733));
box-shadow: 0 4px 12px rgba(0,123,255,0.25);
}

.sidebar-button .fa {
width: 20px;
text-align: center;
font-size: 16px;
}

/* 对话信息 */
.conversation-info-grid {
padding: 0 20px;
}

.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
}

.info-row:last-child {
border-bottom: none;
}

.info-label {
font-size: 13px;
color: #666;
}

.info-value {
font-size: 13px;
font-weight: 500;
color: #1a1a1a;
max-width: 60%;
text-align: right;
}

/* 右侧主聊天区域 */
.chat-main {
flex: 1;
display: flex;
flex-direction: column;
background: #fafafa;
position: relative;
}

/* 聊天消息区域 */
.chat-messages-container {
flex: 1;
overflow-y: auto;
padding: 24px;
position: relative;
background: #fafafa;
}

/* 消息列表 */
.messages-list {
display: flex;
flex-direction: column;
gap: 20px;
}

/* 消息项 */
.message-item {
display: flex;
animation: messageAppear 0.3s ease;
}

@keyframes messageAppear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* 他人消息（左侧） */
.message-item.other-message {
justify-content: flex-start;
}

.message-item.other-message .message-avatar {
order: 1;
margin-right: 12px;
}

.message-item.other-message .message-content-wrapper {
order: 2;
max-width: 70%;
}

.message-item.other-message .message-content {
background: white;
border-radius: 18px 18px 18px 4px;
padding: 16px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.08);
position: relative;
}

.message-item.other-message .message-content:before {
content: '';
position: absolute;
left: -8px;
top: 16px;
width: 16px;
height: 16px;
background: white;
border-left: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
transform: rotate(45deg);
z-index: 1;
}

/* 自己消息（右侧） */
.message-item.my-message {
justify-content: flex-end;
}

.message-item.my-message .message-avatar {
order: 2;
margin-left: 12px;
}

.message-item.my-message .message-content-wrapper {
order: 1;
max-width: 70%;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.message-item.my-message .message-content {
background: linear-gradient(135deg, var(--xf-palettePrimary1, #FF5733), var(--xf-palettePrimary2, #FF5733));
color: white;
border-radius: 18px 18px 4px 18px;
padding: 16px 20px;
box-shadow: 0 2px 12px rgba(0,123,255,0.2);
border: 1px solid var(--xf-palettePrimary1, #FF5733);
position: relative;
}

.message-item.my-message .message-content:before {
content: '';
position: absolute;
right: -8px;
top: 16px;
width: 16px;
height: 16px;
background: var(--xf-palettePrimary1, #FF5733);
border-right: 1px solid var(--xf-palettePrimary1, #FF5733);
border-bottom: 1px solid var(--xf-palettePrimary1, #FF5733);
transform: rotate(-45deg);
z-index: 1;
}

/* 消息头像 */
.message-avatar {
width: 40px;
height: 40px;
flex-shrink: 0;
}

.message-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 消息元信息 */
.message-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}

.message-sender {
font-size: 14px;
font-weight: 600;
}

.message-item.other-message .message-sender {
color: #333;
}

.message-item.my-message .message-sender {
color: white;
}

.message-time {
font-size: 12px;
opacity: 0.8;
}

.message-item.other-message .message-time {
color: #666;
}

.message-item.my-message .message-time {
color: rgba(255,255,255,0.9);
}

/* 消息文本 */
.message-text {
font-size: 15px;
line-height: 1.6;
word-wrap: break-word;
}

.message-item.other-message .message-text {
color: #333;
}

.message-item.my-message .message-text {
color: white;
}

/* 修复：确保消息文本中的BBCode图片正确显示 */
.message-text .bbImageWrapper,
.message-text .bbImage {
max-width: 100% !important;
max-height: 400px !important;
height: auto !important;
width: auto !important;
border-radius: 8px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
margin: 8px 0 !important;
display: block !important;
}

.message-item.my-message .message-text .bbImageWrapper,
.message-item.my-message .message-text .bbImage {
border-color: rgba(255,255,255,0.3) !important;
}

/* 修复：确保所有图片元素都正确显示 */
.message-text img,
.message-text .bbImage,
.message-text .bbImageWrapper img {
max-width: 100% !important;
max-height: 400px !important;
height: auto !important;
border-radius: 8px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
margin: 8px 0 !important;
display: block !important;
}

.message-item.my-message .message-text img,
.message-item.my-message .message-text .bbImage,
.message-item.my-message .message-text .bbImageWrapper img {
border-color: rgba(255,255,255,0.3) !important;
}

/* 修复：确保消息中的内联图片正确显示 */
.message-text .inlineImage {
max-width: 100% !important;
max-height: 400px !important;
height: auto !important;
border-radius: 6px !important;
border: 1px solid rgba(0,0,0,0.1) !important;
margin: 4px !important;
vertical-align: middle !important;
}

/* 消息中的链接 */
.message-item.my-message .message-text a {
color: white !important;
text-decoration: underline;
border-bottom: 1px solid rgba(255,255,255,0.3);
}

.message-item.my-message .message-text a:hover {
border-bottom: 1px solid white;
}

/* 消息附件 - 修复图片显示问题 */
.message-attachments {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.attachment-item {
display: inline-block;
max-width: 100%;
}

/* 附件图片修复 */
.attachment-image {
max-width: 100%;
max-height: 400px;
width: auto;
height: auto;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
transition: transform 0.2s;
display: block;
}

.attachment-image:hover {
transform: scale(1.02);
}

/* 附件链接 */
.attachment-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #f8f9fa;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
color: #333;
text-decoration: none;
transition: all 0.2s;
}

.attachment-link:hover {
background: #e9ecef;
border-color: var(--xf-palettePrimary1, #FF5733);
text-decoration: none;
}

/* 输入框区域 - 浮动在聊天记录上方 */
.chat-input-area {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: white;
border-top: 1px solid rgba(0,0,0,0.08);
padding: 20px;
z-index: 100;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
margin-top: 20px;
}

/* 输入框容器 */
.input-container {
position: relative;
}

/* 文本输入框 */
.message-input {
width: 100%;
min-height: 100px;
max-height: 300px;
padding: 20px 70px 20px 20px;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 12px;
font-size: 15px;
line-height: 1.6;
resize: none;
background: white;
transition: all 0.2s;
font-family: inherit;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.message-input:focus {
outline: none;
border-color: var(--xf-palettePrimary1, #FF5733);
background: white;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1), 0 4px 12px rgba(0,0,0,0.08);
}

/* 发送按钮 */
.send-button {
position: absolute;
right: 20px;
bottom: 20px;
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--xf-palettePrimary1, #FF5733), var(--xf-palettePrimary2, #FF5733));
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.send-button:hover {
background: linear-gradient(135deg, var(--xf-palettePrimary2, #FF5733), var(--xf-palettePrimary3, #FF5733));
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0,123,255,0.4);
}

.send-button:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.send-button .fa {
font-size: 18px;
}

/* 输入工具栏 */
.input-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(0,0,0,0.06);
}

.toolbar-button {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #f8f9fa;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 8px;
font-size: 14px;
color: #666;
cursor: pointer;
transition: all 0.2s;
}

.toolbar-button:hover {
background: #e9ecef;
color: #333;
border-color: rgba(0,0,0,0.12);
}

.toolbar-button .fa {
font-size: 14px;
}

/* 多引用按钮 */
.multi-quote-button {
margin-left: auto;
}

/* 附件上传区域 */
.attachment-editor {
margin-top: 16px;
padding: 16px;
background: #f8f9fa;
border-radius: 10px;
border: 1px dashed rgba(0,0,0,0.12);
}

.attachment-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}

.attachment-thumbnail {
position: relative;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.08);
}

.attachment-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.remove-attachment {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: rgba(0,0,0,0.6);
color: white;
border: none;
border-radius: 50%;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}

.remove-attachment:hover {
background: rgba(0,0,0,0.8);
transform: scale(1.1);
}

/* 关闭对话提示 */
.conversation-closed {
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #fff8e6, #fff0cc);
border: 1px solid #ffd591;
border-radius: 12px;
margin: 20px;
color: #d46b08;
font-weight: 500;
box-shadow: 0 2px 8px rgba(212,107,8,0.1);
}

/* 隐藏原有的动作栏和分页 */
.actionBar-set,
.actionBar-set--external,
.block-outer,
.pagenav-page {
display: none !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
.chat-app {
height: 100vh;
border-radius: 0;
flex-direction: column;
}

.chat-sidebar {
position: fixed;
left: -280px;
top: 0;
bottom: 0;
width: 280px;
z-index: 1001;
box-shadow: 2px 0 20px rgba(0,0,0,0.15);
}

.chat-sidebar.active {
left: 0;
}

.chat-main {
width: 100%;
}

.mobile-menu-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: white;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 10px;
position: absolute;
left: 20px;
top: 20px;
z-index: 1000;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
backdrop-filter: blur(2px);
}

.mobile-overlay.active {
display: block;
}

.message-content-wrapper {
max-width: 80% !important;
}

.message-text img,
.message-text .bbImage,
.message-text .bbImageWrapper,
.message-text .bbImageWrapper img,
.attachment-image {
max-height: 300px !important;
}

.chat-input-area {
padding: 16px;
}
}

@media (min-width: 769px) {
.mobile-menu-toggle,
.mobile-overlay {
display: none !important;
}
}

/* 滚动条美化 */
.chat-messages-container::-webkit-scrollbar {
width: 8px;
}

.chat-messages-container::-webkit-scrollbar-track {
background: rgba(0,0,0,0.03);
border-radius: 4px;
}

.chat-messages-container::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
border-radius: 4px;
}

.chat-messages-container::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.2);
}

.sidebar-sections::-webkit-scrollbar {
width: 6px;
}

.sidebar-sections::-webkit-scrollbar-track {
background: transparent;
}

.sidebar-sections::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
border-radius: 3px;
}

.sidebar-sections::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.2);
}
</xf:css>

<xf:title page="{$page}">{$conversation.title}</xf:title>

<xf:description meta="false">
<div style="display: none">
<span><xf:fa icon="fa-users" /> {$conversation.recipient_count|number} {{ phrase('participants') }}</span>
<span><xf:fa icon="fa-comments" /> {$conversation.reply_count|number} {{ phrase('replies') }}</span>
<span><xf:fa icon="fa-clock" /> <xf:date time="{$conversation.start_date}" /></span>
</div>
</xf:description>

<div class="chat-app">

<button class="mobile-menu-toggle" id="mobileMenuToggle">
<xf:fa icon="fa-bars" />
</button>
<div class="mobile-overlay" id="mobileOverlay"></div>


<div class="chat-sidebar" id="chatSidebar">
<div class="sidebar-header">
<h2 class="conversation-title">{$conversation.title}</h2>
<div class="conversation-stats">
<div class="stat-item">
<xf:fa icon="fa-users" />
<span>{$conversation.recipient_count|number} {{ phrase('participants') }}</span>
</div>
<div class="stat-item">
<xf:fa icon="fa-comments" />
<span>{$conversation.reply_count|number} {{ phrase('replies') }}</span>
</div>
</div>
</div>

<div class="sidebar-sections">

<div class="sidebar-section">
<h3 class="section-title">{{ phrase('conversation_info') }}</h3>
<div class="conversation-info-grid">
<div class="info-row">
<span class="info-label">{{ phrase('started_by') }}</span>
<span class="info-value"><xf:username user="$conversation.Starter" defaultname="{$conversation.username}" /></span>
</div>
<div class="info-row">
<span class="info-label">{{ phrase('start_date') }}</span>
<span class="info-value"><xf:date time="{$conversation.start_date}" /></span>
</div>
<div class="info-row">
<span class="info-label">{{ phrase('最后回复') }}</span>
<span class="info-value"><xf:date time="$conversation.last_message_date" /></span>
</div>
<div class="info-row">
<span class="info-label">{{ phrase('last_reply_from') }}</span>
<span class="info-value">
<xf:if is="$conversation.LastMessageUser">
<xf:username user="$conversation.LastMessageUser" />
<xf:else />
--
</xf:if>
</span>
</div>
</div>
</div>


<div class="sidebar-section">
<h3 class="section-title">{{ phrase('participants') }} ({$conversation.recipient_count|number})</h3>
<ul class="participants-list">
<xf:foreach loop="$recipients" value="$recipient">
<li class="participant-item">
<div class="participant-avatar">
<xf:avatar user="{$recipient.User}" size="xs" />
</div>
<div class="participant-info">
<div class="participant-name">
<xf:if is="$recipient.User">
<xf:username user="$recipient.User" rich="true" />
<xf:else />
{{ phrase('unknown_member') }}
</xf:if>
</div>
<div class="participant-title">
<xf:if is="$recipient.User">
<xf:usertitle user="$recipient.User" />
<xf:else />
{{ phrase('guest_participant') }}
</xf:if>
</div>
</div>
</li>
</xf:foreach>
</ul>
</div>


<div class="sidebar-section">
<h3 class="section-title">{{ phrase('actions') }}</h3>
<div class="sidebar-actions">
<xf:if is="$conversation.canEdit()">
<a href="{{ link('conversations/edit', $conversation) }}" class="sidebar-button" data-xf-click="overlay">
<xf:fa icon="fa-edit" />
{{ phrase('edit_conversation') }}
</a>
</xf:if>

<xf:button href="{{ link('conversations/star', $conversation) }}" class="sidebar-button" overlay="true">
<xf:if is="{$userConv.is_starred}">
<xf:fa icon="fa-star" />
{{ phrase('unstar') }}
<xf:else />
<xf:fa icon="fa-star-o" />
{{ phrase('star') }}
</xf:if>
</xf:button>

<xf:button href="{{ link('conversations/mark-unread', $conversation) }}" class="sidebar-button" overlay="true">
<xf:if is="{$userConv.is_unread}">
<xf:fa icon="fa-envelope-open" />
{{ phrase('mark_read') }}
<xf:else />
<xf:fa icon="fa-envelope-o" />
{{ phrase('mark_unread') }}
</xf:if>
</xf:button>

<xf:button href="{{ link('conversations/leave', $conversation) }}" class="sidebar-button" overlay="true">
<xf:fa icon="fa-sign-out" />
{{ phrase('leave_conversation') }}
</xf:button>

<xf:if is="$conversation.canInvite()">
<a href="{{ link('conversations/invite', $conversation) }}" class="sidebar-button primary" data-xf-click="overlay">
<xf:fa icon="fa-user-plus" />
{{ phrase('invite_more') }}
</a>
</xf:if>
</div>
</div>
</div>
</div>


<div class="chat-main">

<div class="chat-messages-container" id="chatMessages">
<div class="messages-list">

<xf:foreach loop="$messages" value="$message">
<div class="message-item {{ $message.user_id == $xf.visitor.user_id ? 'my-message' : 'other-message' }}">
<div class="message-avatar">
<xf:avatar user="{$message.User}" size="xs" />
</div>

<div class="message-content-wrapper">
<div class="message-content">
<div class="message-meta">
<span class="message-sender">


</span>


<div class="message-text">
{{ bb_code($message.message, 'conversation_message', $message, {
'attachments': $message.Attachments,
'viewAttachments': true
}) }}
</div>
<span class="message-time">
<xf:date time="{$message.message_date}" />
</span>
</div>


<xf:if is="$message.Attachments">
<div class="message-attachments">
<xf:foreach loop="$message.Attachments" value="$attachment">
<div class="attachment-item">
<xf:if is="$attachment.is_image">
<a href="{{ link('attachments', $attachment) }}"
data-attachment-id="{$attachment.attachment_id}"
target="_blank"
class="lightbox"
data-caption="{$attachment.filename}">
<img src="{{ link('attachments', $attachment) }}"
alt="{$attachment.filename}"
class="attachment-image" />
</a>
<xf:else />
<a href="{{ link('attachments', $attachment) }}"
data-attachment-id="{$attachment.attachment_id}"
target="_blank"
class="attachment-link">
<xf:fa icon="fa-paperclip" />
<span>{$attachment.filename} ({$attachment.file_size|file_size})</span>
</a>
</xf:if>
</div>
</xf:foreach>
</div>
</xf:if>
</div>
</div>
</div>
</xf:foreach>
</div>
</div>


<xf:if is="!$conversation.conversation_open">
<div class="conversation-closed">
<xf:fa icon="fa-lock" /> {{ phrase('this_conversation_is_closed_for_new_replies') }}
</div>
</xf:if>


<xf:if is="$conversation.canReply()">
<div class="chat-input-area">
<xf:form action="{{ link('conversations/add-reply', $conversation) }}"
ajax="true"
draft="{{ link('conversations/draft', $conversation) }}"
class="block js-quickReply"
data-xf-init="attachment-manager quick-reply"
id="chatForm">

<xf:js src="xf/message.js" min="1" />
<xf:set var="$lastMessage" value="{$messages|last}" />

<div class="input-container">


<xf:textarea name="message"
value="{$conversation.draft_reply.message}"
class="message-input"
placeholder="{{ phrase('文明上网，理性发言') }}"
rows="4"
data-xf-init="wysiwyg"
data-min-height="100"
data-auto-focus="true"
id="chatInput" />


<button type="submit" class="send-button" id="sendButton">
<xf:fa icon="fa-paper-plane" />
</button>
</div>


<xf:macro template="attachment_editor_macros" name="attachment_editor"
arg-attachmentData="{$attachmentData}"
arg-forceHash="{$conversation.draft_reply.attachment_hash}" />


<div class="input-toolbar">


<xf:macro template="quick_reply_macros" name="attachments_button" />


<xf:macro template="quick_reply_macros" name="formatting_buttons" />

<xf:if is="$xf.options.multiQuote">
<button type="button" class="toolbar-button multi-quote-button" onclick="XF.ajax('GET', '{{ link('conversations/multi-quote', $conversation) }}', null, {overlay: true})">
<xf:fa icon="fa-quote-right" />
{{ phrase('multi_quote') }}
</button>
</xf:if>
</div>

<xf:hiddenval name="last_date">{$lastMessage.message_date}</xf:hiddenval>
<xf:if is="$xf.options.multiQuote">
<xf:hiddenval name="_xfWithData">1</xf:hiddenval>
</xf:if>
</xf:form>
</div>
</xf:if>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// 自动滚动到最新消息
const chatMessages = document.getElementById('chatMessages');
if (chatMessages) {
setTimeout(() => {
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 100);
}

// 移动端侧边栏控制
const sidebar = document.getElementById('chatSidebar');
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
const mobileOverlay = document.getElementById('mobileOverlay');

if (mobileMenuToggle && mobileOverlay) {
mobileMenuToggle.addEventListener('click', function() {
sidebar.classList.add('active');
mobileOverlay.classList.add('active');
document.body.style.overflow = 'hidden';
});

mobileOverlay.addEventListener('click', function() {
sidebar.classList.remove('active');
this.classList.remove('active');
document.body.style.overflow = '';
});

// ESC键关闭侧边栏
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && sidebar.classList.contains('active')) {
sidebar.classList.remove('active');
mobileOverlay.classList.remove('active');
document.body.style.overflow = '';
}
});
}

// 响应式调整
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
sidebar.classList.remove('active');
if (mobileOverlay) mobileOverlay.classList.remove('active');
document.body.style.overflow = '';
}
});

// 输入框高度自适应
const textarea = document.getElementById('chatInput');
if (textarea) {
textarea.addEventListener('input', function() {
this.style.height = 'auto';
const newHeight = Math.min(this.scrollHeight, 300);
this.style.height = newHeight + 'px';

// 调整发送按钮位置
const sendButton = document.getElementById('sendButton');
if (sendButton) {
sendButton.style.bottom = '20px';
}
});

// 初始调整
setTimeout(() => {
textarea.dispatchEvent(new Event('input'));
}, 100);
}

// 发送消息逻辑
const chatForm = document.getElementById('chatForm');
const sendButton = document.getElementById('sendButton');

if (chatForm && sendButton) {
// 监听输入框变化，启用/禁用发送按钮
if (textarea) {
textarea.addEventListener('input', function() {
const hasContent = this.value.trim().length > 0;
sendButton.disabled = !hasContent;
});

// 初始检查
sendButton.disabled = !textarea.value.trim();
}

// 发送消息后清空输入框
chatForm.addEventListener('ajax-submit:success', function(e) {
// 清空输入框
if (textarea) {
textarea.value = '';
textarea.style.height = '100px';

// 清空WYSIWYG编辑器
if (typeof XF !== 'undefined' && XF.Editor) {
const editor = XF.Editor.getEditor(textarea);
if (editor) {
editor.setContent('');
}
}

// 禁用发送按钮
sendButton.disabled = true;
}

// 滚动到最新消息
setTimeout(() => {
if (chatMessages) {
chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 重新加载页面获取新消息
setTimeout(() => {
XF.reload();
}, 500);
}, 300);
});

// 键盘快捷键：Ctrl+Enter 发送
if (textarea) {
textarea.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 'Enter' && !sendButton.disabled) {
e.preventDefault();
sendButton.click();
}
});
}
}

// 初始化WYSIWYG编辑器
if (typeof XF !== 'undefined' && XF.Element) {
const editor = document.querySelector('[data-xf-init="wysiwyg"]');
if (editor) {
XF.Element.getHandler(editor, 'wysiwyg');
}
}

// 处理附件上传
const attachmentForms = document.querySelectorAll('[data-xf-init~="attachment-manager"]');
if (attachmentForms.length && typeof XF !== 'undefined' && XF.Element) {
attachmentForms.forEach(form => {
XF.Element.getHandler(form, 'attachment-manager');
});
}

// 初始化图片灯箱效果
if (typeof XF !== 'undefined' && XF.Lightbox) {
const lightboxLinks = document.querySelectorAll('.lightbox');
lightboxLinks.forEach(link => {
XF.Lightbox.registerLink(link);
});
}

// 修复：确保所有图片正确显示并调整大小
setTimeout(function() {
const images = document.querySelectorAll('.message-text img, .message-text .bbImage, .attachment-image');
images.forEach(function(img) {
// 移除任何固定的宽度/高度样式
img.style.width = '';
img.style.height = '';
img.style.maxWidth = '100%';
img.style.maxHeight = '400px';

// 添加加载完成后的调整
img.onload = function() {
this.style.width = '';
this.style.height = '';
this.style.maxWidth = '100%';
this.style.maxHeight = '400px';
};
});
}, 500);
});
</script>

xenforo聊天新样式

岁暮流年

相似主题

我们非常重视您的隐私