|
@@ -38,6 +38,7 @@
|
|
let selectedReason = null;
|
|
let selectedReason = null;
|
|
let comment = '';
|
|
let comment = '';
|
|
|
|
|
|
|
|
+ let detailedRating = null;
|
|
let selectedModel = null;
|
|
let selectedModel = null;
|
|
|
|
|
|
$: if (message?.annotation?.rating === 1) {
|
|
$: if (message?.annotation?.rating === 1) {
|
|
@@ -56,6 +57,7 @@
|
|
tags = (message?.annotation?.tags ?? []).map((tag) => ({
|
|
tags = (message?.annotation?.tags ?? []).map((tag) => ({
|
|
name: tag
|
|
name: tag
|
|
}));
|
|
}));
|
|
|
|
+ detailedRating = message?.annotation?.details?.rating ?? null;
|
|
};
|
|
};
|
|
|
|
|
|
onMount(() => {
|
|
onMount(() => {
|
|
@@ -79,7 +81,10 @@
|
|
dispatch('save', {
|
|
dispatch('save', {
|
|
reason: selectedReason,
|
|
reason: selectedReason,
|
|
comment: comment,
|
|
comment: comment,
|
|
- tags: tags.map((tag) => tag.name)
|
|
|
|
|
|
+ tags: tags.map((tag) => tag.name),
|
|
|
|
+ details: {
|
|
|
|
+ rating: detailedRating
|
|
|
|
+ }
|
|
});
|
|
});
|
|
|
|
|
|
toast.success($i18n.t('Thanks for your feedback!'));
|
|
toast.success($i18n.t('Thanks for your feedback!'));
|
|
@@ -100,7 +105,9 @@
|
|
id="message-feedback-{message.id}"
|
|
id="message-feedback-{message.id}"
|
|
>
|
|
>
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex justify-between items-center">
|
|
- <div class=" text-sm">{$i18n.t('Tell us more:')}</div>
|
|
|
|
|
|
+ <div class="text-sm font-medium">{$i18n.t('How would you rate this response?')}</div>
|
|
|
|
+
|
|
|
|
+ <!-- <div class=" text-sm">{$i18n.t('Tell us more:')}</div> -->
|
|
|
|
|
|
<button
|
|
<button
|
|
on:click={() => {
|
|
on:click={() => {
|
|
@@ -120,53 +127,89 @@
|
|
</button>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- {#if reasons.length > 0}
|
|
|
|
- <div class="flex flex-wrap gap-1.5 text-sm mt-2.5">
|
|
|
|
- {#each reasons as reason}
|
|
|
|
- <button
|
|
|
|
- class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-100 dark:hover:bg-gray-850 {selectedReason ===
|
|
|
|
- reason
|
|
|
|
- ? 'bg-gray-200 dark:bg-gray-800'
|
|
|
|
- : ''} transition rounded-lg"
|
|
|
|
- on:click={() => {
|
|
|
|
- selectedReason = reason;
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- {#if reason === 'accurate_information'}
|
|
|
|
- {$i18n.t('Accurate information')}
|
|
|
|
- {:else if reason === 'followed_instructions_perfectly'}
|
|
|
|
- {$i18n.t('Followed instructions perfectly')}
|
|
|
|
- {:else if reason === 'showcased_creativity'}
|
|
|
|
- {$i18n.t('Showcased creativity')}
|
|
|
|
- {:else if reason === 'positive_attitude'}
|
|
|
|
- {$i18n.t('Positive attitude')}
|
|
|
|
- {:else if reason === 'attention_to_detail'}
|
|
|
|
- {$i18n.t('Attention to detail')}
|
|
|
|
- {:else if reason === 'thorough_explanation'}
|
|
|
|
- {$i18n.t('Thorough explanation')}
|
|
|
|
- {:else if reason === 'dont_like_the_style'}
|
|
|
|
- {$i18n.t("Don't like the style")}
|
|
|
|
- {:else if reason === 'too_verbose'}
|
|
|
|
- {$i18n.t('Too verbose')}
|
|
|
|
- {:else if reason === 'not_helpful'}
|
|
|
|
- {$i18n.t('Not helpful')}
|
|
|
|
- {:else if reason === 'not_factually_correct'}
|
|
|
|
- {$i18n.t('Not factually correct')}
|
|
|
|
- {:else if reason === 'didnt_fully_follow_instructions'}
|
|
|
|
- {$i18n.t("Didn't fully follow instructions")}
|
|
|
|
- {:else if reason === 'refused_when_it_shouldnt_have'}
|
|
|
|
- {$i18n.t("Refused when it shouldn't have")}
|
|
|
|
- {:else if reason === 'being_lazy'}
|
|
|
|
- {$i18n.t('Being lazy')}
|
|
|
|
- {:else if reason === 'other'}
|
|
|
|
- {$i18n.t('Other')}
|
|
|
|
- {:else}
|
|
|
|
- {reason}
|
|
|
|
- {/if}
|
|
|
|
- </button>
|
|
|
|
- {/each}
|
|
|
|
|
|
+ <div class="w-full flex justify-center">
|
|
|
|
+ <div class=" relative w-fit">
|
|
|
|
+ <div class="mt-1.5 w-fit flex gap-1 pb-5">
|
|
|
|
+ <!-- 1-10 scale -->
|
|
|
|
+ {#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
|
|
|
|
+ <button
|
|
|
|
+ class="size-7 text-sm border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
|
|
|
|
+ rating
|
|
|
|
+ ? 'bg-gray-100 dark:bg-gray-800'
|
|
|
|
+ : ''} transition rounded-full disabled:cursor-not-allowed disabled:bg-white disabled:dark:bg-gray-900"
|
|
|
|
+ on:click={() => {
|
|
|
|
+ detailedRating = rating;
|
|
|
|
+ }}
|
|
|
|
+ disabled={message?.annotation?.rating === -1 ? rating > 5 : rating < 6}
|
|
|
|
+ >
|
|
|
|
+ {rating}
|
|
|
|
+ </button>
|
|
|
|
+ {/each}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="absolute bottom-0 left-0 right-0 flex justify-between text-xs">
|
|
|
|
+ <div>
|
|
|
|
+ 1 - {$i18n.t('Awful')}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div>
|
|
|
|
+ 10 - {$i18n.t('Amazing')}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- {/if}
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div>
|
|
|
|
+ {#if reasons.length > 0}
|
|
|
|
+ <div class="text-sm mt-1.5 font-medium">{$i18n.t('Why?')}</div>
|
|
|
|
+
|
|
|
|
+ <div class="flex flex-wrap gap-1.5 text-sm mt-1.5">
|
|
|
|
+ {#each reasons as reason}
|
|
|
|
+ <button
|
|
|
|
+ class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason ===
|
|
|
|
+ reason
|
|
|
|
+ ? 'bg-gray-100 dark:bg-gray-800'
|
|
|
|
+ : ''} transition rounded-xl"
|
|
|
|
+ on:click={() => {
|
|
|
|
+ selectedReason = reason;
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ {#if reason === 'accurate_information'}
|
|
|
|
+ {$i18n.t('Accurate information')}
|
|
|
|
+ {:else if reason === 'followed_instructions_perfectly'}
|
|
|
|
+ {$i18n.t('Followed instructions perfectly')}
|
|
|
|
+ {:else if reason === 'showcased_creativity'}
|
|
|
|
+ {$i18n.t('Showcased creativity')}
|
|
|
|
+ {:else if reason === 'positive_attitude'}
|
|
|
|
+ {$i18n.t('Positive attitude')}
|
|
|
|
+ {:else if reason === 'attention_to_detail'}
|
|
|
|
+ {$i18n.t('Attention to detail')}
|
|
|
|
+ {:else if reason === 'thorough_explanation'}
|
|
|
|
+ {$i18n.t('Thorough explanation')}
|
|
|
|
+ {:else if reason === 'dont_like_the_style'}
|
|
|
|
+ {$i18n.t("Don't like the style")}
|
|
|
|
+ {:else if reason === 'too_verbose'}
|
|
|
|
+ {$i18n.t('Too verbose')}
|
|
|
|
+ {:else if reason === 'not_helpful'}
|
|
|
|
+ {$i18n.t('Not helpful')}
|
|
|
|
+ {:else if reason === 'not_factually_correct'}
|
|
|
|
+ {$i18n.t('Not factually correct')}
|
|
|
|
+ {:else if reason === 'didnt_fully_follow_instructions'}
|
|
|
|
+ {$i18n.t("Didn't fully follow instructions")}
|
|
|
|
+ {:else if reason === 'refused_when_it_shouldnt_have'}
|
|
|
|
+ {$i18n.t("Refused when it shouldn't have")}
|
|
|
|
+ {:else if reason === 'being_lazy'}
|
|
|
|
+ {$i18n.t('Being lazy')}
|
|
|
|
+ {:else if reason === 'other'}
|
|
|
|
+ {$i18n.t('Other')}
|
|
|
|
+ {:else}
|
|
|
|
+ {reason}
|
|
|
|
+ {/if}
|
|
|
|
+ </button>
|
|
|
|
+ {/each}
|
|
|
|
+ </div>
|
|
|
|
+ {/if}
|
|
|
|
+ </div>
|
|
|
|
|
|
<div class="mt-2">
|
|
<div class="mt-2">
|
|
<textarea
|
|
<textarea
|
|
@@ -195,7 +238,7 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<button
|
|
<button
|
|
- class=" bg-emerald-700 hover:bg-emerald-800 transition text-white text-sm font-medium rounded-xl px-3.5 py-1.5"
|
|
|
|
|
|
+ class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
|
|
on:click={() => {
|
|
on:click={() => {
|
|
saveHandler();
|
|
saveHandler();
|
|
}}
|
|
}}
|