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

feat: /chat route support

Browse source
This commit is contained in:
Timothy J. Baek 2023-12-10 22:47:16 -08:00
parent 4c729bf3c6
commit 83e8db9b6a
3 changed files with 373 additions and 296 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/lib/components/chat/Messages.svelte
View file

@ -163,6 +163,13 @@
// let editMessage = history.messages[messageId];
history.messages[messageId].edit = true;
history.messages[messageId].editedContent = history.messages[messageId].content;
await tick();
const editElement = document.getElementById(`message-edit-${messageId}`);
editElement.style.height = '';
editElement.style.height = `${editElement.scrollHeight}px`;
};
const confirmEditMessage = async (messageId) => {
@ -195,6 +202,11 @@
await sendPrompt(userPrompt, userMessageId, $chatId);
};
const confirmEditResponseMessage = async (messageId) => {
history.messages[messageId].edit = false;
history.messages[messageId].content = history.messages[messageId].editedContent;
};
const cancelEditMessage = (messageId) => {
history.messages[messageId].edit = false;
history.messages[messageId].editedContent = undefined;
@ -415,6 +427,7 @@
{#if message?.edit === true}
<div class=" w-full">
<textarea
id="message-edit-{message.id}"
class=" bg-transparent outline-none w-full resize-none"
bind:value={history.messages[message.id].editedContent}
on:input={(e) => {
@ -427,7 +440,7 @@
}}
/>
<div class=" mt-2 flex justify-center space-x-2 text-sm font-medium">
<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
<button
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
on:click={() => {
@ -609,6 +622,50 @@
</div>
</div>
{/if}
{/if}
{#if message.role === 'assistant'}
<div>
{#if message?.edit === true}
<div class=" w-full">
<textarea
id="message-edit-{message.id}"
class=" bg-transparent outline-none w-full resize-none"
bind:value={history.messages[message.id].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`;
}}
on:load={() => {
console.log('loadeddd');
}}
on:loadstart
/>
<div class=" mt-2 mb-1 flex justify-center space-x-2 text-sm font-medium">
<button
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
on:click={() => {
confirmEditResponseMessage(message.id);
}}
>
Save
</button>
<button
class=" px-4 py-2 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-100 transition outline outline-1 outline-gray-200 dark:outline-gray-600 rounded-lg"
on:click={() => {
cancelEditMessage(message.id);
}}
>
Cancel
</button>
</div>
</div>
{:else}
<div class="w-full">
{@html marked(message.content.replace('\\\\', '\\\\\\'))}
@ -638,8 +695,9 @@
</button>
<div class="text-xs font-bold self-center">
{history.messages[message.parentId].childrenIds.indexOf(message.id) +
1} / {history.messages[message.parentId].childrenIds.length}
{history.messages[message.parentId].childrenIds.indexOf(
message.id
) + 1} / {history.messages[message.parentId].childrenIds.length}
</div>
<button
@ -664,8 +722,10 @@
</div>
{/if}
<!-- <button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition"
<button
class="{messageIdx + 1 === messages.length
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => {
editMessageHandler(message.id);
}}
@ -684,7 +744,7 @@
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
/>
</svg>
</button> -->
</button>
<button
class="{messageIdx + 1 === messages.length
@ -810,6 +870,8 @@
</div>
{/if}
</div>
{/if}
</div>
<!-- {} -->
</div>
</div>

116
src/routes/(app)/+page.svelte
View file

@ -118,38 +118,11 @@
];
}
await tick();
window.scrollTo({ top: document.body.scrollHeight });
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
model: model,
prompt: userPrompt,
system: $settings.system ?? undefined,
options: {
seed: $settings.seed ?? undefined,
temperature: $settings.temperature ?? undefined,
repeat_penalty: $settings.repeat_penalty ?? undefined,
top_k: $settings.top_k ?? undefined,
top_p: $settings.top_p ?? undefined,
num_ctx: $settings.num_ctx ?? undefined,
...($settings.options ?? {})
},
format: $settings.requestFormat ?? undefined,
context:
history.messages[parentId] !== null &&
history.messages[parentId].parentId in history.messages
? history.messages[history.messages[parentId].parentId]?.context ?? undefined
: undefined
})
});
// const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/chat`, {
// const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
// method: 'POST',
// headers: {
// 'Content-Type': 'text/event-stream',
@ -158,17 +131,8 @@
// },
// body: JSON.stringify({
// model: model,
// messages: [
// $settings.system
// ? {
// role: 'system',
// content: $settings.system
// }
// : undefined,
// ...messages
// ]
// .filter((message) => message)
// .map((message) => ({ role: message.role, content: message.content })),
// prompt: userPrompt,
// system: $settings.system ?? undefined,
// options: {
// seed: $settings.seed ?? undefined,
// temperature: $settings.temperature ?? undefined,
@ -178,10 +142,48 @@
// num_ctx: $settings.num_ctx ?? undefined,
// ...($settings.options ?? {})
// },
// format: $settings.requestFormat ?? undefined
// format: $settings.requestFormat ?? undefined,
// context:
// history.messages[parentId] !== null &&
// history.messages[parentId].parentId in history.messages
// ? history.messages[history.messages[parentId].parentId]?.context ?? undefined
// : undefined
// })
// });
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
model: model,
messages: [
$settings.system
? {
role: 'system',
content: $settings.system
}
: undefined,
...messages
]
.filter((message) => message)
.map((message) => ({ role: message.role, content: message.content })),
options: {
seed: $settings.seed ?? undefined,
temperature: $settings.temperature ?? undefined,
repeat_penalty: $settings.repeat_penalty ?? undefined,
top_k: $settings.top_k ?? undefined,
top_p: $settings.top_p ?? undefined,
num_ctx: $settings.num_ctx ?? undefined,
...($settings.options ?? {})
},
format: $settings.requestFormat ?? undefined
})
});
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
@ -189,12 +191,9 @@
while (true) {
const { value, done } = await reader.read();
if (done || stopResponseFlag) {
if (stopResponseFlag) {
if (done || stopResponseFlag || _chatId !== $chatId) {
responseMessage.done = true;
messages = messages;
}
break;
}
@ -205,18 +204,28 @@
if (line !== '') {
console.log(line);
let data = JSON.parse(line);
if ('detail' in data) {
throw data;
}
if (data.done == false) {
if (responseMessage.content == '' && data.response == '\n') {
if (responseMessage.content == '' && data.message.content == '\n') {
continue;
} else {
responseMessage.content += data.response;
responseMessage.content += data.message.content;
messages = messages;
}
} else if ('detail' in data) {
throw data;
} else {
responseMessage.done = true;
responseMessage.context = data.context;
responseMessage.context = data.context ?? null;
responseMessage.info = {
total_duration: data.total_duration,
prompt_eval_count: data.prompt_eval_count,
prompt_eval_duration: data.prompt_eval_duration,
eval_count: data.eval_count,
eval_duration: data.eval_duration
};
messages = messages;
}
}
@ -324,12 +333,9 @@
while (true) {
const { value, done } = await reader.read();
if (done || stopResponseFlag) {
if (stopResponseFlag) {
if (done || stopResponseFlag || _chatId !== $chatId) {
responseMessage.done = true;
messages = messages;
}
break;
}

111
src/routes/(app)/c/[id]/+page.svelte
View file

@ -152,38 +152,11 @@
];
}
await tick();
window.scrollTo({ top: document.body.scrollHeight });
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
model: model,
prompt: userPrompt,
system: $settings.system ?? undefined,
options: {
seed: $settings.seed ?? undefined,
temperature: $settings.temperature ?? undefined,
repeat_penalty: $settings.repeat_penalty ?? undefined,
top_k: $settings.top_k ?? undefined,
top_p: $settings.top_p ?? undefined,
num_ctx: $settings.num_ctx ?? undefined,
...($settings.options ?? {})
},
format: $settings.requestFormat ?? undefined,
context:
history.messages[parentId] !== null &&
history.messages[parentId].parentId in history.messages
? history.messages[history.messages[parentId].parentId]?.context ?? undefined
: undefined
})
});
// const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/chat`, {
// const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
// method: 'POST',
// headers: {
// 'Content-Type': 'text/event-stream',
@ -192,17 +165,8 @@
// },
// body: JSON.stringify({
// model: model,
// messages: [
// $settings.system
// ? {
// role: 'system',
// content: $settings.system
// }
// : undefined,
// ...messages
// ]
// .filter((message) => message)
// .map((message) => ({ role: message.role, content: message.content })),
// prompt: userPrompt,
// system: $settings.system ?? undefined,
// options: {
// seed: $settings.seed ?? undefined,
// temperature: $settings.temperature ?? undefined,
@ -212,10 +176,48 @@
// num_ctx: $settings.num_ctx ?? undefined,
// ...($settings.options ?? {})
// },
// format: $settings.requestFormat ?? undefined
// format: $settings.requestFormat ?? undefined,
// context:
// history.messages[parentId] !== null &&
// history.messages[parentId].parentId in history.messages
// ? history.messages[history.messages[parentId].parentId]?.context ?? undefined
// : undefined
// })
// });
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
...($settings.authHeader && { Authorization: $settings.authHeader }),
...($user && { Authorization: `Bearer ${localStorage.token}` })
},
body: JSON.stringify({
model: model,
messages: [
$settings.system
? {
role: 'system',
content: $settings.system
}
: undefined,
...messages
]
.filter((message) => message)
.map((message) => ({ role: message.role, content: message.content })),
options: {
seed: $settings.seed ?? undefined,
temperature: $settings.temperature ?? undefined,
repeat_penalty: $settings.repeat_penalty ?? undefined,
top_k: $settings.top_k ?? undefined,
top_p: $settings.top_p ?? undefined,
num_ctx: $settings.num_ctx ?? undefined,
...($settings.options ?? {})
},
format: $settings.requestFormat ?? undefined
})
});
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
@ -223,12 +225,9 @@
while (true) {
const { value, done } = await reader.read();
if (done || stopResponseFlag) {
if (stopResponseFlag) {
if (done || stopResponseFlag || _chatId !== $chatId) {
responseMessage.done = true;
messages = messages;
}
break;
}
@ -239,18 +238,28 @@
if (line !== '') {
console.log(line);
let data = JSON.parse(line);
if ('detail' in data) {
throw data;
}
if (data.done == false) {
if (responseMessage.content == '' && data.response == '\n') {
if (responseMessage.content == '' && data.message.content == '\n') {
continue;
} else {
responseMessage.content += data.response;
responseMessage.content += data.message.content;
messages = messages;
}
} else if ('detail' in data) {
throw data;
} else {
responseMessage.done = true;
responseMessage.context = data.context;
responseMessage.context = data.context ?? null;
responseMessage.info = {
total_duration: data.total_duration,
prompt_eval_count: data.prompt_eval_count,
prompt_eval_duration: data.prompt_eval_duration,
eval_count: data.eval_count,
eval_duration: data.eval_duration
};
messages = messages;
}
}