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

feat: convo tagging frontend

Browse source
This commit is contained in:
Timothy J. Baek 2024-01-17 21:01:30 -08:00
parent 541cf36601
commit 4e828b0669
3 changed files with 87 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/lib/components/chat/ShareChatModal.svelte Normal file
View file

@ -0,0 +1,38 @@
<script lang="ts">
import Modal from '../common/Modal.svelte';
export let downloadChat: Function;
export let shareChat: Function;
export let show = false;
</script>
<Modal bind:show size="xs">
<div class="px-4 pt-4 pb-5 w-full flex flex-col justify-center">
<button
class=" self-center px-8 py-1.5 w-full rounded-full text-sm font-medium bg-blue-600 hover:bg-blue-500 text-white"
type="button"
on:click={() => {
shareChat();
show = false;
}}
>
Upload to OllamaHub
</button>
<div class="flex justify-center space-x-1 mt-1.5">
<div class=" self-center text-stone-400 text-xs font-medium">or</div>
<button
class=" self-center rounded-full text-xs font-medium text-stone-700 underline"
type="button"
on:click={() => {
downloadChat();
show = false;
}}
>
Download as a File
</button>
</div>
</div>
</Modal>

4
src/lib/components/common/Modal.svelte
View file

@ -8,7 +8,9 @@
let mounted = false;
const sizeToWidth = (size) => {
if (size === 'sm') {
if (size === 'xs') {
return 'w-[16rem]';
} else if (size === 'sm') {
return 'w-[30rem]';
} else {
return 'w-[40rem]';

88
src/lib/components/layout/Navbar.svelte
View file

@ -5,11 +5,14 @@
import { getChatById } from '$lib/apis/chats';
import { chatId, modelfiles } from '$lib/stores';
import ShareChatModal from '../chat/ShareChatModal.svelte';
export let initNewChat: Function;
export let title: string = 'Ollama Web UI';
export let shareEnabled: boolean = false;
let showShareChatModal = false;
const shareChat = async () => {
const chat = (await getChatById(localStorage.token, $chatId)).chat;
console.log('share', chat);
@ -53,16 +56,17 @@
};
</script>
<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
<nav
id="nav"
class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30"
>
<div class=" flex max-w-3xl w-full mx-auto px-3">
<div class="flex w-full max-w-full">
<div class="pr-2 self-center">
<div class="flex items-center w-full max-w-full">
<div class="pr-2 self-start">
<button
id="new-chat-button"
class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-lg transition"
on:click={initNewChat}
>
<div class=" m-auto self-center">
@ -82,59 +86,59 @@
</div>
</button>
</div>
<div class=" flex-1 self-center font-medium text-ellipsis whitespace-nowrap overflow-hidden">
{title != '' ? title : 'Ollama Web UI'}
<div class=" flex-1 self-center font-medium line-clamp-1">
<div>
{title != '' ? title : 'Ollama Web UI'}
</div>
</div>
{#if shareEnabled}
<div class="pl-2 flex space-x-1.5">
<button
class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
on:click={async () => {
downloadChat();
}}
<div class="pl-2 self-center flex items-center space-x-2">
<div class="flex flex-row">
<div
class=" cursor-pointer px-2 py-0.5 space-x-1 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600"
>
<div class=" text-[0.65rem] font-medium">Add Tags</div>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
class="w-3 h-3"
>
<path
d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
/>
<path
d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</div>
</button>
<button
class=" cursor-pointer p-2 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
on:click={async () => {
shareChat();
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M7.25 10.25a.75.75 0 0 0 1.5 0V4.56l2.22 2.22a.75.75 0 1 0 1.06-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06l2.22-2.22v5.69Z"
/>
<path
d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
/>
</svg>
</div>
</button>
</div>
</div>
{/if}
{#if shareEnabled}
<button
class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600"
on:click={async () => {
showShareChatModal = !showShareChatModal;
// console.log(showShareChatModal);
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M15.75 4.5a3 3 0 1 1 .825 2.066l-8.421 4.679a3.002 3.002 0 0 1 0 1.51l8.421 4.679a3 3 0 1 1-.729 1.31l-8.421-4.678a3 3 0 1 1 0-4.132l8.421-4.679a3 3 0 0 1-.096-.755Z"
clip-rule="evenodd"
/>
</svg>
</div>
</button>
{/if}
</div>
</div>
</div>
</nav>