{#each chat.messages as message} {#if message.role === "user"}

line.trim()).length === 1} >

{ input.value = message.content; input.focus(); }} > ✏️

{:else if message.role === "system" || message.role === "error"}

{:else}

{#if message.usage}

This message was generated using {message.usage.total_tokens} tokens ~= ${(message.usage.total_tokens * token_price).toFixed( 6 )}

{/if}

{/if} {/each}

{#if updating} {/if}

submitForm()} >

{ // 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"; }} 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 > </p> <p class="control"> <button class="button" on:click|preventDefault={showSettings} ><span class="greyscale">⚙️</span></button > </p> <p class="control"> <button class="button is-info" type="submit">Send</button> </p> </form> </div> </div> <svelte:window on:keydown={(event) => { if (event.key === "Escape") { closeSettings(); } }} />  <div class="modal" bind:this={settings}> <div class="modal-background" on:click={closeSettings} /> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">Settings</p> </header> <section class="modal-card-body"> {#each settingsMap as setting} <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label" for="settings-temperature" >{setting.name}</label > </div> <div class="field-body"> <div class="field"> <input class="input" type={setting.type} id="settings-{setting.key}" placeholder={String(setting.default)} /> </div> </div> </div> {/each} </section> <footer class="modal-card-foot"> <button class="button is-info" on:click={closeSettings} >Close settings</button > <button class="button" on:click={clearSettings}>Clear settings</button> </footer> </div> </div>