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

feat: add copy function in user's chatbox & adjust styles

Browse Source
This commit is contained in:
eric.yang 2023-04-07 14:00:42 +08:00
parent 8013bf91ab
commit dc66753c36
2 changed files with 55 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/chat.tsx
View File

@ -648,6 +648,17 @@ export function Chat(props: {
</div> </div>
)} )}
</div> </div>
{isUser &&
!(message.preview || message.content.length === 0) && (
<div className={styles["chat-message-top-actions-user"]}>
<div
className={styles["chat-message-top-actions"]}
onClick={() => copyToClipboard(message.content)}
>
{Locale.Chat.Actions.Copy}
</div>
</div>
)}
{!isUser && !message.preview && ( {!isUser && !message.preview && (
<div className={styles["chat-message-actions"]}> <div className={styles["chat-message-actions"]}>
<div className={styles["chat-message-action-date"]}> <div className={styles["chat-message-action-date"]}>

53
app/components/home.module.scss
View File

@ -2,22 +2,23 @@
@import "../styles/animation.scss"; @import "../styles/animation.scss";
@mixin container { @mixin container {
background-color: var(--white);
border: var(--border-in-light); border: var(--border-in-light);
border-radius: 20px; border-radius: 4px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
color: var(--black); color: var(--black);
background-color: var(--white); background: #c7edcc; //rgb(199,237,204);//#7c9d42;// var(--white);
min-width: 600px; min-width: 800px;
min-height: 480px; min-height: 600px;
max-width: 900px; //max-width: 90%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: var(--window-width); width: var(--window-width);
height: var(--window-height); height: var(--window-height);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
} }
.container { .container {
@ -44,7 +45,7 @@
width: var(--sidebar-width); width: var(--sidebar-width);
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
background-color: var(--second); background: var(--second);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05); box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
@ -227,6 +228,7 @@
.chat-message-user { .chat-message-user {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
position: relative;
} }
.chat-message-container { .chat-message-container {
@ -247,6 +249,39 @@
.chat-message-user > .chat-message-container { .chat-message-user > .chat-message-container {
align-items: flex-end; align-items: flex-end;
.chat-message-top-actions-user {
display: flex;
position: absolute;
right: 0px;
bottom: -26px;
transition: all ease 0.3s;
font-size: 12px;
opacity: 0;
pointer-events: none;
flex-direction: row-reverse;
.chat-message-top-actions {
opacity: 0.5;
color: var(--black);
white-space: nowrap;
left: unset;
right: 10px;
cursor: pointer;
&:hover {
opacity: 1;
}
&:not(:first-child) {
margin-right: 10px;
}
}
&:hover {
opacity: 1;
}
}
&:hover {
.chat-message-top-actions-user{
opacity: 1;
}
}
} }
.chat-message-avatar { .chat-message-avatar {