Display message edit/action button differently
This commit is contained in:
Webifi
parent
8690bf9e10
commit
f7dc17a26e
106
src/app.scss
106
src/app.scss
|
|
@ -1,5 +1,6 @@
|
||||||
html {
|
html {
|
||||||
/* Scrollbar */
|
/* Scrollbar */
|
||||||
|
/* TODO: Update these to use bulma's scss variables, not css vars. */
|
||||||
--scrollbarBG: transparent;
|
--scrollbarBG: transparent;
|
||||||
--thumbBG: hsl(0, 0%, 60%); /* scollbar color light */
|
--thumbBG: hsl(0, 0%, 60%); /* scollbar color light */
|
||||||
/* Back-ground */
|
/* Back-ground */
|
||||||
|
|
@ -8,6 +9,9 @@ html {
|
||||||
// --BgColorSidebarDark: rgb(28, 30, 36);
|
// --BgColorSidebarDark: rgb(28, 30, 36);
|
||||||
--BgColorSidebarDark: rgb(16, 17, 22);
|
--BgColorSidebarDark: rgb(16, 17, 22);
|
||||||
--BgColorSidebarLight: hsla(0, 0%, 93%, 0.354);
|
--BgColorSidebarLight: hsla(0, 0%, 93%, 0.354);
|
||||||
|
// Tool drawer for messages
|
||||||
|
--chatToolDrawerSize: 40px;
|
||||||
|
--chatToolDrawerColor: var(--BgColorSidebarLight);
|
||||||
|
|
||||||
/* Sizes */
|
/* Sizes */
|
||||||
--sidebarTop: 0px;
|
--sidebarTop: 0px;
|
||||||
|
|
@ -25,6 +29,8 @@ html {
|
||||||
--chatInputPaddingRight: 60px;
|
--chatInputPaddingRight: 60px;
|
||||||
--chatInputPaddingBottom: 10px;
|
--chatInputPaddingBottom: 10px;
|
||||||
--chatInputPaddingLeft: 60px;
|
--chatInputPaddingLeft: 60px;
|
||||||
|
|
||||||
|
--BgColor: var(-BgColorLight) /* leave this */
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
|
|
@ -34,6 +40,8 @@ html {
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html {
|
html {
|
||||||
--thumbBG: #3f3f3f; /* scrollbar color dark */
|
--thumbBG: #3f3f3f; /* scrollbar color dark */
|
||||||
|
--BgColor: var(-BgColorDark);
|
||||||
|
--chatToolDrawerColor: var(--BgColorSidebarDark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -423,5 +431,103 @@ aside.menu.main-menu .menu-expanse {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-body {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.message-note {
|
||||||
|
padding-top: .6em;
|
||||||
|
margin-bottom: -0.6em;
|
||||||
|
}
|
||||||
|
.message-edit {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.message-editor {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
min-width: 60px;
|
||||||
|
min-height: 30px;
|
||||||
|
}
|
||||||
|
.message-display {
|
||||||
|
min-width: 60px;
|
||||||
|
min-height: 1.3em;
|
||||||
|
}
|
||||||
|
.button-pack .button {
|
||||||
|
display: block;
|
||||||
|
margin: 4px;
|
||||||
|
// border-radius: 10px;
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
.button-pack .button:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.assistant-message .button-pack {
|
||||||
|
right: auto;
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
.chat-message.message {
|
||||||
|
position: relative;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .chat-message.message:hover .button-pack, article.message:focus .button-pack {
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
.chat-message.summarized {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.tool-drawer, .tool-drawer-mask {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0%;
|
||||||
|
top: 0px;
|
||||||
|
min-height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
transition: 0.1s;
|
||||||
|
background-color: var(--chatToolDrawerColor);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.tool-drawer-mask {
|
||||||
|
border-radius: 0px 4px 4px 0px;
|
||||||
|
}
|
||||||
|
.user-message .tool-drawer-mask {
|
||||||
|
border-radius: 4px 0px 0px 4px;
|
||||||
|
}
|
||||||
|
.assistant-message .tool-drawer, .assistant-message .tool-drawer-mask {
|
||||||
|
left:100%;
|
||||||
|
}
|
||||||
|
.user-message .tool-drawer, .user-message .tool-drawer-mask {
|
||||||
|
right:100%;
|
||||||
|
}
|
||||||
|
.assistant-message:hover .tool-drawer,
|
||||||
|
.assistant-message:focus .tool-drawer {
|
||||||
|
width: var(--chatToolDrawerSize);
|
||||||
|
visibility: visible;
|
||||||
|
max-height: 300%;
|
||||||
|
}
|
||||||
|
.user-message:hover .tool-drawer,
|
||||||
|
.user-message:focus .tool-drawer {
|
||||||
|
width: var(--chatToolDrawerSize);
|
||||||
|
visibility: visible;
|
||||||
|
max-height: 300%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.assistant-message:hover .tool-drawer-mask,
|
||||||
|
.assistant-message:focus .tool-drawer {
|
||||||
|
width: var(--chatToolDrawerSize);
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.user-message:hover .tool-drawer-mask,
|
||||||
|
.user-message:focus .tool-drawer {
|
||||||
|
width: var(--chatToolDrawerSize);
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.assistant-message:hover, .assistant-message:focus {
|
||||||
|
border-top-right-radius: 0px !important;
|
||||||
|
border-bottom-right-radius: 0px !important;
|
||||||
|
}
|
||||||
|
.user-message:hover, .user-message:focus {
|
||||||
|
border-top-left-radius: 0px !important;
|
||||||
|
border-bottom-left-radius: 0px !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
{#key message.uuid}
|
{#key message.uuid}
|
||||||
<article
|
<article
|
||||||
id="{'message-' + message.uuid}"
|
id="{'message-' + message.uuid}"
|
||||||
class="message"
|
class="message chat-message"
|
||||||
class:is-info={message.role === 'user'}
|
class:is-info={message.role === 'user'}
|
||||||
class:is-success={message.role === 'assistant'}
|
class:is-success={message.role === 'assistant'}
|
||||||
class:is-warning={message.role === 'system'}
|
class:is-warning={message.role === 'system'}
|
||||||
|
|
@ -171,6 +171,37 @@
|
||||||
class:editing={editing}
|
class:editing={editing}
|
||||||
>
|
>
|
||||||
<div class="message-body content">
|
<div class="message-body content">
|
||||||
|
|
||||||
|
{#if editing && !noEdit}
|
||||||
|
<form class="message-edit" on:submit|preventDefault={update} on:keydown={keydown}>
|
||||||
|
<div id={'edit-' + message.uuid} class="message-editor" bind:innerText={message.content} contenteditable
|
||||||
|
on:input={update} on:blur={exit} />
|
||||||
|
</form>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="message-display"
|
||||||
|
|
||||||
|
on:touchend={editOnDoubleTap}
|
||||||
|
on:dblclick|preventDefault={() => edit()}
|
||||||
|
>
|
||||||
|
<SvelteMarkdown
|
||||||
|
source={message.content}
|
||||||
|
options={markdownOptions}
|
||||||
|
renderers={{ code: Code, html: Code }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if message.role === 'system'}
|
||||||
|
<p class="is-size-7 message-note">System Prompt</p>
|
||||||
|
{:else if message.usage}
|
||||||
|
<p class="is-size-7 message-note">
|
||||||
|
<em>{message.model || defaultModel}</em> using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
|
||||||
|
tokens ~= <span class="has-text-weight-bold">${getPrice(message.usage, message.model || defaultModel).toFixed(6)}</span>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="tool-drawer-mask"></div>
|
||||||
|
<div class="tool-drawer">
|
||||||
<div class="button-pack">
|
<div class="button-pack">
|
||||||
{#if message.summarized}
|
{#if message.summarized}
|
||||||
<a
|
<a
|
||||||
|
|
@ -229,81 +260,8 @@
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if editing && !noEdit}
|
|
||||||
<form class="message-edit" on:submit|preventDefault={update} on:keydown={keydown}>
|
|
||||||
<div id={'edit-' + message.uuid} class="message-editor" bind:innerText={message.content} contenteditable
|
|
||||||
on:input={update} on:blur={exit} />
|
|
||||||
</form>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="message-display"
|
|
||||||
|
|
||||||
on:touchend={editOnDoubleTap}
|
|
||||||
on:dblclick|preventDefault={() => edit()}
|
|
||||||
>
|
|
||||||
<SvelteMarkdown
|
|
||||||
source={message.content}
|
|
||||||
options={markdownOptions}
|
|
||||||
renderers={{ code: Code, html: Code }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if message.role === 'system'}
|
|
||||||
<p class="is-size-7 message-note">System Prompt</p>
|
|
||||||
{:else if message.usage}
|
|
||||||
<p class="is-size-7 message-note">
|
|
||||||
<em>{message.model || defaultModel}</em> using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>
|
|
||||||
tokens ~= <span class="has-text-weight-bold">${getPrice(message.usage, message.model || defaultModel).toFixed(6)}</span>
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{/key}
|
{/key}
|
||||||
|
|
||||||
<style>
|
|
||||||
.message-note {
|
|
||||||
padding-top: .6em;
|
|
||||||
margin-bottom: -0.6em;
|
|
||||||
}
|
|
||||||
.message-edit {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.message-editor {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
min-width: 60px;
|
|
||||||
min-height: 30px;
|
|
||||||
}
|
|
||||||
.message-display {
|
|
||||||
min-width: 60px;
|
|
||||||
min-height: 1.3em;
|
|
||||||
}
|
|
||||||
.button-pack .button {
|
|
||||||
display: block;
|
|
||||||
margin: 4px;
|
|
||||||
border-radius: 10px;
|
|
||||||
opacity: .8;
|
|
||||||
}
|
|
||||||
.button-pack .button:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.button-pack {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
right: -20px;
|
|
||||||
top: -20px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.assistant-message .button-pack {
|
|
||||||
right: auto;
|
|
||||||
left: -20px;
|
|
||||||
}
|
|
||||||
.message {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.message:hover .button-pack, .message:focus .button-pack {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.summarized {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue