morgan
/
chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed left-align issue, made conversation look like a chat

This commit is contained in:
Michael Tanzer 2023-03-06 15:12:23 +00:00
parent f2fd3664a4
commit bf60472cdd
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.scss
View File

@ -21,6 +21,18 @@ a.is-disabled {
filter: grayscale(100%); filter: grayscale(100%);
} }
.user-message {
max-width: 70%;
margin-right: 0;
margin-left: auto;
width: fit-content;
}
.assistant-message {
max-width: 70%;
width: fit-content;
}
/* Show the edit button on hover of the user message */ /* Show the edit button on hover of the user message */
.user-message:hover .editbutton { .user-message:hover .editbutton {
/* TODO: add when ready: display: block !important; */ /* TODO: add when ready: display: block !important; */

6
src/lib/Chat.svelte
View File

@ -148,7 +148,7 @@
{#each chat.messages as message} {#each chat.messages as message}
{#if message.role === "user"} {#if message.role === "user"}
<article class="message is-info user-message" class:has-text-right={message.content.split("\n").length === 1}> <article class="message is-info user-message">
<div class="message-body"> <div class="message-body">
<a <a
href={"#"} href={"#"}
@ -170,7 +170,7 @@
</div> </div>
</article> </article>
{:else if message.role === "system"} {:else if message.role === "system"}
<article class="message is-danger"> <article class="message is-danger assistant-message">
<SvelteMarkdown <SvelteMarkdown
source={message.content} source={message.content}
options={markedownOptions} options={markedownOptions}
@ -180,7 +180,7 @@
/> />
</article> </article>
{:else} {:else}
<article class="message is-success"> <article class="message is-success assistant-message">
<div class="message-body"> <div class="message-body">
<SvelteMarkdown <SvelteMarkdown
source={message.content} source={message.content}