{chat.name || `Chat ${chat.id}`} - ✏️ - 💡 - 🗑️ + + + + { copyChat(chatId) }}>
- { clearMessages(chatId) }}>🗑️ Clear messages + { clearMessages(chatId); window.location.reload() }}> Clear messages
{ + on:keydown={e => { // Only send if Enter is pressed, not Shift+Enter if (e.key === 'Enter' && !e.shiftKey) { submitForm() e.preventDefault() } }} - on:input={(e) => { - // Resize the textarea to fit the content - auto is important to reset the height after deleting content - input.style.height = 'auto' - input.style.height = input.scrollHeight + 'px' - }} + 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">🎤</span></button + ><span class="greyscale"><Fa icon={faMicrophone} /></span></button > </p> <p class="control"> - <button class="button" on:click|preventDefault={showSettings}><span class="greyscale">⚙️</span></button> + <button title="Chat/Profile Settings" class="button" on:click|preventDefault={showSettings}><Fa icon={faGear} /></button> </p> <p class="control"> - <button class="button is-info" type="submit">Send</button> + <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> +<div class="chat-focus-point" style="height.4em"></div> <svelte:window on:keydown={(event) => { @@ -443,19 +737,90 @@ /> <!-- svelte-ignore a11y-click-events-have-key-events --> -<div class="modal" bind:this={settings}> +<div class="modal" class:is-active={showSettingsModal}> <div class="modal-background" on:click={closeSettings} /> - <div class="modal-card"> + <div class="modal-card" on:click={() => { showProfileMenu = false }}> <header class="modal-card-head"> - <p class="modal-card-title">Settings</p> + <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> + <input style="display:none" type="file" accept=".json" on:change={(e) => importProfileFromFile(e)} bind:this={profileFileInput} > + <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"> - <p class="notification is-warning">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> - {#each settingsMap as setting} + <!-- 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"> - <div class="field-label is-normal"> - <label class="label" for="settings-{setting.key}">{setting.name}</label> + {#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={getChatSettingValue(chatId, setting)} + 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) }} + >{getChatSettingValue(chatId, setting)} + + {:else} +