|
|
|
hr.append-display { |
|
margin: 8px 0; |
|
border: none; |
|
height: 1px; |
|
border-top-width: 0; |
|
background-image: linear-gradient(to right, rgba(50,50,50, 0.1), rgba(150, 150, 150, 0.8), rgba(50,50,50, 0.1)); |
|
} |
|
.source-a { |
|
font-size: 0.8em; |
|
max-width: 100%; |
|
margin: 0; |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
|
|
border-radius: 1.5rem; |
|
padding: 0.2em; |
|
} |
|
.source-a a { |
|
display: inline-block; |
|
background-color: #aaaaaa50; |
|
border-radius: 1rem; |
|
padding: 0.5em; |
|
text-align: center; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
min-width: 20%; |
|
white-space: nowrap; |
|
margin: 0.2rem 0.1rem; |
|
text-decoration: none !important; |
|
flex: 1; |
|
transition: flex 0.5s; |
|
} |
|
.source-a a:hover { |
|
background-color: #aaaaaa20; |
|
flex: 2; |
|
} |
|
|
|
|
|
.agent-prefix { |
|
font-size: smaller; |
|
opacity: 0.6; |
|
padding: 6px 0 4px; |
|
} |
|
.agent-prefix::before { |
|
content: '🐯'; |
|
filter: grayscale(); |
|
padding: 0 4px; |
|
} |
|
|
|
|
|
#chuanhu-chatbot { |
|
background-color: var(--chatbot-background-color-light) !important; |
|
color: var(--chatbot-color-light) !important; |
|
} |
|
[data-testid = "bot"] { |
|
background-color: var(--message-bot-background-color-light) !important; |
|
} |
|
[data-testid = "user"] { |
|
background-color: var(--message-user-background-color-light) !important; |
|
} |
|
|
|
.dark #chuanhu-chatbot { |
|
background-color: var(--chatbot-background-color-dark) !important; |
|
color: var(--chatbot-color-dark) !important; |
|
} |
|
.dark [data-testid = "bot"] { |
|
background-color: var(--message-bot-background-color-dark) !important; |
|
} |
|
.dark [data-testid = "user"] { |
|
background-color: var(--message-user-background-color-dark) !important; |
|
} |
|
|
|
|
|
.message { |
|
border-radius: var(--radius-xl) !important; |
|
border: none; |
|
padding: var(--spacing-xl) !important; |
|
font-size: var(--text-md) !important; |
|
line-height: var(--line-md) !important; |
|
min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl)); |
|
min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl)); |
|
} |
|
[data-testid = "bot"] { |
|
max-width: calc(85% - 38px); |
|
border-top-left-radius: 0 !important; |
|
} |
|
[data-testid = "user"] { |
|
max-width: calc(85% - 38px); |
|
width: auto !important; |
|
border-top-right-radius: 0 !important; |
|
} |
|
|
|
|
|
|
|
@media screen and (min-width: 500px) { |
|
#chuanhu-chatbot { |
|
height: calc(100vh - 200px); |
|
} |
|
#chuanhu-chatbot>.wrapper>.wrap { |
|
max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) ); |
|
} |
|
} |
|
|
|
@media screen and (max-width: 499px) { |
|
#chuanhu-chatbot { |
|
height: calc(100vh - 140px); |
|
} |
|
#chuanhu-chatbot>.wrapper>.wrap { |
|
max-height: calc(100vh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) ); |
|
} |
|
[data-testid = "bot"] { |
|
max-width: calc(98% - 20px) !important; |
|
} |
|
.chatbot-avatar { |
|
display: none; |
|
} |
|
#app-title h1{ |
|
letter-spacing: -1px; font-size: 22px; |
|
} |
|
} |
|
|
|
#chuanhu-chatbot>.wrapper>.wrap { |
|
overflow-x: hidden; |
|
} |
|
|
|
.message.user p { |
|
white-space: pre-wrap; |
|
} |
|
.message .user-message { |
|
display: block; |
|
padding: 0 !important; |
|
white-space: pre-wrap; |
|
} |
|
|
|
.message .md-message p { |
|
margin-top: 0.6em !important; |
|
margin-bottom: 0.6em !important; |
|
} |
|
.message .md-message p:first-child { margin-top: 0 !important; } |
|
.message .md-message p:last-of-type { margin-bottom: 0 !important; } |
|
|
|
.message .md-message { |
|
display: block; |
|
padding: 0 !important; |
|
} |
|
.message .raw-message p { |
|
margin:0 !important; |
|
} |
|
.message .raw-message { |
|
display: block; |
|
padding: 0 !important; |
|
white-space: pre-wrap; |
|
} |
|
.message .hideM { |
|
display: none; |
|
} |
|
|
|
|
|
.chuanhu-btn { |
|
border-radius: 5px; |
|
|
|
color: rgba(120, 120, 120, 0.64) !important; |
|
padding: 4px !important; |
|
position: absolute; |
|
right: -22px; |
|
cursor: pointer !important; |
|
transition: color .2s ease, background-color .2s ease; |
|
} |
|
.chuanhu-btn:hover { |
|
background-color: rgba(167, 167, 167, 0.25) !important; |
|
color: unset !important; |
|
} |
|
.chuanhu-btn:active { |
|
background-color: rgba(167, 167, 167, 0.5) !important; |
|
} |
|
.chuanhu-btn:focus { |
|
outline: none; |
|
} |
|
|
|
.copy-bot-btn { |
|
|
|
bottom: 0; |
|
} |
|
.toggle-md-btn { |
|
|
|
bottom: 20px; |
|
} |
|
|
|
|
|
.copy-code-btn { |
|
position: relative; |
|
float: right; |
|
font-size: 1em; |
|
cursor: pointer; |
|
} |
|
|
|
.message div.icon-button > button[title="copy"] { |
|
display: none; |
|
} |
|
|
|
|
|
|
|
.wrapper>.wrap>.history-message { |
|
padding-bottom: 10px !important; |
|
} |
|
.history-message { |
|
|
|
opacity: 80%; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.history-message>.history-message { |
|
padding: 0 !important; |
|
} |
|
.history-message>.message-wrap { |
|
padding: 0 !important; |
|
margin-bottom: 16px; |
|
} |
|
.history-message>.message { |
|
margin-bottom: 16px; |
|
} |
|
.wrapper>.wrap>.history-message::after { |
|
content: ""; |
|
display: block; |
|
height: 2px; |
|
background-color: var(--body-text-color-subdued); |
|
margin-bottom: 10px; |
|
margin-top: -10px; |
|
clear: both; |
|
} |
|
.wrapper>.wrap>.history-message>:last-child::after { |
|
content: "仅供查看"; |
|
display: block; |
|
text-align: center; |
|
color: var(--body-text-color-subdued); |
|
font-size: 0.8em; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.message-row { |
|
flex-direction: row; |
|
display: flex; |
|
gap: 8px; |
|
width: 100%; |
|
} |
|
.bot-message-row { |
|
justify-content: flex-start; |
|
} |
|
.user-message-row { |
|
justify-content: flex-end; |
|
} |
|
.chatbot-avatar { |
|
width: 32px; |
|
height: 32px; |
|
background-color: transparent; |
|
background-size: cover; |
|
border-radius: 5px !important; |
|
} |
|
.chatbot-avatar.bot-avatar { |
|
margin-left: 5px; |
|
} |
|
.chatbot-avatar.user-avatar { |
|
margin-right: 10px; |
|
} |
|
.chatbot-avatar img { |
|
border-radius: 5px !important; |
|
object-fit: cover; |
|
width: 100%; |
|
height: 100%; |
|
} |