PromptEditor.svelte 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <script lang="ts">
  2. import { onMount, tick, getContext } from 'svelte';
  3. import Textarea from '$lib/components/common/Textarea.svelte';
  4. import { toast } from 'svelte-sonner';
  5. import Tooltip from '$lib/components/common/Tooltip.svelte';
  6. export let onSubmit: Function;
  7. export let edit = false;
  8. export let prompt = null;
  9. const i18n = getContext('i18n');
  10. let loading = false;
  11. let title = '';
  12. let command = '';
  13. let content = '';
  14. $: if (!edit) {
  15. command = title !== '' ? `${title.replace(/\s+/g, '-').toLowerCase()}` : '';
  16. }
  17. const submitHandler = async () => {
  18. loading = true;
  19. if (validateCommandString(command)) {
  20. await onSubmit({
  21. title,
  22. command,
  23. content
  24. });
  25. } else {
  26. toast.error(
  27. $i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
  28. );
  29. }
  30. loading = false;
  31. };
  32. const validateCommandString = (inputString) => {
  33. // Regular expression to match only alphanumeric characters and hyphen
  34. const regex = /^[a-zA-Z0-9-]+$/;
  35. // Test the input string against the regular expression
  36. return regex.test(inputString);
  37. };
  38. onMount(async () => {
  39. if (prompt) {
  40. title = prompt.title;
  41. await tick();
  42. command = prompt.command.at(0) === '/' ? prompt.command.slice(1) : prompt.command;
  43. content = prompt.content;
  44. }
  45. });
  46. </script>
  47. <div class="w-full max-h-full flex justify-center">
  48. <form
  49. class="flex flex-col w-full mb-10"
  50. on:submit|preventDefault={() => {
  51. submitHandler();
  52. }}
  53. >
  54. <div class="my-2">
  55. <Tooltip
  56. content={`${$i18n.t('Only alphanumeric characters and hyphens are allowed')} - ${$i18n.t(
  57. 'Activate this command by typing "/{{COMMAND}}" to chat input.',
  58. {
  59. COMMAND: command
  60. }
  61. )}`}
  62. placement="bottom-start"
  63. >
  64. <div class="flex flex-col w-full">
  65. <div>
  66. <input
  67. class="text-2xl font-semibold w-full bg-transparent outline-none"
  68. placeholder={$i18n.t('Title')}
  69. bind:value={title}
  70. required
  71. />
  72. </div>
  73. <div class="flex gap-0.5 items-center text-xs text-gray-500">
  74. <div class="">/</div>
  75. <input
  76. class=" w-full bg-transparent outline-none"
  77. placeholder={$i18n.t('Command')}
  78. bind:value={command}
  79. required
  80. disabled={edit}
  81. />
  82. </div>
  83. </div>
  84. </Tooltip>
  85. </div>
  86. <div class="my-2">
  87. <div class="flex w-full justify-between">
  88. <div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}</div>
  89. </div>
  90. <div class="mt-2">
  91. <div>
  92. <Textarea
  93. className="text-sm w-full bg-transparent outline-none overflow-y-hidden resize-none"
  94. placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
  95. bind:value={content}
  96. rows={6}
  97. required
  98. />
  99. </div>
  100. <div class="text-xs text-gray-400 dark:text-gray-500">
  101. ⓘ {$i18n.t('Format your variables using brackets like this:')}&nbsp;<span
  102. class=" text-gray-600 dark:text-gray-300 font-medium"
  103. >{'{{'}{$i18n.t('variable')}{'}}'}</span
  104. >.
  105. {$i18n.t('Make sure to enclose them with')}
  106. <span class=" text-gray-600 dark:text-gray-300 font-medium">{'{{'}</span>
  107. {$i18n.t('and')}
  108. <span class=" text-gray-600 dark:text-gray-300 font-medium">{'}}'}</span>.
  109. </div>
  110. <div class="text-xs text-gray-400 dark:text-gray-500">
  111. {$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
  112. {` {{CLIPBOARD}}`}</span
  113. >
  114. {$i18n.t('variable to have them replaced with clipboard content.')}
  115. </div>
  116. </div>
  117. </div>
  118. <div class="my-4 flex justify-end pb-20">
  119. <button
  120. class=" text-sm w-full lg:w-fit px-4 py-2 transition rounded-lg {loading
  121. ? ' cursor-not-allowed bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'
  122. : 'bg-black hover:bg-gray-900 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black'} flex w-full justify-center"
  123. type="submit"
  124. disabled={loading}
  125. >
  126. <div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
  127. {#if loading}
  128. <div class="ml-1.5 self-center">
  129. <svg
  130. class=" w-4 h-4"
  131. viewBox="0 0 24 24"
  132. fill="currentColor"
  133. xmlns="http://www.w3.org/2000/svg"
  134. ><style>
  135. .spinner_ajPY {
  136. transform-origin: center;
  137. animation: spinner_AtaB 0.75s infinite linear;
  138. }
  139. @keyframes spinner_AtaB {
  140. 100% {
  141. transform: rotate(360deg);
  142. }
  143. }
  144. </style><path
  145. d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
  146. opacity=".25"
  147. /><path
  148. d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
  149. class="spinner_ajPY"
  150. /></svg
  151. >
  152. </div>
  153. {/if}
  154. </button>
  155. </div>
  156. </form>
  157. </div>