Skip to content

GitLab

Unverified Commit 85dbdd23 authored by Timothy Jaeryang Baek's avatar Timothy Jaeryang Baek Committed by GitHub
Browse files

Merge branch 'dev' into fix/share-chat-reactive-loop

parents ea6f1a0e ea812a3b
Show whitespace changes
Inline Side-by-side
Showing with 1808 additions and 238 deletions
src/routes/(app)/prompts/edit/+page.svelte deleted 100644 → 0
View file @ ea6f1a0e
<script>
import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation';
import { prompts } from '$lib/stores';
import { onMount, tick, getContext } from 'svelte';
const i18n = getContext('i18n');
import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
import { page } from '$app/stores';
let loading = false;
// ///////////
// Prompt
// ///////////
let title = '';
let command = '';
let content = '';
const updateHandler = async () => {
loading = true;
if (validateCommandString(command)) {
const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
(error) => {
toast.error(error);
return null;
}
);
if (prompt) {
await prompts.set(await getPrompts(localStorage.token));
await goto('/prompts');
}
} else {
toast.error(
$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
);
}
loading = false;
};
const validateCommandString = (inputString) => {
// Regular expression to match only alphanumeric characters and hyphen
const regex = /^[a-zA-Z0-9-]+$/;
// Test the input string against the regular expression
return regex.test(inputString);
};
onMount(async () => {
command = $page.url.searchParams.get('command');
if (command) {
const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
if (prompt) {
console.log(prompt);
console.log(prompt.command);
title = prompt.title;
await tick();
command = prompt.command.slice(1);
content = prompt.content;
} else {
goto('/prompts');
}
} else {
goto('/prompts');
}
});
</script>
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
<div class="flex flex-col justify-between w-full overflow-y-auto">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
<button
class="flex space-x-1"
on:click={() => {
history.back();
}}
>
<div class=" self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<hr class="my-3 dark:border-gray-700" />
<form
class="flex flex-col"
on:submit|preventDefault={() => {
updateHandler();
}}
>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
<div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={$i18n.t('Add a short title for this prompt')}
bind:value={title}
required
/>
</div>
</div>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
<div class="flex items-center mb-1">
<div
class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
>
/
</div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border disabled:text-gray-500 dark:border-gray-600 outline-none rounded-r-lg"
placeholder="short-summary"
bind:value={command}
disabled
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('Only')}
<span class=" text-gray-600 dark:text-gray-300 font-medium"
>{$i18n.t('alphanumeric characters and hyphens')}</span
>
{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
class=" text-gray-600 dark:text-gray-300 font-medium"
>
/{command}
</span>" &nbsp;
{$i18n.t('to chat input.')}
</div>
</div>
<div class="my-2">
<div class="flex w-full justify-between">
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
</div>
<div class="mt-2">
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={$i18n.t(
`Write a summary in 50 words that summarizes [topic or keyword].`
)}
rows="6"
bind:value={content}
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
>.
{$i18n.t('Make sure to enclose them with')}
<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
{$i18n.t('and')}
<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
{` {{CLIPBOARD}}`}</span
>
{$i18n.t('variable to have them replaced with clipboard content.')}
</div>
</div>
</div>
<div class="my-2 flex justify-end">
<button
class=" text-sm px-3 py-2 transition rounded-xl {loading
? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
type="submit"
disabled={loading}
>
<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
{#if loading}
<div class="ml-1.5 self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
</div>
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
src/routes/(app)/workspace/+layout.svelte 0 → 100644
View file @ 85dbdd23
<script lang="ts">
import { onMount, getContext } from 'svelte';
import { WEBUI_NAME, showSidebar } from '$lib/stores';
import MenuLines from '$lib/components/icons/MenuLines.svelte';
import { page } from '$app/stores';
const i18n = getContext('i18n');
</script>
<svelte:head>
<title>
{$i18n.t('Workspace')} | {$WEBUI_NAME}
</title>
</svelte:head>
<div class=" flex flex-col w-full min-h-screen max-h-screen">
<div class=" px-4 pt-3 mt-0.5 mb-1">
<div class=" flex items-center gap-1">
<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
<button
id="sidebar-toggle-button"
class="cursor-pointer p-1 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
on:click={() => {
showSidebar.set(!$showSidebar);
}}
>
<div class=" m-auto self-center">
<MenuLines />
</div>
</button>
</div>
<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
</div>
</div>
<div class="px-4 my-1">
<div
class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
>
<a
class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/modelfiles')
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/modelfiles">{$i18n.t('Modelfiles')}</a
>
<a
class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/prompts')
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/prompts">{$i18n.t('Prompts')}</a
>
<a
class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/documents')
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/documents"
>
{$i18n.t('Documents')}
</a>
<a
class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/playground')
? 'bg-gray-50 dark:bg-gray-850'
: ''} transition"
href="/workspace/playground">{$i18n.t('Playground')}</a
>
</div>
</div>
<hr class=" my-2 dark:border-gray-850" />
<div class=" py-1 px-5 flex-1 max-h-full overflow-y-auto">
<slot />
</div>
</div>
src/routes/(app)/workspace/+page.svelte 0 → 100644
View file @ 85dbdd23
<script lang="ts">
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
onMount(() => {
goto('/workspace/modelfiles');
});
</script>
src/routes/(app)/workspace/documents/+page.svelte 0 → 100644
View file @ 85dbdd23
<script>
import Documents from '$lib/components/workspace/Documents.svelte';
</script>
<Documents />
src/routes/(app)/workspace/modelfiles/+page.svelte 0 → 100644
View file @ 85dbdd23
<script>
import Modelfiles from '$lib/components/workspace/Modelfiles.svelte';
</script>
<Modelfiles />
src/routes/(app)/modelfiles/create/+page.svelte → src/routes/(app)/workspace/modelfiles/create/+page.svelte
View file @ 85dbdd23
......@@ -204,7 +204,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
categories: Object.keys(categories).filter((category) => categories[category]),
user: modelfileCreator !== null ? modelfileCreator : undefined
});
await goto('/modelfiles');
await goto('/workspace/modelfiles');
}
}
loading = false;
......@@ -283,9 +283,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
});
</script>
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
<div class=" flex flex-col justify-between w-full overflow-y-auto">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class="w-full max-h-full">
<input
bind:this={filesInputElement}
bind:files={inputFiles}
......@@ -351,8 +349,6 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
}}
/>
<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Modelfiles')}</div>
<button
class="flex space-x-1"
on:click={() => {
......@@ -375,10 +371,10 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<hr class="my-3 dark:border-gray-700" />
<!-- <hr class="my-3 dark:border-gray-700" /> -->
<form
class="flex flex-col"
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
on:submit|preventDefault={() => {
submitHandler();
}}
......@@ -722,6 +718,4 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</button>
</div>
</form>
</div>
</div>
</div>
src/routes/(app)/modelfiles/edit/+page.svelte → src/routes/(app)/workspace/modelfiles/edit/+page.svelte
View file @ 85dbdd23
......@@ -80,7 +80,7 @@
categories[category.toLowerCase()] = true;
}
} else {
goto('/modelfiles');
goto('/workspace/modelfiles');
}
});
......@@ -174,7 +174,7 @@
suggestionPrompts: suggestions.filter((prompt) => prompt.content !== ''),
categories: Object.keys(categories).filter((category) => categories[category])
});
await goto('/modelfiles');
await goto('/workspace/modelfiles');
}
}
loading = false;
......@@ -182,9 +182,7 @@
};
</script>
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
<div class="flex flex-col justify-between w-full overflow-y-auto">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class="w-full max-h-full">
<input
bind:this={filesInputElement}
bind:files={inputFiles}
......@@ -250,8 +248,6 @@
}}
/>
<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Modelfiles')}</div>
<button
class="flex space-x-1"
on:click={() => {
......@@ -274,10 +270,8 @@
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<hr class="my-3 dark:border-gray-700" />
<form
class="flex flex-col"
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
on:submit|preventDefault={() => {
updateHandler();
}}
......@@ -510,6 +504,4 @@
</button>
</div>
</form>
</div>
</div>
</div>
src/routes/(app)/workspace/playground/+page.svelte 0 → 100644
View file @ 85dbdd23
<script>
import Playground from '$lib/components/workspace/Playground.svelte';
</script>
<Playground />
src/routes/(app)/workspace/prompts/+page.svelte 0 → 100644
View file @ 85dbdd23
<script>
import Prompts from '$lib/components/workspace/Prompts.svelte';
</script>
<Prompts />
src/routes/(app)/prompts/create/+page.svelte → src/routes/(app)/workspace/prompts/create/+page.svelte
View file @ 85dbdd23
......@@ -35,7 +35,7 @@
if (prompt) {
await prompts.set(await getPrompts(localStorage.token));
await goto('/prompts');
await goto('/workspace/prompts');
}
} else {
toast.error(
......@@ -93,11 +93,7 @@
});
</script>
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
<div class=" flex flex-col justify-between w-full overflow-y-auto">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
<div class="w-full max-h-full">
<button
class="flex space-x-1"
on:click={() => {
......@@ -120,10 +116,9 @@
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<hr class="my-3 dark:border-gray-700" />
<form
class="flex flex-col"
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
on:submit|preventDefault={() => {
submitHandler();
}}
......@@ -181,9 +176,7 @@
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={$i18n.t(
'Write a summary in 50 words that summarizes [topic or keyword].'
)}
placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
rows="6"
bind:value={content}
required
......@@ -249,6 +242,4 @@
</button>
</div>
</form>
</div>
</div>
</div>
src/routes/(app)/workspace/prompts/edit/+page.svelte 0 → 100644
View file @ 85dbdd23
<script>
import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation';
import { prompts } from '$lib/stores';
import { onMount, tick, getContext } from 'svelte';
const i18n = getContext('i18n');
import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
import { page } from '$app/stores';
let loading = false;
// ///////////
// Prompt
// ///////////
let title = '';
let command = '';
let content = '';
const updateHandler = async () => {
loading = true;
if (validateCommandString(command)) {
const prompt = await updatePromptByCommand(localStorage.token, command, title, content).catch(
(error) => {
toast.error(error);
return null;
}
);
if (prompt) {
await prompts.set(await getPrompts(localStorage.token));
await goto('/workspace/prompts');
}
} else {
toast.error(
$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
);
}
loading = false;
};
const validateCommandString = (inputString) => {
// Regular expression to match only alphanumeric characters and hyphen
const regex = /^[a-zA-Z0-9-]+$/;
// Test the input string against the regular expression
return regex.test(inputString);
};
onMount(async () => {
command = $page.url.searchParams.get('command');
if (command) {
const prompt = $prompts.filter((prompt) => prompt.command === command).at(0);
if (prompt) {
console.log(prompt);
console.log(prompt.command);
title = prompt.title;
await tick();
command = prompt.command.slice(1);
content = prompt.content;
} else {
goto('/workspace/prompts');
}
} else {
goto('/workspace/prompts');
}
});
</script>
<div class="w-full max-h-full">
<button
class="flex space-x-1"
on:click={() => {
history.back();
}}
>
<div class=" self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button>
<form
class="flex flex-col max-w-2xl mx-auto mt-4 mb-10"
on:submit|preventDefault={() => {
updateHandler();
}}
>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
<div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={$i18n.t('Add a short title for this prompt')}
bind:value={title}
required
/>
</div>
</div>
<div class="my-2">
<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
<div class="flex items-center mb-1">
<div
class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
>
/
</div>
<input
class="px-3 py-1.5 text-sm w-full bg-transparent border disabled:text-gray-500 dark:border-gray-600 outline-none rounded-r-lg"
placeholder="short-summary"
bind:value={command}
disabled
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('Only')}
<span class=" text-gray-600 dark:text-gray-300 font-medium"
>{$i18n.t('alphanumeric characters and hyphens')}</span
>
{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
class=" text-gray-600 dark:text-gray-300 font-medium"
>
/{command}
</span>" &nbsp;
{$i18n.t('to chat input.')}
</div>
</div>
<div class="my-2">
<div class="flex w-full justify-between">
<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
</div>
<div class="mt-2">
<div>
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
placeholder={$i18n.t(`Write a summary in 50 words that summarizes [topic or keyword].`)}
rows="6"
bind:value={content}
required
/>
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
>.
{$i18n.t('Make sure to enclose them with')}
<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
{$i18n.t('and')}
<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
</div>
<div class="text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
{` {{CLIPBOARD}}`}</span
>
{$i18n.t('variable to have them replaced with clipboard content.')}
</div>
</div>
</div>
<div class="my-2 flex justify-end">
<button
class=" text-sm px-3 py-2 transition rounded-xl {loading
? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800'} flex"
type="submit"
disabled={loading}
>
<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
{#if loading}
<div class="ml-1.5 self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
</div>
{/if}
</button>
</div>
</form>
</div>
src/routes/+layout.svelte
View file @ 85dbdd23
......@@ -18,7 +18,7 @@
setContext('i18n', i18n);
let loaded = false;
const BREAKPOINT = 1024;
const BREAKPOINT = 768;
onMount(async () => {
theme.set(localStorage.theme);
......
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