Skip to content

GitLab

Commit 83e8db9b authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

feat: /chat route support

parent 4c729bf3
Show whitespace changes
Inline Side-by-side
Showing with 353 additions and 276 deletions
src/lib/components/chat/Messages.svelte
View file @ 83e8db9b
...@@ -163,6 +163,13 @@ ...@@ -163,6 +163,13 @@
// let editMessage = history.messages[messageId]; // let editMessage = history.messages[messageId];
history.messages[messageId].edit = true; history.messages[messageId].edit = true;
history.messages[messageId].editedContent = history.messages[messageId].content; 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) => { const confirmEditMessage = async (messageId) => {
...@@ -195,6 +202,11 @@ ...@@ -195,6 +202,11 @@
await sendPrompt(userPrompt, userMessageId, $chatId); 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) => { const cancelEditMessage = (messageId) => {
history.messages[messageId].edit = false; history.messages[messageId].edit = false;
history.messages[messageId].editedContent = undefined; history.messages[messageId].editedContent = undefined;
...@@ -415,6 +427,7 @@ ...@@ -415,6 +427,7 @@
{#if message?.edit === true} {#if message?.edit === true}
<div class=" w-full"> <div class=" w-full">
<textarea <textarea
id="message-edit-{message.id}"
class=" bg-transparent outline-none w-full resize-none" class=" bg-transparent outline-none w-full resize-none"
bind:value={history.messages[message.id].editedContent} bind:value={history.messages[message.id].editedContent}
on:input={(e) => { on:input={(e) => {
...@@ -427,7 +440,7 @@ ...@@ -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 <button
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded-lg"
on:click={() => { on:click={() => {
...@@ -609,6 +622,50 @@ ...@@ -609,6 +622,50 @@
</div> </div>
</div> </div>
{/if} {/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} {:else}
<div class="w-full"> <div class="w-full">
{@html marked(message.content.replace('\\\\', '\\\\\\'))} {@html marked(message.content.replace('\\\\', '\\\\\\'))}
...@@ -638,8 +695,9 @@ ...@@ -638,8 +695,9 @@
</button> </button>
<div class="text-xs font-bold self-center"> <div class="text-xs font-bold self-center">
{history.messages[message.parentId].childrenIds.indexOf(message.id) + {history.messages[message.parentId].childrenIds.indexOf(
1} / {history.messages[message.parentId].childrenIds.length} message.id
) + 1} / {history.messages[message.parentId].childrenIds.length}
</div> </div>
<button <button
...@@ -664,8 +722,10 @@ ...@@ -664,8 +722,10 @@
</div> </div>
{/if} {/if}
<!-- <button <button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-800 transition" class="{messageIdx + 1 === messages.length
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
editMessageHandler(message.id); editMessageHandler(message.id);
}} }}
...@@ -684,7 +744,7 @@ ...@@ -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" 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> </svg>
</button> --> </button>
<button <button
class="{messageIdx + 1 === messages.length class="{messageIdx + 1 === messages.length
...@@ -810,6 +870,8 @@ ...@@ -810,6 +870,8 @@
</div> </div>
{/if} {/if}
</div> </div>
{/if}
</div>
<!-- {} --> <!-- {} -->
</div> </div>
</div> </div>
......
src/routes/(app)/+page.svelte
View file @ 83e8db9b
...@@ -118,38 +118,11 @@ ...@@ -118,38 +118,11 @@
]; ];
} }
window.scrollTo({ top: document.body.scrollHeight }); await tick();
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, { window.scrollTo({ top: document.body.scrollHeight });
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', // method: 'POST',
// headers: { // headers: {
// 'Content-Type': 'text/event-stream', // 'Content-Type': 'text/event-stream',
...@@ -158,17 +131,8 @@ ...@@ -158,17 +131,8 @@
// }, // },
// body: JSON.stringify({ // body: JSON.stringify({
// model: model, // model: model,
// messages: [ // prompt: userPrompt,
// $settings.system // system: $settings.system ?? undefined,
// ? {
// role: 'system',
// content: $settings.system
// }
// : undefined,
// ...messages
// ]
// .filter((message) => message)
// .map((message) => ({ role: message.role, content: message.content })),
// options: { // options: {
// seed: $settings.seed ?? undefined, // seed: $settings.seed ?? undefined,
// temperature: $settings.temperature ?? undefined, // temperature: $settings.temperature ?? undefined,
...@@ -178,10 +142,48 @@ ...@@ -178,10 +142,48 @@
// num_ctx: $settings.num_ctx ?? undefined, // num_ctx: $settings.num_ctx ?? undefined,
// ...($settings.options ?? {}) // ...($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 const reader = res.body
.pipeThrough(new TextDecoderStream()) .pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n')) .pipeThrough(splitStream('\n'))
...@@ -189,12 +191,9 @@ ...@@ -189,12 +191,9 @@
while (true) { while (true) {
const { value, done } = await reader.read(); const { value, done } = await reader.read();
if (done || stopResponseFlag) { if (done || stopResponseFlag || _chatId !== $chatId) {
if (stopResponseFlag) {
responseMessage.done = true; responseMessage.done = true;
messages = messages; messages = messages;
}
break; break;
} }
...@@ -205,18 +204,28 @@ ...@@ -205,18 +204,28 @@
if (line !== '') { if (line !== '') {
console.log(line); console.log(line);
let data = JSON.parse(line); let data = JSON.parse(line);
if ('detail' in data) {
throw data;
}
if (data.done == false) { if (data.done == false) {
if (responseMessage.content == '' && data.response == '\n') { if (responseMessage.content == '' && data.message.content == '\n') {
continue; continue;
} else { } else {
responseMessage.content += data.response; responseMessage.content += data.message.content;
messages = messages; messages = messages;
} }
} else if ('detail' in data) {
throw data;
} else { } else {
responseMessage.done = true; 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; messages = messages;
} }
} }
...@@ -324,12 +333,9 @@ ...@@ -324,12 +333,9 @@
while (true) { while (true) {
const { value, done } = await reader.read(); const { value, done } = await reader.read();
if (done || stopResponseFlag) { if (done || stopResponseFlag || _chatId !== $chatId) {
if (stopResponseFlag) {
responseMessage.done = true; responseMessage.done = true;
messages = messages; messages = messages;
}
break; break;
} }
......
src/routes/(app)/c/[id]/+page.svelte
View file @ 83e8db9b
...@@ -152,38 +152,11 @@ ...@@ -152,38 +152,11 @@
]; ];
} }
window.scrollTo({ top: document.body.scrollHeight }); await tick();
const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, { window.scrollTo({ top: document.body.scrollHeight });
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', // method: 'POST',
// headers: { // headers: {
// 'Content-Type': 'text/event-stream', // 'Content-Type': 'text/event-stream',
...@@ -192,17 +165,8 @@ ...@@ -192,17 +165,8 @@
// }, // },
// body: JSON.stringify({ // body: JSON.stringify({
// model: model, // model: model,
// messages: [ // prompt: userPrompt,
// $settings.system // system: $settings.system ?? undefined,
// ? {
// role: 'system',
// content: $settings.system
// }
// : undefined,
// ...messages
// ]
// .filter((message) => message)
// .map((message) => ({ role: message.role, content: message.content })),
// options: { // options: {
// seed: $settings.seed ?? undefined, // seed: $settings.seed ?? undefined,
// temperature: $settings.temperature ?? undefined, // temperature: $settings.temperature ?? undefined,
...@@ -212,10 +176,48 @@ ...@@ -212,10 +176,48 @@
// num_ctx: $settings.num_ctx ?? undefined, // num_ctx: $settings.num_ctx ?? undefined,
// ...($settings.options ?? {}) // ...($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 const reader = res.body
.pipeThrough(new TextDecoderStream()) .pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n')) .pipeThrough(splitStream('\n'))
...@@ -223,12 +225,9 @@ ...@@ -223,12 +225,9 @@
while (true) { while (true) {
const { value, done } = await reader.read(); const { value, done } = await reader.read();
if (done || stopResponseFlag) { if (done || stopResponseFlag || _chatId !== $chatId) {
if (stopResponseFlag) {
responseMessage.done = true; responseMessage.done = true;
messages = messages; messages = messages;
}
break; break;
} }
...@@ -239,18 +238,28 @@ ...@@ -239,18 +238,28 @@
if (line !== '') { if (line !== '') {
console.log(line); console.log(line);
let data = JSON.parse(line); let data = JSON.parse(line);
if ('detail' in data) {
throw data;
}
if (data.done == false) { if (data.done == false) {
if (responseMessage.content == '' && data.response == '\n') { if (responseMessage.content == '' && data.message.content == '\n') {
continue; continue;
} else { } else {
responseMessage.content += data.response; responseMessage.content += data.message.content;
messages = messages; messages = messages;
} }
} else if ('detail' in data) {
throw data;
} else { } else {
responseMessage.done = true; 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; messages = messages;
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment