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

refac: wip

Browse Source
This commit is contained in:
Timothy J. Baek
2024-09-23 01:36:46 +02:00
parent fd5e8b4fcf
commit 5978e7c9a6
7 changed files with 244 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages/Message.svelte
+53 -34
View File
@@ -10,6 +10,10 @@
import MultiResponseMessages from './MultiResponseMessages.svelte';
import ResponseMessage from './ResponseMessage.svelte';
import UserMessage from './UserMessage.svelte';
import { updateChatById } from '$lib/apis/chats';
// h here refers to the height of the message graph
export let h;
export let chatId;
@@ -21,19 +25,15 @@
export let scrollToBottom;
export let chatActionHandler;
export let confirmEditMessage;
export let confirmEditResponseMessage;
export let showPreviousMessage;
export let showNextMessage;
export let rateMessage;
export let editMessage;
export let deleteMessage;
export let saveNewResponseMessage;
export let rateMessage;
export let regenerateResponse;
export let continueGeneration;
export let continueResponse;
// MultiResponseMessages
export let mergeResponses;
@@ -48,44 +48,39 @@
};
</script>
<div class="w-full">
<div
class="flex flex-col justify-between px-5 mb-3 {($settings?.widescreenMode ?? null)
? 'max-w-full'
: 'max-w-5xl'} mx-auto rounded-lg group"
>
{#if history.messages[messageId].role === 'user'}
{@const message = history.messages[messageId]}
<div
class="flex flex-col justify-between px-5 mb-3 w-full {($settings?.widescreenMode ?? null)
? 'max-w-full'
: 'max-w-5xl'} mx-auto rounded-lg group"
>
{#if history.messages[messageId]}
{@const message = history.messages[messageId]}
{#if message.role === 'user'}
<UserMessage
{user}
{history}
{message}
isFirstMessage={h === 0}
siblings={message.parentId !== null
? (history.messages[message.parentId]?.childrenIds ?? [])
: (Object.values(history.messages)
.filter((message) => message.parentId === null)
.map((message) => message.id) ?? [])}
{confirmEditMessage}
{showPreviousMessage}
{showNextMessage}
copyToClipboard={copyToClipboardWithToast}
isFirstMessage={messageIdx === 0}
{editMessage}
on:delete={() => deleteMessage(message.id)}
{readOnly}
/>
{:else if (history.messages[message.parentId]?.models?.length ?? 1) === 1}
<ResponseMessage
{message}
isLastMessage={messageId === history.currentId}
siblings={history.messages[message.parentId]?.childrenIds ?? []}
isLastMessage={messageIdx + 1 === messages.length}
{readOnly}
{updateChatMessages}
{confirmEditResponseMessage}
{saveNewResponseMessage}
{showPreviousMessage}
{showNextMessage}
{editMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{continueResponse}
{regenerateResponse}
on:action={async (e) => {
console.log('action', e);
@@ -96,6 +91,10 @@
await chatActionHandler(chatId, id, message.model, message.id, event);
}
}}
on:update={async (e) => {
console.log('update', e);
// call updateChatHistory
}}
on:save={async (e) => {
console.log('save', e);
@@ -111,6 +110,7 @@
});
}
}}
{readOnly}
/>
{:else}
<MultiResponseMessages
@@ -118,16 +118,14 @@
{chatId}
messageIds={[]}
parentMessage={history.messages[message.parentId]}
isLastMessage={messageIdx + 1 === messages.length}
{readOnly}
{updateChatMessages}
{saveNewResponseMessage}
{confirmEditResponseMessage}
isLastMessage={messageId === history.currentId}
{editMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{continueResponse}
{mergeResponses}
{regenerateResponse}
copyToClipboard={copyToClipboardWithToast}
{readOnly}
on:action={async (e) => {
console.log('action', e);
if (typeof e.detail === 'string') {
@@ -152,5 +150,26 @@
}}
/>
{/if}
</div>
{/if}
</div>
{#if history.messages[messageId]?.parentId !== null}
<svelte:self
h={h + 1}
{chatId}
{history}
messageId={history.messages[messageId]?.parentId}
{user}
{scrollToBottom}
{chatActionHandler}
{showPreviousMessage}
{showNextMessage}
{editMessage}
{deleteMessage}
{rateMessage}
{regenerateResponse}
{continueResponse}
{mergeResponses}
{readOnly}
></svelte:self>
{/if}
src/lib/components/chat/Messages/MultiResponseMessages.svelte
+2 -2
View File
@@ -34,7 +34,7 @@
export let rateMessage: Function;
export let copyToClipboard: Function;
export let continueGeneration: Function;
export let continueResponse: Function;
export let mergeResponses: Function;
export let regenerateResponse: Function;
export let saveNewResponseMessage: Function;
@@ -193,7 +193,7 @@
{readOnly}
{rateMessage}
{copyToClipboard}
{continueGeneration}
{continueResponse}
regenerateResponse={async (message) => {
regenerateResponse(message);
await tick();
src/lib/components/chat/Messages/ResponseMessage.svelte
+17 -15
View File
@@ -13,6 +13,7 @@
import { synthesizeOpenAISpeech } from '$lib/apis/audio';
import { imageGenerations } from '$lib/apis/images';
import {
copyToClipboard as _copyToClipboard,
approximateToHumanReadable,
extractParagraphsForAudio,
extractSentencesForAudio,
@@ -83,16 +84,15 @@
export let readOnly = false;
export let updateChatMessages: Function;
export let confirmEditResponseMessage: Function;
export let saveNewResponseMessage: Function = () => {};
export let showPreviousMessage: Function;
export let showNextMessage: Function;
export let editMessage: Function;
export let rateMessage: Function;
export let copyToClipboard: Function;
export let continueGeneration: Function;
export let continueResponse: Function;
export let regenerateResponse: Function;
let model = null;
@@ -111,6 +111,13 @@
let showRateComment = false;
const copyToClipboard = async (text) => {
const res = await _copyToClipboard(text);
if (res) {
toast.success($i18n.t('Copying to clipboard was successful!'));
}
};
const playAudio = (idx: number) => {
return new Promise<void>((res) => {
speakingIdx = idx;
@@ -260,11 +267,7 @@
};
const editMessageConfirmHandler = async () => {
if (editedContent === '') {
editedContent = ' ';
}
confirmEditResponseMessage(message.id, editedContent);
editMessage(message.id, editedContent ? editedContent : '', false);
edit = false;
editedContent = '';
@@ -272,8 +275,8 @@
await tick();
};
const saveNewMessageHandler = async () => {
saveNewResponseMessage(message, editedContent);
const saveAsCopyHandler = async () => {
editMessage(message.id, editedContent ? editedContent : '');
edit = false;
editedContent = '';
@@ -424,7 +427,7 @@
id="save-new-message-button"
class=" px-4 py-2 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
on:click={() => {
saveNewMessageHandler();
saveAsCopyHandler();
}}
>
{$i18n.t('Save As Copy')}
@@ -909,7 +912,7 @@
? '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={() => {
continueGeneration();
continueResponse();
(model?.actions ?? [])
.filter((action) => action?.__webui__ ?? false)
@@ -1028,8 +1031,7 @@
bind:show={showRateComment}
bind:message
on:submit={(e) => {
updateChatMessages();
dispatch('update');
(model?.actions ?? [])
.filter((action) => action?.__webui__ ?? false)
.forEach((action) => {
src/lib/components/chat/Messages/UserMessage.svelte
+23 -12
View File
@@ -1,18 +1,20 @@
<script lang="ts">
import dayjs from 'dayjs';
import { toast } from 'svelte-sonner';
import { tick, createEventDispatcher, getContext } from 'svelte';
import { models, settings } from '$lib/stores';
import { user as _user } from '$lib/stores';
import {
copyToClipboard as _copyToClipboard,
processResponseContent,
replaceTokens
} from '$lib/utils';
import Name from './Name.svelte';
import ProfileImage from './ProfileImage.svelte';
import { models, settings } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import { user as _user } from '$lib/stores';
import { getFileContentById } from '$lib/apis/files';
import FileItem from '$lib/components/common/FileItem.svelte';
import { marked } from 'marked';
import { processResponseContent, replaceTokens } from '$lib/utils';
import MarkdownTokens from './Markdown/MarkdownTokens.svelte';
import Markdown from './Markdown.svelte';
const i18n = getContext('i18n');
@@ -23,16 +25,25 @@
export let message;
export let siblings;
export let isFirstMessage: boolean;
export let readOnly: boolean;
export let confirmEditMessage: Function;
export let showPreviousMessage: Function;
export let showNextMessage: Function;
export let copyToClipboard: Function;
export let editMessage: Function;
export let readOnly: boolean;
let edit = false;
let editedContent = '';
let messageEditTextAreaElement: HTMLTextAreaElement;
const copyToClipboard = async (text) => {
const res = await _copyToClipboard(text);
if (res) {
toast.success($i18n.t('Copying to clipboard was successful!'));
}
};
const editMessageHandler = async () => {
edit = true;
editedContent = message.content;
@@ -46,7 +57,7 @@
};
const editMessageConfirmHandler = async (submit = true) => {
confirmEditMessage(message.id, editedContent, submit);
editMessage(message.id, editedContent, submit);
edit = false;
editedContent = '';