样式修正,暂停按钮布局

This commit is contained in:
sijinhui 2024-02-15 10:51:12 +08:00
parent cc87bb04e8
commit e206fb900c
2 changed files with 110 additions and 58 deletions

View File

@ -298,7 +298,8 @@
.chat-message-header {
margin-top: 20px;
display: flex;
align-items: center;
align-items: flex-end;
}
.chat-message-actions {
display: flex;
@ -317,7 +318,6 @@
flex-wrap: nowrap;
}
}
}
.chat-message-container {
max-width: var(--message-max-width);
@ -431,10 +431,11 @@
white-space: nowrap;
transition: all ease 0.6s;
color: var(--black);
text-align: right;
text-align: left;
width: 100%;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
pointer-events: none;
z-index: 1;
}

View File

@ -1258,44 +1258,50 @@ function _Chat() {
)}
</div>
{showActions && (
<div className={styles["chat-message-actions"]}>
<div className={styles["chat-input-actions"]}>
{message.streaming ? (
<ChatAction
text={Locale.Chat.Actions.Stop}
icon={<StopIcon />}
onClick={() => onUserStop(message.id ?? i)}
/>
) : (
<>
<ChatAction
text={Locale.Chat.Actions.Retry}
icon={<ResetIcon />}
onClick={() => onResend(message)}
/>
<ChatAction
text={Locale.Chat.Actions.Delete}
icon={<DeleteIcon />}
onClick={() => onDelete(message.id ?? i)}
/>
<ChatAction
text={Locale.Chat.Actions.Pin}
icon={<PinIcon />}
onClick={() => onPinMessage(message)}
/>
<ChatAction
text={Locale.Chat.Actions.Copy}
icon={<CopyIcon />}
onClick={() => copyToClipboard(message.content)}
/>
</>
)}
<div className={styles["chat-message-action-date"]}>
{isContext
? Locale.Chat.IsContext
: message.date.toLocaleString()}
</div>
</div>
)}
{/*{showActions && (*/}
{/* <div className={styles["chat-message-actions"]}>*/}
{/* <div className={styles["chat-input-actions"]}>*/}
{/* {message.streaming ? (*/}
{/* <ChatAction*/}
{/* text={Locale.Chat.Actions.Stop}*/}
{/* icon={<StopIcon />}*/}
{/* onClick={() => onUserStop(message.id ?? i)}*/}
{/* />*/}
{/* ) : (*/}
{/* <>*/}
{/* <ChatAction*/}
{/* text={Locale.Chat.Actions.Retry}*/}
{/* icon={<ResetIcon />}*/}
{/* onClick={() => onResend(message)}*/}
{/* />*/}
{/* <ChatAction*/}
{/* text={Locale.Chat.Actions.Delete}*/}
{/* icon={<DeleteIcon />}*/}
{/* onClick={() => onDelete(message.id ?? i)}*/}
{/* />*/}
{/* <ChatAction*/}
{/* text={Locale.Chat.Actions.Pin}*/}
{/* icon={<PinIcon />}*/}
{/* onClick={() => onPinMessage(message)}*/}
{/* />*/}
{/* <ChatAction*/}
{/* text={Locale.Chat.Actions.Copy}*/}
{/* icon={<CopyIcon />}*/}
{/* onClick={() => copyToClipboard(message.content)}*/}
{/* />*/}
{/* </>*/}
{/* )}*/}
{/* </div>*/}
{/* </div>*/}
{/*)}*/}
</div>
{showTyping && (
<div className={styles["chat-message-status"]}>
@ -1413,12 +1419,57 @@ function _Chat() {
</div>
)}
<div className={styles["chat-message-action-date"]}>
{isContext
? Locale.Chat.IsContext
: message.date.toLocaleString()}
{/*<div className={styles["chat-message-action-date"]}>*/}
{/* {isContext*/}
{/* ? Locale.Chat.IsContext*/}
{/* : message.date.toLocaleString()}*/}
{/*</div>*/}
{showActions && (
<div
className={styles["chat-message-actions"]}
style={{
marginTop: "10px",
marginBottom: "0px",
}}
>
<div className={styles["chat-input-actions"]}>
{message.streaming ? (
<ChatAction
text={Locale.Chat.Actions.Stop}
icon={<StopIcon />}
onClick={() => onUserStop(message.id ?? i)}
/>
) : (
<>
<ChatAction
text={Locale.Chat.Actions.Retry}
icon={<ResetIcon />}
onClick={() => onResend(message)}
/>
<ChatAction
text={Locale.Chat.Actions.Delete}
icon={<DeleteIcon />}
onClick={() => onDelete(message.id ?? i)}
/>
<ChatAction
text={Locale.Chat.Actions.Pin}
icon={<PinIcon />}
onClick={() => onPinMessage(message)}
/>
<ChatAction
text={Locale.Chat.Actions.Copy}
icon={<CopyIcon />}
onClick={() => copyToClipboard(message.content)}
/>
</>
)}
</div>
</div>
)}
</div>
</div>
{shouldShowClearContextDivider && <ClearContextDivider />}
</Fragment>