.chat-window-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
}
.chat-window {
display: flex;
flex-direction: column;
height: 100vh;
/* 使用视口高度 */
overflow: hidden;
/* 防止出现双滚动条 */
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #eaeaea;
background-color: #fff;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.chat-title {
margin: 0;
font-size: 18px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
display: flex;
flex-direction: column;
}
.model-info {
color: #666;
font-size: 13px;
opacity: 0.8;
margin-top: 4px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
background-color: #fff;
height: calc(100vh - 140px);
/* 减去头部和输入框的高度 */
overflow-scrolling: touch;
/* 改善移动设备上的滚动 */
-webkit-overflow-scrolling: touch;
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.empty-messages {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
color: #999;
}
.message-item {
display: flex;
margin-bottom: 24px;
position: relative;
transition: all 0.3s ease;
padding: 0 4px;
max-width: 90%;
/* 限制消息宽度 */
}
/* 用户消息靠右对齐 */
.user-message {
flex-direction: row-reverse;
margin-left: auto;
/* 使用户消息靠右 */
}
/* AI消息靠左对齐 */
.ai-message {
margin-right: auto;
/* 使AI消息靠左 */
}
/* 移除悬停时的上浮效果 */
.message-item:hover {
/* transform: translateY(-2px); */
}
.message-avatar {
margin-right: 12px;
flex-shrink: 0;
}
/* 用户消息头像在右侧，需要调整margin */
.user-message .message-avatar {
margin-right: 0;
margin-left: 12px;
}
.user-avatar {
background-color: #1677ff;
}
.ai-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background-color: #f0f7ff;
border: 1px solid #e6f0ff;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.ai-avatar::before {
display: none;
/* 移除之前的背景效果 */
}
.ai-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
/* 使用cover可以填充整个区域，但会裁剪超出部分 */
background-color: #ffffff;
}
.ai-avatar .anticon {
font-size: 20px;
color: #1677ff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.message-content {
flex: 1;
background-color: #f4f6f8;
border-radius: 16px;
padding: 14px 18px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
max-width: calc(100% - 60px);
margin-right: 4px;
position: relative;
}
/* 用户消息气泡样式 */
.user-message .message-content {
background-color: #e3f2fd;
border-radius: 16px 16px 4px 16px;
margin-right: 0;
margin-left: 4px;
border-left: none;
border-right: none;
box-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
}
/* AI消息气泡样式 */
.ai-message .message-content {
background-color: #f0f7ff;
border-radius: 4px 16px 16px 16px;
border-left: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.message-header {
display: flex;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
}
/* 用户消息头部右对齐 */
.user-message .message-header {
flex-direction: row-reverse;
}
.message-sender {
font-weight: 500;
font-size: 14px;
margin-right: 8px;
color: #333;
}
/* 用户消息发送者名称右对齐 */
.user-message .message-sender {
margin-right: 0;
margin-left: 8px;
}
.message-provider {
font-size: 12px;
color: #666;
background-color: #f0f0f0;
padding: 2px 8px;
border-radius: 12px;
margin-right: 8px;
border: 1px solid #e6e6e6;
}
.user-message .message-sender {
color: #1677ff;
}
.ai-message .message-sender {
color: #1677ff;
}
.message-time {
font-size: 12px;
color: #999;
margin-left: auto;
}
/* 用户消息时间左对齐 */
.user-message .message-time {
margin-left: 0;
margin-right: auto;
}
.message-text {
font-size: 14px;
line-height: 1.6;
word-break: break-word;
overflow-wrap: break-word;
}
.message-text pre {
background-color: #1e1e1e;
padding: 12px;
border-radius: 6px;
margin: 10px 0;
overflow-x: auto;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
font-size: 13px;
line-height: 1.45;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* 语法高亮相关样式 */
.message-text pre > div {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
border: none !important;
}
.message-text code {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
font-size: 85%;
}
.message-text p {
margin-bottom: 0.8em;
}
.message-text p:last-child {
margin-bottom: 0;
}
.message-text ul,
.message-text ol {
padding-left: 1.5em;
margin-bottom: 1em;
}
.message-text h1,
.message-text h2,
.message-text h3,
.message-text h4,
.message-text h5,
.message-text h6 {
margin: 1.2em 0 0.8em;
line-height: 1.25;
}
.message-text h1 {
font-size: 1.5em;
}
.message-text h2 {
font-size: 1.3em;
}
.message-text h3 {
font-size: 1.15em;
}
.message-text img {
max-width: 100%;
border-radius: 4px;
}
.message-text table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}
.message-text th,
.message-text td {
border: 1px solid #ddd;
padding: 8px 12px;
}
.message-text th {
background-color: rgba(0, 0, 0, 0.04);
font-weight: 600;
}
.error-message {
color: #f5222d;
font-style: italic;
}
.chat-input-container {
background-color: #fff;
padding: 16px 20px;
border-top: 1px solid #eaeaea;
position: sticky;
bottom: 0;
z-index: 10;
flex-shrink: 0;
box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.07);
}
.input-wrapper {
position: relative;
width: 100%;
}
.chat-input-container .ant-input {
width: 100%;
resize: none;
padding: 14px 18px;
padding-right: 110px;
/* 为按钮留出空间 */
border-radius: 12px;
min-height: 96px !important;
font-size: 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
line-height: 1.6;
letter-spacing: 0.01em;
}
.chat-input-container .ant-input:hover {
border-color: #4096ff;
box-shadow: 0 2px 8px rgba(64, 150, 255, 0.1);
}
.chat-input-container .ant-input:focus {
box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
border-color: #1677ff;
}
.input-actions {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
align-items: center;
}
.send-button,
.stop-button {
border-radius: 8px;
height: 40px;
min-width: 90px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-weight: 500;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.send-button {
background-color: #1677ff;
border-color: #1677ff;
}
.send-button:hover {
background-color: #4096ff;
border-color: #4096ff;
transform: translateY(-1px);
}
.stop-button {
background-color: #ff4d4f;
border-color: #ff4d4f;
}
.stop-button:hover {
background-color: #ff7875;
border-color: #ff7875;
transform: translateY(-1px);
}
.input-actions .anticon {
margin-right: 6px;
font-size: 16px;
}
.empty-chat-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #fff;
padding: 20px;
}
.empty-chat-content {
text-align: center;
color: #999;
max-width: 400px;
}
.model-selector {
display: flex;
align-items: center;
}
.model-selector .ant-select {
min-width: 180px;
}
/* 添加新的消息内容块样式 */
.message-content-blocks {
display: flex;
flex-direction: column;
gap: 12px;
animation: slideIn 0.4s ease-out;
}
.message-main-content {
width: 100%;
animation: fadeIn 0.6s ease;
padding: 2px 0;
position: relative;
}
.message-pending-indicator {
margin-top: 8px;
display: flex;
justify-content: center;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-error-content {
background-color: #fff2f0;
border-radius: 4px;
padding: 8px 12px;
color: #f5222d;
border-left: 3px solid #f5222d;
margin-top: 8px;
font-size: 14px;
animation: errorPulse 2s infinite;
}
@keyframes errorPulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
}
70% {
box-shadow: 0 0 0 6px rgba(255, 77, 79, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
}
}
.reasoning-collapse {
margin-top: 12px;
border-top: 1px dashed #d9e8f6;
padding-top: 8px;
background-color: rgba(240, 249, 255, 0.6);
border-radius: 10px;
transition: all 0.3s ease;
box-shadow: 0 1px 5px rgba(0, 118, 255, 0.05);
}
.reasoning-collapse:hover {
background-color: rgba(240, 249, 255, 0.8);
}
.reasoning-header {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #1677ff;
font-size: 15px;
padding: 4px 0;
}
.reasoning-spinner {
margin-left: 8px;
}
.reasoning-content {
font-size: 1em;
color: #666666;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.7;
transition: all 0.3s;
max-height: 400px;
overflow-y: auto;
padding: 12px 16px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.85);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
letter-spacing: 0.015em;
text-indent: 1em;
margin-left: 8px;
}
.reasoning-content.pending {
color: #1890ff;
background-color: #e6f7ff;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(24, 144, 255, 0.1);
}
.reasoning-content.error {
color: #ff4d4f;
background-color: #fff2f0;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(255, 77, 79, 0.1);
}
.reasoning-content.success {
color: #666666;
}
/* 流式显示效果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* 全局加载状态指示器 */
.global-loading-indicator {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 复制按钮样式 */
.copy-button {
color: #8c8c8c;
background: transparent;
border: none;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.copy-button:hover {
color: #1677ff;
background-color: rgba(22, 119, 255, 0.1);
}
.message-item:hover .copy-button {
visibility: visible;
opacity: 1;
}
/* 消息底部样式 */
.message-footer {
display: flex;
justify-content: flex-end;
margin-top: 8px;
opacity: 0;
transition: opacity 0.2s ease;
}
.user-message .message-footer {
justify-content: flex-start;
}
.message-item:hover .message-footer {
opacity: 1;
}
/* 头部操作区域样式 */
.chat-actions {
display: flex;
align-items: center;
gap: 8px;
}
.chat-actions .ant-btn {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
}
.chat-actions .ant-btn:hover {
background-color: #e6f7ff;
border-color: #1677ff;
color: #1677ff;
transform: translateY(-1px);
}
/* 调整消息文本对齐方式 */
.user-message .message-text {
text-align: left;
}
/* 代码块包装器 */
.code-block-wrapper {
position: relative;
margin: 10px 0;
}
/* 代码块头部 */
.code-block-header {
background-color: #2d2d2d;
color: #d4d4d4;
padding: 6px 12px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #3e3e3e;
}
/* 代码语言标签 */
.code-language {
text-transform: uppercase;
font-weight: 600;
color: #c2c2c2;
}
/* 复制按钮 */
.code-copy-button {
color: #c2c2c2;
background: transparent;
border: none;
padding: 2px 6px;
cursor: pointer;
transition: all 0.2s;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.code-copy-button:hover {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
/* 调整代码高亮区域的边框半径 */
.code-block-wrapper pre {
margin: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.message-text pre {
background-color: #1e1e1e;
padding: 12px;
border-radius: 6px;
margin: 10px 0;
overflow-x: auto;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
font-size: 13px;
line-height: 1.45;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* MCP工具调用组件样式 */
.mcp-tool-call {
margin: 10px 0;
border: 1px solid #e6e6e6;
border-radius: 8px;
overflow: hidden;
background-color: #f9f9f9;
}
.mcp-tool-call-header {
display: flex;
align-items: center;
padding: 8px 12px;
background-color: #f0f0f0;
border-bottom: 1px solid #e6e6e6;
gap: 8px;
}
.mcp-tool-name {
flex: 1;
font-weight: 500;
margin-left: 4px;
}
.mcp-tool-call-details {
padding: 12px;
}
.mcp-tool-parameters,
.mcp-tool-result {
margin-bottom: 12px;
}
.mcp-tool-parameters pre,
.mcp-tool-result pre {
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 4px;
padding: 8px;
margin-top: 4px;
max-height: 200px;
overflow: auto;
}
.tool-loading {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
color: #1890ff;
}
/* 工具调用中状态信息 */
.tool-calling-status {
background-color: #e6f7ff;
border: 1px solid #91d5ff;
border-radius: 8px;
padding: 8px 12px;
margin: 10px 0;
display: flex;
align-items: center;
gap: 8px;
color: #1890ff;
}
/* 消息渐入动画 */
@keyframes messageAppear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-item:last-child {
animation: messageAppear 0.3s ease-out;
}
/* 空消息状态样式优化 */
.empty-message-icon {
margin-bottom: 15px;
opacity: 0.6;
}
.empty-message-text {
font-size: 16px;
color: #888;
opacity: 0.8;
}
/* 假设已有 .chat-input-container 相关样式 */
.chat-input-container .input-actions {
display: flex;
align-items: center;
margin-top: 8px;
}
/* 确保发送按钮仍然在右侧 */
.send-button,
.stop-button {
margin-left: auto;
}
