refac: suggestion prompts

This commit is contained in:
Timothy J. Baek 2024-05-24 23:54:22 -07:00
parent bbf5e37f6f
commit 0c7f0f4430
2 changed files with 165 additions and 108 deletions

View File

@ -386,64 +386,93 @@
</div> </div>
<div class="my-2"> <div class="my-2">
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between items-center">
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div> <div class="flex w-full justify-between items-center">
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 text-xs flex rounded transition"
type="button" type="button"
on:click={() => { on:click={() => {
if ( if (info.meta.suggestion_prompts === null) {
info.meta.suggestion_prompts.length === 0 || info.meta.suggestion_prompts = [{ content: '' }];
info.meta.suggestion_prompts.at(-1).content !== '' } else {
) { info.meta.suggestion_prompts = null;
info.meta.suggestion_prompts = [...info.meta.suggestion_prompts, { content: '' }]; }
} }}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
> >
<path {#if info.meta.suggestion_prompts === null}
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" <span class="ml-2 self-center">{$i18n.t('Default')}</span>
/> {:else}
</svg> <span class="ml-2 self-center">{$i18n.t('Custom')}</span>
</button> {/if}
</div> </button>
<div class="flex flex-col space-y-1"> </div>
{#each info.meta.suggestion_prompts as prompt, promptIdx}
<div class=" flex border dark:border-gray-600 rounded-lg">
<input
class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
bind:value={prompt.content}
/>
<button {#if info.meta.suggestion_prompts !== null}
class="px-2" <button
type="button" class="p-1 px-2 text-xs flex rounded transition"
on:click={() => { type="button"
info.meta.suggestion_prompts.splice(promptIdx, 1); on:click={() => {
info.meta.suggestion_prompts = info.meta.suggestion_prompts; if (
}} info.meta.suggestion_prompts.length === 0 ||
info.meta.suggestion_prompts.at(-1).content !== ''
) {
info.meta.suggestion_prompts = [...info.meta.suggestion_prompts, { content: '' }];
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
viewBox="0 0 20 20" />
fill="currentColor" </svg>
class="w-4 h-4" </button>
> {/if}
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
{/each}
</div> </div>
{#if info.meta.suggestion_prompts}
<div class="flex flex-col space-y-1 mt-2">
{#if info.meta.suggestion_prompts.length > 0}
{#each info.meta.suggestion_prompts as prompt, promptIdx}
<div class=" flex border dark:border-gray-600 rounded-lg">
<input
class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
bind:value={prompt.content}
/>
<button
class="px-2"
type="button"
on:click={() => {
info.meta.suggestion_prompts.splice(promptIdx, 1);
info.meta.suggestion_prompts = info.meta.suggestion_prompts;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
{/each}
{:else}
<div class="text-xs text-center">No suggestion prompts</div>
{/if}
</div>
{/if}
</div> </div>
<div class="my-2"> <div class="my-2">

View File

@ -44,8 +44,7 @@
meta: { meta: {
profile_image_url: '/favicon.png', profile_image_url: '/favicon.png',
description: '', description: '',
content: '', suggestion_prompts: null
suggestion_prompts: []
}, },
params: { params: {
system: '' system: ''
@ -366,64 +365,93 @@
</div> </div>
<div class="my-2"> <div class="my-2">
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between items-center">
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div> <div class="flex w-full justify-between items-center">
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 text-xs flex rounded transition"
type="button" type="button"
on:click={() => { on:click={() => {
if ( if (info.meta.suggestion_prompts === null) {
info.meta.suggestion_prompts.length === 0 || info.meta.suggestion_prompts = [{ content: '' }];
info.meta.suggestion_prompts.at(-1).content !== '' } else {
) { info.meta.suggestion_prompts = null;
info.meta.suggestion_prompts = [...info.meta.suggestion_prompts, { content: '' }]; }
} }}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
> >
<path {#if info.meta.suggestion_prompts === null}
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" <span class="ml-2 self-center">{$i18n.t('Default')}</span>
/> {:else}
</svg> <span class="ml-2 self-center">{$i18n.t('Custom')}</span>
</button> {/if}
</div> </button>
<div class="flex flex-col space-y-1"> </div>
{#each info.meta.suggestion_prompts as prompt, promptIdx}
<div class=" flex border dark:border-gray-600 rounded-lg">
<input
class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
bind:value={prompt.content}
/>
<button {#if info.meta.suggestion_prompts !== null}
class="px-2" <button
type="button" class="p-1 px-2 text-xs flex rounded transition"
on:click={() => { type="button"
info.meta.suggestion_prompts.splice(promptIdx, 1); on:click={() => {
info.meta.suggestion_prompts = info.meta.suggestion_prompts; if (
}} info.meta.suggestion_prompts.length === 0 ||
info.meta.suggestion_prompts.at(-1).content !== ''
) {
info.meta.suggestion_prompts = [...info.meta.suggestion_prompts, { content: '' }];
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
> >
<svg <path
xmlns="http://www.w3.org/2000/svg" d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
viewBox="0 0 20 20" />
fill="currentColor" </svg>
class="w-4 h-4" </button>
> {/if}
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
{/each}
</div> </div>
{#if info.meta.suggestion_prompts}
<div class="flex flex-col space-y-1 mt-2">
{#if info.meta.suggestion_prompts.length > 0}
{#each info.meta.suggestion_prompts as prompt, promptIdx}
<div class=" flex border dark:border-gray-600 rounded-lg">
<input
class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
bind:value={prompt.content}
/>
<button
class="px-2"
type="button"
on:click={() => {
info.meta.suggestion_prompts.splice(promptIdx, 1);
info.meta.suggestion_prompts = info.meta.suggestion_prompts;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
{/each}
{:else}
<div class="text-xs text-center">No suggestion prompts</div>
{/if}
</div>
{/if}
</div> </div>
<div class="my-2"> <div class="my-2">