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

Css tweaks. Add links

This commit is contained in:
Webifi 2023-05-31 12:26:55 -05:00
parent fdbb2ab76f
commit 7609497974
2 changed files with 62 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app.scss
View File

@ -402,11 +402,15 @@ aside.menu.main-menu .menu-expanse {
var(--chatInputPaddingLeft); var(--chatInputPaddingLeft);
} }
.running-total-container { .content.running-total-container {
min-height:2em; min-height:1em;
// padding-bottom:.6em; // padding-bottom:.6em;
// /* padding-left: 1.9em; */ // /* padding-left: 1.9em; */
// margin-bottom:- 1em margin-bottom: .5em;
}
.content.credit-footer {
margin-bottom: 1em;
} }
.side-actions { .side-actions {

96
src/lib/Chat.svelte
View File

@ -34,6 +34,9 @@
faMicrophone, faMicrophone,
faLightbulb faLightbulb
} from '@fortawesome/free-solid-svg-icons/index' } from '@fortawesome/free-solid-svg-icons/index'
import {
faGithub
} from '@fortawesome/free-brands-svg-icons/index'
// import { encode } from 'gpt-tokenizer' // import { encode } from 'gpt-tokenizer'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
import { countPromptTokens, getMaxModelPrompt, getPrice } from './Stats.svelte' import { countPromptTokens, getMaxModelPrompt, getPrice } from './Stats.svelte'
@ -520,49 +523,60 @@
<div class="lower-mask"/> <div class="lower-mask"/>
<div class="chat-focus-point"></div> <div class="chat-focus-point"></div>
<div class="prompt-input-container"> <div class="prompt-input-container">
<form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}> <form class="field has-addons has-addons-right is-align-items-flex-end" on:submit|preventDefault={() => submitForm()}>
<p class="control is-expanded"> <p class="control is-expanded">
<textarea <textarea
class="input is-info is-focused chat-input auto-size" class="input is-info is-focused chat-input auto-size"
placeholder="Type your message here..." placeholder="Type your message here..."
rows="1" rows="1"
on:keydown={e => { on:keydown={e => {
// Only send if Enter is pressed, not Shift+Enter // Only send if Enter is pressed, not Shift+Enter
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
submitForm() submitForm()
e.preventDefault() e.preventDefault()
} }
}} }}
on:input={e => autoGrowInputOnEvent(e)} on:input={e => autoGrowInputOnEvent(e)}
bind:this={input} bind:this={input}
/> />
</p> </p>
<p class="control" class:is-hidden={!recognition}> <p class="control" class:is-hidden={!recognition}>
<button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle} <button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle}
><span class="greyscale"><Fa icon={faMicrophone} /></span></button ><span class="greyscale"><Fa icon={faMicrophone} /></span></button
> >
</p> </p>
<p class="control"> <p class="control">
<button title="Chat/Profile Settings" class="button" on:click|preventDefault={showSettingsModal}><Fa icon={faGear} /></button> <button title="Chat/Profile Settings" class="button" on:click|preventDefault={showSettingsModal}><Fa icon={faGear} /></button>
</p> </p>
<p class="control"> <p class="control">
<button title="Add message, don't send yet" class="button is-ghost" on:click|preventDefault={addNewMessage}><Fa icon={faArrowUpFromBracket} /></button> <button title="Add message, don't send yet" class="button is-ghost" on:click|preventDefault={addNewMessage}><Fa icon={faArrowUpFromBracket} /></button>
</p> </p>
<p class="control"> <p class="control">
<button title="Send" class="button is-info" type="submit"><Fa icon={faPaperPlane} /></button> <button title="Send" class="button is-info" type="submit"><Fa icon={faPaperPlane} /></button>
</p> </p>
</form> </form>
<!-- a target to scroll to --> <!-- a target to scroll to -->
<div class="running-total-container"> <div class="content has-text-centered running-total-container">
{#each Object.entries(chat.usage || {}) as [model, usage]} {#each Object.entries(chat.usage || {}) as [model, usage]}
<p class="is-size-7 running-totals"> <p class="is-size-7 running-totals">
<em>{model}</em> total <span class="has-text-weight-bold">{usage.total_tokens}</span> <em>{model}</em> total <span class="has-text-weight-bold">{usage.total_tokens}</span>
tokens ~= <span class="has-text-weight-bold">${getPrice(usage, model).toFixed(6)}</span> tokens ~= <span class="has-text-weight-bold">${getPrice(usage, model).toFixed(6)}</span>
</p> </p>
{/each} {/each}
</div> </div>
<div class="content has-text-centered credit-footer">
<p>
<strong>ChatGPT-web</strong>
by
<a target="_blank" href="https://niekvandermaas.nl/">Niek van der Maas</a>
&mdash;
<a target="_blank" href="https://github.com/Niek/chatgpt-web"><span class="icon"><Fa icon="{faGithub}"/></span></a>
</p>
</div>
</div> </div>
<ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} /> <ChatSettingsModal chatId={chatId} bind:show={showSettingsModal} />
<!-- rename modal --> <!-- rename modal -->