tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

Merge pull request #33 from ollama-webui/dev

Browse source 
feat: message edit
This commit is contained in:
Timothy Jaeryang Baek 2023-10-28 01:27:28 -05:00 committed by GitHub
commit 8987048848
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 99 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/routes/+page.svelte
View file

@ -260,6 +260,37 @@
showSettings = true;
};
const editMessage = async (messageIdx) => {
messages = messages.map((message, idx) => {
if (messageIdx === idx) {
message.edit = true;
message.editedContent = message.content;
}
return message;
});
};
const confirmEditMessage = async (messageIdx) => {
let user_prompt = messages.at(messageIdx).editedContent;
messages.splice(messageIdx, messages.length - messageIdx);
messages = messages;
await submitPrompt(user_prompt);
};
const cancelEditMessage = (messageIdx) => {
messages = messages.map((message, idx) => {
if (messageIdx === idx) {
message.edit = undefined;
message.editedContent = undefined;
}
return message;
});
console.log(messages);
};
//////////////////////////
// Ollama functions
//////////////////////////
@ -633,7 +664,7 @@
{:else}
{#each messages as message, messageIdx}
<div class=" w-full {message.role == 'user' ? '' : ' bg-gray-700'}">
<div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg">
<div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg group">
<div class="space-x-7 flex w-full">
<div class="">
<img
@ -664,16 +695,80 @@
</div>
{:else}
<div
class="prose max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-2 prose-ol:-my-2 prose-li:-my-2 whitespace-pre-line"
class="prose w-full max-w-full prose-invert prose-headings:my-0 prose-p:my-0 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-2 prose-ol:-my-2 prose-li:-my-2 whitespace-pre-line"
>
{#if message.role == 'user'}
{#if message?.edit === true}
<div>
<textarea
class=" bg-transparent outline-none w-full resize-none"
bind:value={message.editedContent}
on:input={(e) => {
e.target.style.height = '';
e.target.style.height = `${e.target.scrollHeight}px`;
}}
on:focus={(e) => {
e.target.style.height = '';
e.target.style.height = `${e.target.scrollHeight}px`;
}}
/>
<div class=" flex justify-end space-x-2 text-sm text-gray-100">
<button
class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 transition rounded-lg"
on:click={() => {
confirmEditMessage(messageIdx);
}}
>
Save & Submit
</button>
<button
class=" px-4 py-2.5 bg-gray-800 hover:bg-gray-700 transition outline outline-1 outline-gray-600 rounded-lg"
on:click={() => {
cancelEditMessage(messageIdx);
}}
>
Cancel
</button>
</div>
</div>
{:else}
{message.content}
{/if}
{:else}
{@html marked.parse(message.content)}
{/if}
</div>
{/if}
<!-- {} -->
</div>
<div>
{#if message.role != 'user' && message.done}
{#if message.role == 'user'}
{#if message?.edit !== true}
<button
class="invisible group-hover:visible p-1 rounded hover:bg-gray-700 transition"
on:click={() => {
editMessage(messageIdx);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
/>
<path
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
/>
</svg>
</button>
{/if}
{:else if message.done}
<button
class="p-1 rounded hover:bg-gray-700 transition"
on:click={() => {