{ // Only send if Enter is pressed, not Shift+Enter if (e.key === 'Enter' && !e.shiftKey) { submitForm() e.preventDefault() } }} on:input={e => autoGrowInputOnEvent(e)} bind:this={input} /> </p> <p class="control" class:is-hidden={!recognition}> <button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle} ><span class="greyscale"><Fa icon={faMicrophone} /></span></button > </p> <p class="control"> <button title="Chat/Profile Settings" class="button" on:click|preventDefault={showSettings}><Fa icon={faGear} /></button> </p> <p class="control"> <button title="Add message, don't send yet" class="button is-ghost" on:click|preventDefault={addNewMessage}><Fa icon={faArrowUpFromBracket} /></button> </p> <p class="control"> <button title="Send" class="button is-info" type="submit"><Fa icon={faPaperPlane} /></button> </p> </form> <!-- a target to scroll to --> <div class="chat-focus-point running-total-container"> {#each Object.entries(chat.usage || {}) as [model, usage]} <p class="is-size-7 running-totals"> <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> </p> {/each} </div> <svelte:window on:keydown={(event) => { if (event.key === 'Escape') { closeSettings() closeChatNameSettings() showChatMenu = false } }} /> <!-- svelte-ignore a11y-click-events-have-key-events --> <div class="modal" class:is-active={showSettingsModal}> <div class="modal-background" on:click={closeSettings} /> <div class="modal-card" on:click={() => { showProfileMenu = false }}> <header class="modal-card-head"> <p class="modal-card-title">Chat Settings</p> <div class="dropdown is-right" class:is-active={showProfileMenu}> <div class="dropdown-trigger"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3" on:click|preventDefault|stopPropagation={() => { showProfileMenu = !showProfileMenu }}> <span><Fa icon={faEllipsisVertical}/></span> </button> </div> <div class="dropdown-menu" id="dropdown-menu3" role="menu"> <div class="dropdown-content"> <a href={'#'} class="dropdown-item disabled" on:click|preventDefault={saveProfile}> <span><Fa icon={faFloppyDisk}/></span> Save Profile </a> <a href={'#'} class="dropdown-item" on:click|preventDefault={cloneProfile}> <span><Fa icon={faClone}/></span> Clone Profile </a> <hr class="dropdown-divider"> <a href={'#'} class="dropdown-item" on:click|preventDefault={() => { showProfileMenu = false; exportProfileAsJSON(chatId) }} > <span><Fa icon={faDownload}/></span> Export Profile </a> <a href={'#'} class="dropdown-item" on:click|preventDefault={() => { showProfileMenu = false; profileFileInput.click() }}> <span><Fa icon={faUpload}/></span> Import Profile </a> <hr class="dropdown-divider"> <a href={'#'} class="dropdown-item" on:click|preventDefault={pinDefaultProfile}> <span><Fa icon={faThumbtack}/></span> Set as Default Profile </a> <hr class="dropdown-divider"> <a href={'#'} class="dropdown-item" on:click|preventDefault={deleteProfile}> <span><Fa icon={faTrash}/></span> Delete Profile </a> </div> </div> </div> </header> <section class="modal-card-body"> <!-- Below are the settings that OpenAI allows to be changed for the API calls. See the <a href="https://platform.openai.com/docs/api-reference/chat/create">OpenAI API docs</a> for more details.</p> --> {#key showSettingsModal} {#each settingsList as setting} {#if (typeof setting.hide !== 'function') || !setting.hide(chatId)} {#if setting.header} <p class="notification {setting.headerClass}"> {@html setting.header} </p> {/if} <div class="field is-horizontal"> {#if setting.type === 'boolean'} <div class="field is-normal"> <label class="label" for="settings-{setting.key}" title="{setting.title}"> <input type="checkbox" title="{setting.title}" class="checkbox" id="settings-{setting.key}" checked={!!chatSettings[setting.key]} on:click={e => queueSettingValueChange(e, setting)} > {setting.name} </label> </div> {:else if setting.type === 'textarea'} <div class="field is-normal" style="width:100%"> <label class="label" for="settings-{setting.key}" title="{setting.title}">{setting.name}</label> <textarea class="input is-info is-focused chat-input auto-size" placeholder={setting.placeholder || ''} rows="1" on:input={e => autoGrowInputOnEvent(e)} on:change={e => { queueSettingValueChange(e, setting); autoGrowInputOnEvent(e) }} >{chatSettings[setting.key]} {:else}