enh: input type event call

This commit is contained in:
Timothy J. Baek 2024-07-11 17:30:24 -07:00
parent 97098edfeb
commit 90c3d68f00
2 changed files with 36 additions and 3 deletions

View File

@ -78,6 +78,8 @@
let showEventConfirmation = false; let showEventConfirmation = false;
let eventConfirmationTitle = ''; let eventConfirmationTitle = '';
let eventConfirmationMessage = ''; let eventConfirmationMessage = '';
let eventConfirmationInput = false;
let eventConfirmationInputPlaceholder = '';
let eventCallback = null; let eventCallback = null;
let showModelSelector = true; let showModelSelector = true;
@ -161,10 +163,21 @@
message.content += data.content; message.content += data.content;
} else if (type === 'confirmation') { } else if (type === 'confirmation') {
eventCallback = cb; eventCallback = cb;
eventConfirmationInput = false;
showEventConfirmation = true; showEventConfirmation = true;
eventConfirmationTitle = data.title; eventConfirmationTitle = data.title;
eventConfirmationMessage = data.message; eventConfirmationMessage = data.message;
} else if (type === 'input') {
eventCallback = cb;
eventConfirmationInput = true;
showEventConfirmation = true;
eventConfirmationTitle = data.title;
eventConfirmationMessage = data.message;
eventConfirmationInputPlaceholder = data.placeholder;
} else { } else {
console.log('Unknown message type', data); console.log('Unknown message type', data);
} }
@ -1411,8 +1424,14 @@
bind:show={showEventConfirmation} bind:show={showEventConfirmation}
title={eventConfirmationTitle} title={eventConfirmationTitle}
message={eventConfirmationMessage} message={eventConfirmationMessage}
input={eventConfirmationInput}
inputPlaceholder={eventConfirmationInputPlaceholder}
on:confirm={(e) => { on:confirm={(e) => {
eventCallback(true); if (e.detail) {
eventCallback(e.detail);
} else {
eventCallback(true);
}
}} }}
on:cancel={() => { on:cancel={() => {
eventCallback(false); eventCallback(false);
@ -1545,7 +1564,6 @@
<ChatControls <ChatControls
models={selectedModelIds.reduce((a, e, i, arr) => { models={selectedModelIds.reduce((a, e, i, arr) => {
const model = $models.find((m) => m.id === e); const model = $models.find((m) => m.id === e);
if (model) { if (model) {
return [...a, model]; return [...a, model];
} }

View File

@ -13,9 +13,14 @@
export let cancelLabel = $i18n.t('Cancel'); export let cancelLabel = $i18n.t('Cancel');
export let confirmLabel = $i18n.t('Confirm'); export let confirmLabel = $i18n.t('Confirm');
export let input = false;
export let inputPlaceholder = '';
export let show = false; export let show = false;
let modalElement = null; let modalElement = null;
let mounted = false; let mounted = false;
let inputValue = '';
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
@ -73,6 +78,16 @@
{:else} {:else}
{$i18n.t('This action cannot be undone. Do you wish to continue?')} {$i18n.t('This action cannot be undone. Do you wish to continue?')}
{/if} {/if}
{#if input}
<textarea
bind:value={inputValue}
placeholder={inputPlaceholder ? inputPlaceholder : $i18n.t('Enter your message')}
class="w-full mt-2 rounded-lg px-4 py-2 text-sm dark:text-gray-300 dark:bg-gray-900 outline-none resize-none"
rows="3"
required
/>
{/if}
</div> </div>
</slot> </slot>
@ -91,7 +106,7 @@
class="bg-gray-900 hover:bg-gray-850 text-gray-100 dark:bg-gray-100 dark:hover:bg-white dark:text-gray-800 font-medium w-full py-2.5 rounded-lg transition" class="bg-gray-900 hover:bg-gray-850 text-gray-100 dark:bg-gray-100 dark:hover:bg-white dark:text-gray-800 font-medium w-full py-2.5 rounded-lg transition"
on:click={() => { on:click={() => {
show = false; show = false;
dispatch('confirm'); dispatch('confirm', inputValue);
}} }}
type="button" type="button"
> >