{#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 * tokenPrice).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> <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-{setting.key}">{setting.name}</label> </div> <div class="field-body"> <div class="field"> {#if setting.type === 'number'} <input class="input" inputmode="decimal" type={setting.type} id="settings-{setting.key}" min={setting.min} max={setting.max} step={setting.step} placeholder={String(setting.default)} /> {:else if setting.type === 'select'} <div class="select"> <select id="settings-{setting.key}"> {#each setting.options as option} <option value={option} selected={option === setting.default}>{option}</option> {/each} </select> </div> {/if} </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>