xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 23:56:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

样式修正，暂停按钮布局

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/chat.module.scss
View File

@ -298,24 +298,24 @@
.chat-message-header { .chat-message-header {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
align-items: center; align-items: flex-end;
}
.chat-message-actions { .chat-message-actions {
display: flex;
box-sizing: border-box;
font-size: 12px;
align-items: flex-end;
justify-content: space-between;
transition: all ease 0.3s;
transform: scale(0.9) translateY(5px);
margin: 0 10px;
opacity: 0;
pointer-events: none;
.chat-input-actions {
display: flex; display: flex;
box-sizing: border-box; flex-wrap: nowrap;
font-size: 12px;
align-items: flex-end;
justify-content: space-between;
transition: all ease 0.3s;
transform: scale(0.9) translateY(5px);
margin: 0 10px;
opacity: 0;
pointer-events: none;
.chat-input-actions {
display: flex;
flex-wrap: nowrap;
}
} }
} }
@ -431,10 +431,11 @@
white-space: nowrap; white-space: nowrap;
transition: all ease 0.6s; transition: all ease 0.6s;
color: var(--black); color: var(--black);
text-align: right; text-align: left;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-right: 10px; padding-right: 10px;
padding-left: 10px;
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }

133
app/components/chat.tsx
View File

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