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

Add message icon to each chat item

This commit is contained in:
Webifi 2023-06-01 14:45:27 -05:00
parent ad1b0fdeb8
commit a8a1554a0f
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app.scss
View File

@ -59,6 +59,12 @@ html {
}
@media only screen and (max-width: 900px) and (min-width: 769px) {
.chat-menu-item .chat-icon {
display: none;
}
}
@media only screen and (max-width: 768px) {
.navbar {
display: block !important;
@ -213,6 +219,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
}
/* Delete button on side menu chat name */
.menu-list {
a:hover {
.delete-button {
@ -220,8 +227,17 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
background-color: initial;
}
}
.delete-button {
opacity: .8;
}
.delete-button:hover {
opacity: 1;
}
}
/* Loading chat messages */
.is-loading {
opacity: 0.5;
@ -277,7 +293,7 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
.chat-menu-item {
position: relative;
}
.chat-menu-item span {
.chat-menu-item .chat-item-name {
display: block;
white-space:nowrap;
overflow: hidden;
@ -429,6 +445,7 @@ aside.menu.main-menu .menu-expanse {
}
}
}
@media only screen and (max-width: 340px) {
.section-footer {
.author {
@ -437,7 +454,6 @@ aside.menu.main-menu .menu-expanse {
}
}
.content.running-total-container {
min-height:1em;
// padding-bottom:.6em;

7
src/lib/ChatMenuItem.svelte
View File

@ -4,6 +4,7 @@
import { apiKeyStorage, deleteChat, pinMainMenu } from './Storage.svelte'
import Fa from 'svelte-fa/src/fa.svelte'
import { faTrash, faCircleCheck } from '@fortawesome/free-solid-svg-icons/index'
import { faMessage } from '@fortawesome/free-regular-svg-icons/index'
export let chat:Chat
export let activeChatId:number|undefined
@ -39,10 +40,10 @@
<li>
<a class="chat-menu-item" href={`#/chat/${chat.id}`} on:click={() => { $pinMainMenu = false }} class:is-waiting={waitingForConfirm} class:is-disabled={!$apiKeyStorage} class:is-active={activeChatId === chat.id}>
{#if waitingForConfirm}
<a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
<a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faCircleCheck} /></a>
{:else}
<a class="is-pulled-right is-hidden px-1 py-0 greyscale has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
<a class="is-pulled-right is-hidden px-1 py-0 has-text-weight-bold delete-button" href={'$'} on:click|preventDefault={() => delChat()}><Fa icon={faTrash} /></a>
{/if}
<span>{chat.name || `Chat ${chat.id}`}</span>
<span class="chat-item-name"><Fa class="mr-2 chat-icon" size="xs" icon="{faMessage}"/>{chat.name || `Chat ${chat.id}`}</span>
</a>
</li>