Spaces:
Build error
Build error
File size: 3,663 Bytes
87a665c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <script lang="ts">
import { getContext } from 'svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import LineSpace from '$lib/components/icons/LineSpace.svelte';
import LineSpaceSmaller from '$lib/components/icons/LineSpaceSmaller.svelte';
const i18n = getContext('i18n');
export let onRegenerate: Function = (prompt = null) => {};
export let onClose: Function = () => {};
let show = false;
let inputValue = '';
</script>
<Dropdown
bind:show
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
align="start"
sideOffset={-2}
>
<slot></slot>
<div slot="content">
<div
class="max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
>
<div class="py-1.5 px-2.5 flex dark:text-gray-100">
<input
type="text"
id="floating-message-input"
class="bg-transparent outline-hidden w-full flex-1 text-sm"
placeholder={$i18n.t('Suggest a change')}
bind:value={inputValue}
autocomplete="off"
on:keydown={(e) => {
if (e.key === 'Enter') {
onRegenerate(inputValue);
show = false;
}
}}
/>
<div class="ml-2 self-center flex items-center">
<button
aria-label={$i18n.t('Submit suggestion')}
class="{inputValue !== ''
? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1 self-center"
on:click={() => {
onRegenerate(inputValue);
show = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="size-3.5"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1 mx-2" />
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onRegenerate();
show = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
aria-hidden="true"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
<div class="flex items-center">{$i18n.t('Try Again')}</div>
</button>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onRegenerate($i18n.t('Add Details'));
}}
>
<LineSpace strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add Details')}</div>
</button>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onRegenerate($i18n.t('More Concise'));
}}
>
<LineSpaceSmaller strokeWidth="2" />
<div class="flex items-center">{$i18n.t('More Concise')}</div>
</button>
</div>
</div>
</Dropdown>
|