Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/enh: regeneration options

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-08-09 02:00:21 +04:00
parent 17084f629c
commit 92f27bb21e
9 changed files with 300 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages/MultiResponseMessages.svelte
+5 -5
View File
@@ -313,8 +313,8 @@
{actionMessage}
{submitMessage}
{continueResponse}
regenerateResponse={async (message) => {
regenerateResponse(message);
regenerateResponse={async (message, prompt = null) => {
regenerateResponse(message, prompt);
await tick();
groupedMessageIdsIdx[selectedModelIdx] =
groupedMessageIds[selectedModelIdx].messageIds.length - 1;
@@ -368,8 +368,8 @@
{actionMessage}
{submitMessage}
{continueResponse}
regenerateResponse={async (message) => {
regenerateResponse(message);
regenerateResponse={async (message, prompt = null) => {
regenerateResponse(message, prompt);
await tick();
groupedMessageIdsIdx[modelIdx] =
groupedMessageIds[modelIdx].messageIds.length - 1;
@@ -428,7 +428,7 @@
id="merge-response-button"
class="{true
? 'visible'
: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
mergeResponsesHandler();
}}
src/lib/components/chat/Messages/ResponseMessage.svelte
+63 -39
View File
@@ -51,6 +51,7 @@
import FollowUps from './ResponseMessage/FollowUps.svelte';
import { fade } from 'svelte/transition';
import { flyAndScale } from '$lib/utils/transitions';
import RegenerateMenu from './ResponseMessage/RegenerateMenu.svelte';
interface MessageType {
id: string;
@@ -1316,7 +1317,7 @@
id="continue-response-button"
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
continueResponse();
}}
@@ -1345,47 +1346,70 @@
</Tooltip>
{/if}
<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
<button
type="button"
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={() => {
showRateComment = false;
regenerateResponse(message);
<button
type="button"
class="hidden regenerate-response-button"
on:click={() => {
showRateComment = false;
regenerateResponse(message);
(model?.actions ?? []).forEach((action) => {
dispatch('action', {
id: action.id,
event: {
id: 'regenerate-response',
data: {
messageId: message.id
}
(model?.actions ?? []).forEach((action) => {
dispatch('action', {
id: action.id,
event: {
id: 'regenerate-response',
data: {
messageId: message.id
}
});
}
});
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
aria-hidden="true"
stroke="currentColor"
class="w-4 h-4"
});
}}
/>
<RegenerateMenu
onRegenerate={(prompt = null) => {
showRateComment = false;
regenerateResponse(message, prompt);
(model?.actions ?? []).forEach((action) => {
dispatch('action', {
id: action.id,
event: {
id: 'regenerate-response',
data: {
messageId: message.id
}
}
});
});
}}
>
<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
<div
aria-label={$i18n.t('Regenerate')}
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
>
<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>
</button>
</Tooltip>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
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>
</Tooltip>
</RegenerateMenu>
{#if siblings.length > 1}
<Tooltip content={$i18n.t('Delete')} placement="bottom">
@@ -1395,7 +1419,7 @@
id="delete-response-button"
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition"
on:click={() => {
showDeleteConfirm = true;
}}
src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
+126
View File
@@ -0,0 +1,126 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
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
on:change={(e) => {
if (e.detail === false) {
onClose();
}
}}
align="end"
>
<slot></slot>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[190px] rounded-xl px-1 py-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
sideOffset={-2}
side="bottom"
align="start"
transition={flyAndScale}
>
<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
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 dark:border-gray-800 my-1 mx-2" />
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
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>
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
on:click={() => {
onRegenerate($i18n.t('Add Details'));
}}
>
<LineSpace strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add Details')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg"
on:click={() => {
onRegenerate($i18n.t('More Concise'));
}}
>
<LineSpaceSmaller strokeWidth="2" />
<div class="flex items-center">{$i18n.t('More Concise')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</div>
</Dropdown>