forked from open-webui/open-webui
chat history/code syntax highlighting added
This commit is contained in:
Timothy J. Baek
parent
b1095836d5
commit
de86193cab
7 changed files with 393 additions and 47 deletions
|
|
@ -2,7 +2,6 @@
|
|||
import { Toaster } from 'svelte-french-toast';
|
||||
|
||||
import '../app.css';
|
||||
|
||||
import '../tailwind.css';
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,23 +2,33 @@
|
|||
import toast from 'svelte-french-toast';
|
||||
import Navbar from '$lib/components/layout/Navbar.svelte';
|
||||
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { marked } from 'marked';
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/dark.min.css';
|
||||
|
||||
import type { PageData } from './$types';
|
||||
import { ENDPOINT } from '$lib/contants';
|
||||
import { onMount, tick } from 'svelte';
|
||||
|
||||
import { openDB, deleteDB } from 'idb';
|
||||
|
||||
export let data: PageData;
|
||||
$: ({ models } = data);
|
||||
let textareaElement;
|
||||
let db;
|
||||
|
||||
let selectedModel = '';
|
||||
let systemPrompt = '';
|
||||
let temperature = '';
|
||||
|
||||
let chats = [];
|
||||
let chatId = uuidv4();
|
||||
let title = ``;
|
||||
let prompt = '';
|
||||
let messages = [];
|
||||
|
||||
onMount(() => {
|
||||
onMount(async () => {
|
||||
let settings = localStorage.getItem('settings');
|
||||
if (settings) {
|
||||
settings = JSON.parse(settings);
|
||||
|
|
@ -28,6 +38,20 @@
|
|||
systemPrompt = settings.systemPrompt ?? '';
|
||||
temperature = settings.temperature ?? '';
|
||||
}
|
||||
|
||||
db = await openDB('Chats', 1, {
|
||||
upgrade(db) {
|
||||
const store = db.createObjectStore('chats', {
|
||||
keyPath: 'id',
|
||||
autoIncrement: true
|
||||
});
|
||||
store.createIndex('timestamp', 'timestamp');
|
||||
}
|
||||
});
|
||||
|
||||
chats = await db.getAllFromIndex('chats', 'timestamp');
|
||||
console.log(chats);
|
||||
console.log(chatId);
|
||||
});
|
||||
|
||||
//////////////////////////
|
||||
|
|
@ -101,11 +125,32 @@
|
|||
toast.success('Default model updated');
|
||||
};
|
||||
|
||||
const createNewChat = () => {
|
||||
if (messages.length > 0) {
|
||||
messages = [];
|
||||
title = '';
|
||||
chatId = uuidv4();
|
||||
}
|
||||
};
|
||||
|
||||
const loadChat = async (id) => {
|
||||
const chat = await db.get('chats', id);
|
||||
messages = chat.messages;
|
||||
title = chat.title;
|
||||
chatId = chat.id;
|
||||
};
|
||||
|
||||
const deleteChatHistory = async () => {
|
||||
const tx = db.transaction('chats', 'readwrite');
|
||||
await Promise.all([tx.store.clear(), tx.done]);
|
||||
chats = await db.getAllFromIndex('chats', 'timestamp');
|
||||
};
|
||||
|
||||
//////////////////////////
|
||||
// Ollama functions
|
||||
//////////////////////////
|
||||
|
||||
const submitPrompt = async () => {
|
||||
const submitPrompt = async (user_prompt) => {
|
||||
console.log('submitPrompt');
|
||||
|
||||
if (selectedModel === '') {
|
||||
|
|
@ -113,9 +158,15 @@
|
|||
} else if (messages.length != 0 && messages.at(-1).done != true) {
|
||||
console.log('wait');
|
||||
} else {
|
||||
console.log(prompt);
|
||||
|
||||
let user_prompt = prompt;
|
||||
if (messages.length == 0) {
|
||||
await db.put('chats', {
|
||||
id: chatId,
|
||||
title: 'New Chat',
|
||||
timestamp: Date.now(),
|
||||
messages: messages
|
||||
});
|
||||
chats = await db.getAllFromIndex('chats', 'timestamp');
|
||||
}
|
||||
messages = [
|
||||
...messages,
|
||||
{
|
||||
|
|
@ -180,6 +231,7 @@
|
|||
responseMessage.done = true;
|
||||
responseMessage.context = data.context;
|
||||
messages = messages;
|
||||
hljs.highlightAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,6 +242,17 @@
|
|||
}
|
||||
|
||||
window.scrollTo({ top: document.body.scrollHeight });
|
||||
|
||||
if (messages.length == 2) {
|
||||
await generateTitle(user_prompt);
|
||||
}
|
||||
await db.put('chats', {
|
||||
id: chatId,
|
||||
title: title,
|
||||
timestamp: Date.now(),
|
||||
messages: messages
|
||||
});
|
||||
chats = await db.getAllFromIndex('chats', 'timestamp');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -252,6 +315,7 @@
|
|||
responseMessage.done = true;
|
||||
responseMessage.context = data.context;
|
||||
messages = messages;
|
||||
hljs.highlightAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -262,15 +326,51 @@
|
|||
}
|
||||
|
||||
window.scrollTo({ top: document.body.scrollHeight });
|
||||
await db.put('chats', {
|
||||
id: chatId,
|
||||
title: title,
|
||||
timestamp: Date.now(),
|
||||
messages: messages
|
||||
});
|
||||
chats = await db.getAllFromIndex('chats', 'timestamp');
|
||||
}
|
||||
|
||||
console.log(messages);
|
||||
};
|
||||
|
||||
const generateTitle = async (user_prompt) => {
|
||||
console.log('generateTitle');
|
||||
|
||||
const res = await fetch(`${ENDPOINT}/api/generate`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'text/event-stream'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: selectedModel,
|
||||
prompt: `Create an extremely short title for the following question with 3-5 words without using the word 'title.': ${user_prompt}`,
|
||||
stream: false
|
||||
})
|
||||
})
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw await res.json();
|
||||
return res.json();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
console.log(res);
|
||||
title = res.response;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="app text-gray-100">
|
||||
<div class=" bg-gray-800 min-h-screen overflow-auto flex flex-row">
|
||||
<Navbar />
|
||||
<Navbar {chats} {title} {loadChat} {createNewChat} {deleteChatHistory} />
|
||||
|
||||
<div class="min-h-screen w-full flex justify-center">
|
||||
<div class=" py-2.5 flex flex-col justify-between w-full">
|
||||
|
|
@ -300,9 +400,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" h-full mb-44 w-full flex flex-col">
|
||||
<div class=" h-full mb-48 w-full flex flex-col">
|
||||
{#if messages.length == 0}
|
||||
<div class="m-auto text-center max-w-md">
|
||||
<div class="m-auto text-center max-w-md pb-16">
|
||||
<div class="flex justify-center mt-8">
|
||||
<img src="/ollama.png" class="w-16 invert-[80%]" />
|
||||
</div>
|
||||
|
|
@ -391,6 +491,113 @@
|
|||
|
||||
<div class=" bg-gradient-to-t from-gray-900 pt-5">
|
||||
<div class="max-w-3xl p-2.5 -mb-0.5 mx-auto inset-x-0">
|
||||
{#if messages.length == 0}
|
||||
<div class=" grid sm:grid-cols-2 gap-2.5 mb-4 md:p-2 text-left">
|
||||
<button
|
||||
class=" flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
|
||||
on:click={() => {
|
||||
submitPrompt(`Tell me a random fun fact about the Roman Empire`);
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col text-left">
|
||||
<div class="text-sm font-medium text-gray-300">Tell me a fun fact</div>
|
||||
<div class="text-sm text-gray-500">about the Roman Empire</div>
|
||||
</div>
|
||||
|
||||
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
class="w-4 h-4"
|
||||
><path
|
||||
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
|
||||
fill="currentColor"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
|
||||
on:click={() => {
|
||||
submitPrompt(
|
||||
`Show me a code snippet of a website's sticky header in CSS and JavaScript.`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col text-left">
|
||||
<div class="text-sm font-medium text-gray-300">Show me a code snippet</div>
|
||||
<div class="text-sm text-gray-500">of a website's sticky header</div>
|
||||
</div>
|
||||
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
class="w-4 h-4"
|
||||
><path
|
||||
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
|
||||
fill="currentColor"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
|
||||
on:click={() => {
|
||||
submitPrompt(
|
||||
`Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col text-left">
|
||||
<div class="text-sm font-medium text-gray-300">Help me study</div>
|
||||
<div class="text-sm text-gray-500">vocabulary for a college entrance exam</div>
|
||||
</div>
|
||||
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
class="w-4 h-4"
|
||||
><path
|
||||
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
|
||||
fill="currentColor"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class=" hidden sm:flex justify-between w-full px-4 py-2.5 bg-gray-800 hover:bg-gray-700 outline outline-1 outline-gray-600 rounded-lg transition group"
|
||||
on:click={() => {
|
||||
submitPrompt(
|
||||
`What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col text-left">
|
||||
<div class="text-sm font-medium text-gray-300">Give me ideas</div>
|
||||
<div class="text-sm text-gray-500">for what to do with my kids' art</div>
|
||||
</div>
|
||||
<div class="self-center group-hover:text-gray-300 text-gray-800 transition">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
class="w-4 h-4"
|
||||
><path
|
||||
d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
|
||||
fill="currentColor"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if messages.length != 0 && messages.at(-1).role == 'assistant' && messages.at(-1).done == true}
|
||||
<div class=" flex justify-end mb-2.5">
|
||||
<button
|
||||
|
|
@ -415,7 +622,12 @@
|
|||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<form class=" flex shadow-sm relative w-full" on:submit|preventDefault={submitPrompt}>
|
||||
<form
|
||||
class=" flex shadow-sm relative w-full"
|
||||
on:submit|preventDefault={() => {
|
||||
submitPrompt(prompt);
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
class="rounded-xl bg-gray-700 outline-none w-full py-3 px-5 pr-12 resize-none"
|
||||
placeholder="Send a message"
|
||||
|
|
@ -426,7 +638,7 @@
|
|||
e.preventDefault();
|
||||
}
|
||||
if (prompt !== '' && e.keyCode == 13 && !e.shiftKey) {
|
||||
submitPrompt();
|
||||
submitPrompt(prompt);
|
||||
}
|
||||
}}
|
||||
rows="1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue