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

View File

@ -13,9 +13,14 @@
export let cancelLabel = $i18n.t('Cancel');
export let confirmLabel = $i18n.t('Confirm');
export let input = false;
export let inputPlaceholder = '';
export let show = false;
let modalElement = null;
let mounted = false;
let inputValue = '';
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
@ -73,6 +78,16 @@
{:else}
{$i18n.t('This action cannot be undone. Do you wish to continue?')}
{/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>
</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"
on:click={() => {
show = false;
dispatch('confirm');
dispatch('confirm', inputValue);
}}
type="button"
>