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

Merge pull request #17 from Michael-Tanzer/chat-like-conversation 

Chat-like conversation, all right-aligned
This commit is contained in:
Niek van der Maas 2023-03-06 16:20:45 +01:00 committed by GitHub
parent d512aa83bc 3d13f16b5c
commit a57f65ff9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 6 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: 90%;
margin-right: 0;
margin-left: auto;
width: fit-content;
}
.assistant-message {
max-width: 90%;
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; */

9
src/lib/Chat.svelte
View File

@ -148,10 +148,7 @@
{#each chat.messages as message} {#each chat.messages as message}
{#if message.role === "user"} {#if message.role === "user"}
<article <article class="message is-info user-message">
class="message is-info user-message"
class:has-text-right={message.content.split("\n").filter((line) => line.trim()).length === 1}
>
<div class="message-body"> <div class="message-body">
<a <a
href={"#"} href={"#"}
@ -173,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}
@ -183,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}