mirror of https://github.com/open-webui/open-webui
updated all the pages in app
This commit is contained in:
itxProfessor
parent
95676583b5
commit
d4e7afbaf3
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/static/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="Open WebUI" />
|
||||
<meta name="apple-mobile-web-app-title" content="UOH-AI" />
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta
|
||||
|
|
@ -16,11 +16,11 @@
|
|||
/>
|
||||
<meta name="theme-color" content="#171717" />
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<meta name="description" content="Open WebUI" />
|
||||
<meta name="description" content="UOH-AI" />
|
||||
<link
|
||||
rel="search"
|
||||
type="application/opensearchdescription+xml"
|
||||
title="Open WebUI"
|
||||
title="UOH-AI"
|
||||
href="/opensearch.xml"
|
||||
/>
|
||||
<script src="/static/loader.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,9 @@
|
|||
import Help from '$lib/components/layout/Help.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
<Help />
|
||||
<Chat />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
|
@ -2,4 +2,8 @@
|
|||
import Chat from '$lib/components/playground/Chat.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
<Chat />
|
||||
|
|
|
|||
|
|
@ -21,3 +21,7 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if $models !== null}
|
||||
<Models />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,8 @@
|
|||
import Prompts from '$lib/components/workspace/Prompts.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
<Prompts />
|
||||
|
|
|
|||
|
|
@ -4,4 +4,8 @@
|
|||
import Tools from '$lib/components/workspace/Tools.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
<Tools />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
|
@ -16,6 +16,10 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if loaded}
|
||||
<div class="absolute w-full h-full flex z-50">
|
||||
<div class="absolute rounded-xl w-full h-full backdrop-blur-sm flex justify-center">
|
||||
|
|
|
|||
|
|
@ -1,189 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { onMount, tick, getContext } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import { settings, chatId, WEBUI_NAME, models, config } from '$lib/stores';
|
||||
import { convertMessagesToHistory, createMessagesList } from '$lib/utils';
|
||||
|
||||
import { getChatByShareId, cloneSharedChatById } from '$lib/apis/chats';
|
||||
|
||||
import Messages from '$lib/components/chat/Messages.svelte';
|
||||
import Navbar from '$lib/components/layout/Navbar.svelte';
|
||||
|
||||
import { getUserById } from '$lib/apis/users';
|
||||
import { getModels } from '$lib/apis';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
import { getContext } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
let loaded = false;
|
||||
|
||||
let autoScroll = true;
|
||||
let processing = '';
|
||||
let messagesContainerElement: HTMLDivElement;
|
||||
|
||||
// let chatId = $page.params.id;
|
||||
let showModelSelector = false;
|
||||
let selectedModels = [''];
|
||||
|
||||
let chat = null;
|
||||
let user = null;
|
||||
|
||||
let title = '';
|
||||
let files = [];
|
||||
|
||||
let messages = [];
|
||||
let history = {
|
||||
messages: {},
|
||||
currentId: null
|
||||
};
|
||||
|
||||
$: messages = createMessagesList(history, history.currentId);
|
||||
|
||||
$: if ($page.params.id) {
|
||||
(async () => {
|
||||
if (await loadSharedChat()) {
|
||||
await tick();
|
||||
loaded = true;
|
||||
} else {
|
||||
await goto('/');
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
//////////////////////////
|
||||
// Web functions
|
||||
//////////////////////////
|
||||
|
||||
const loadSharedChat = async () => {
|
||||
await models.set(
|
||||
await getModels(
|
||||
localStorage.token,
|
||||
$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
|
||||
)
|
||||
);
|
||||
await chatId.set($page.params.id);
|
||||
chat = await getChatByShareId(localStorage.token, $chatId).catch(async (error) => {
|
||||
await goto('/');
|
||||
return null;
|
||||
});
|
||||
|
||||
if (chat) {
|
||||
user = await getUserById(localStorage.token, chat.user_id).catch((error) => {
|
||||
console.error(error);
|
||||
return null;
|
||||
});
|
||||
|
||||
const chatContent = chat.chat;
|
||||
|
||||
if (chatContent) {
|
||||
console.log(chatContent);
|
||||
|
||||
selectedModels =
|
||||
(chatContent?.models ?? undefined) !== undefined
|
||||
? chatContent.models
|
||||
: [chatContent.models ?? ''];
|
||||
history =
|
||||
(chatContent?.history ?? undefined) !== undefined
|
||||
? chatContent.history
|
||||
: convertMessagesToHistory(chatContent.messages);
|
||||
title = chatContent.title;
|
||||
|
||||
autoScroll = true;
|
||||
await tick();
|
||||
|
||||
if (messages.length > 0) {
|
||||
history.messages[messages.at(-1).id].done = true;
|
||||
}
|
||||
await tick();
|
||||
|
||||
return true;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
onMount(() => {
|
||||
if (!$page.params.id) {
|
||||
goto('/');
|
||||
}
|
||||
};
|
||||
|
||||
const cloneSharedChat = async () => {
|
||||
if (!chat) return;
|
||||
|
||||
const res = await cloneSharedChatById(localStorage.token, chat.id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
return null;
|
||||
});
|
||||
|
||||
if (res) {
|
||||
goto(`/c/${res.id}`);
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{title
|
||||
? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}`
|
||||
: `${$WEBUI_NAME}`}
|
||||
</title>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if loaded}
|
||||
<div
|
||||
class="h-screen max-h-[100dvh] w-full flex flex-col text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900"
|
||||
>
|
||||
<div class="flex flex-col flex-auto justify-center relative">
|
||||
<div class=" flex flex-col w-full flex-auto overflow-auto h-0" id="messages-container">
|
||||
<div class="pt-5 px-2 w-full max-w-5xl mx-auto">
|
||||
<div class="px-3">
|
||||
<div class=" text-2xl font-semibold line-clamp-1">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div class="flex text-sm justify-between items-center mt-1">
|
||||
<div class="text-gray-400">
|
||||
{dayjs(chat.chat.timestamp).format('LLL')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" h-full w-full flex flex-col py-2">
|
||||
<div class="">
|
||||
<Messages
|
||||
className="h-full flex pt-4 pb-8"
|
||||
{user}
|
||||
chatId={$chatId}
|
||||
readOnly={true}
|
||||
{selectedModels}
|
||||
{processing}
|
||||
bind:history
|
||||
bind:messages
|
||||
bind:autoScroll
|
||||
bottomPadding={files.length > 0}
|
||||
sendPrompt={() => {}}
|
||||
continueResponse={() => {}}
|
||||
regenerateResponse={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-0 right-0 left-0 flex justify-center w-full bg-linear-to-b from-transparent to-white dark:to-gray-900"
|
||||
>
|
||||
<div class="pb-5">
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
|
||||
on:click={cloneSharedChat}
|
||||
>
|
||||
{$i18n.t('Clone Chat')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="container mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-4">{$i18n.t('Page ID')}: {$page.params.id}</h1>
|
||||
<p>{$i18n.t('This is the page for ID')}: {$page.params.id}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,3 +20,7 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>UOH-AI</title>
|
||||
</svelte:head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue