我对聊天页面进行了一些简单的调整，以改进设计并使其感觉更流畅。以下是我所做的更改的概述：
- 移动了输入指示器：
我重新定位了输入指示器，使其现在显示在文本框上方而不是下方。这样感觉更自然，更容易注意到有人在输入。 - 增加了输入指示器的字体大小：
我稍微增大了输入指示器的字体大小。现在它更显眼，也更突出，方便一目了然地阅读。 - 优化了图片：
我移除了过去环绕图片的文档名称/URL，并为图片添加了一个小的圆角。这使得图片看起来更简洁、更精致，并消除了不必要的杂乱。 - 使输入指示器更具动态性：
我为输入指示器添加了一个小小的动态效果。现在，当它出现时，消息会向上轻微滑动以腾出空间，当指示器消失时，消息会向下滑动。这种平滑的过渡使整个体验感觉更流畅、更具交互性。
这些只是小的设计调整。对我来说，它看起来更简洁，感觉更流畅，并且总体上更加精致。请告诉我您的想法，并随时提出任何其他更改或改进建议！
这是代码：
// typing indicator
/* Add space below the replying indicator */
.chat-replying-indicator-container {
order: -1; /* Moves the replying indicator above the text area */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* Cover the container to preserve the border-radius */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* Rounded corners */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* Adjust the value as needed */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* Default position when not typing */
transition: margin-top 0.3s ease; /* Smooth transition */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* Position when typing */
}
附注：这主要是针对移动端的。
现在的样子是这样的：
