From 7ad8918cd906e5ec78caf7eaab475d25762c5aa9 Mon Sep 17 00:00:00 2001 From: Timothy Jaeryang Baek Date: Sun, 22 Dec 2024 23:09:51 -0700 Subject: [PATCH] enh: update channel --- backend/open_webui/routers/channels.py | 25 +++++++ src/lib/apis/channels/index.ts | 32 +++++++++ src/lib/components/channel/Messages.svelte | 4 +- .../channel/Messages/Message.svelte | 2 +- .../components/common/ConfirmDialog.svelte | 11 +-- src/lib/components/icons/Cog6Solid.svelte | 12 ++++ src/lib/components/layout/Sidebar.svelte | 26 +++++-- .../layout/Sidebar/ChannelItem.svelte | 46 ++++++++++--- ...hannelModal.svelte => ChannelModal.svelte} | 69 +++++++++++++++---- 9 files changed, 192 insertions(+), 35 deletions(-) create mode 100644 src/lib/components/icons/Cog6Solid.svelte rename src/lib/components/layout/Sidebar/{CreateChannelModal.svelte => ChannelModal.svelte} (72%) diff --git a/backend/open_webui/routers/channels.py b/backend/open_webui/routers/channels.py index df3ccfd51..0a500c710 100644 --- a/backend/open_webui/routers/channels.py +++ b/backend/open_webui/routers/channels.py @@ -78,6 +78,31 @@ async def get_channel_by_id(id: str, user=Depends(get_verified_user)): return ChannelModel(**channel.model_dump()) +############################ +# UpdateChannelById +############################ + + +@router.post("/{id}/update", response_model=Optional[ChannelModel]) +async def update_channel_by_id( + id: str, form_data: ChannelForm, user=Depends(get_admin_user) +): + channel = Channels.get_channel_by_id(id) + if not channel: + raise HTTPException( + status_code=status.HTTP_404_NOT_FOUND, detail=ERROR_MESSAGES.NOT_FOUND + ) + + try: + channel = Channels.update_channel_by_id(id, form_data) + return ChannelModel(**channel.model_dump()) + except Exception as e: + log.exception(e) + raise HTTPException( + status_code=status.HTTP_400_BAD_REQUEST, detail=ERROR_MESSAGES.DEFAULT() + ) + + ############################ # GetChannelMessages ############################ diff --git a/src/lib/apis/channels/index.ts b/src/lib/apis/channels/index.ts index abc3c2aec..4b662bb85 100644 --- a/src/lib/apis/channels/index.ts +++ b/src/lib/apis/channels/index.ts @@ -102,6 +102,38 @@ export const getChannelById = async (token: string = '', channel_id: string) => return res; } +export const updateChannelById = async (token: string = '', channel_id: string, channel: ChannelForm) => { + let error = null; + + const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/update`, { + method: 'POST', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + authorization: `Bearer ${token}` + }, + body: JSON.stringify({ ...channel }) + }) + .then(async (res) => { + if (!res.ok) throw await res.json(); + return res.json(); + }) + .then((json) => { + return json; + }) + .catch((err) => { + error = err.detail; + console.log(err); + return null; + }); + + if (error) { + throw error; + } + + return res; +} + export const getChannelMessages = async (token: string = '', channel_id: string, page: number = 1) => { let error = null; diff --git a/src/lib/components/channel/Messages.svelte b/src/lib/components/channel/Messages.svelte index a1fde2251..08c975538 100644 --- a/src/lib/components/channel/Messages.svelte +++ b/src/lib/components/channel/Messages.svelte @@ -65,7 +65,7 @@ {($settings?.widescreenMode ?? null) ? 'max-w-full' : 'max-w-5xl'} mx-auto" > {#if channel} -
+
{channel.name}
@@ -76,7 +76,7 @@
{:else} -
+
Start of the channel
{/if} diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte index ec66f6274..aaf51e0d2 100644 --- a/src/lib/components/channel/Messages/Message.svelte +++ b/src/lib/components/channel/Messages/Message.svelte @@ -70,7 +70,7 @@ {#if message.created_at} diff --git a/src/lib/components/common/ConfirmDialog.svelte b/src/lib/components/common/ConfirmDialog.svelte index 658174c05..671d07281 100644 --- a/src/lib/components/common/ConfirmDialog.svelte +++ b/src/lib/components/common/ConfirmDialog.svelte @@ -37,7 +37,6 @@ const confirmHandler = async () => { show = false; - await onConfirm(); dispatch('confirm', inputValue); }; @@ -47,11 +46,15 @@ }); $: if (mounted) { - if (show) { + if (show && modalElement) { + document.body.appendChild(modalElement); + window.addEventListener('keydown', handleKeyDown); document.body.style.overflow = 'hidden'; - } else { + } else if (modalElement) { window.removeEventListener('keydown', handleKeyDown); + document.body.removeChild(modalElement); + document.body.style.overflow = 'unset'; } } @@ -62,7 +65,7 @@
{ show = false; diff --git a/src/lib/components/icons/Cog6Solid.svelte b/src/lib/components/icons/Cog6Solid.svelte new file mode 100644 index 000000000..ea43c9eea --- /dev/null +++ b/src/lib/components/icons/Cog6Solid.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index 3b0db5c56..bc0a2c217 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -53,7 +53,7 @@ import Tooltip from '../common/Tooltip.svelte'; import Folders from './Sidebar/Folders.svelte'; import { getChannels, createNewChannel } from '$lib/apis/channels'; - import CreateChannelModal from './Sidebar/CreateChannelModal.svelte'; + import ChannelModal from './Sidebar/ChannelModal.svelte'; import ChannelItem from './Sidebar/ChannelItem.svelte'; import PencilSquare from '../icons/PencilSquare.svelte'; @@ -403,10 +403,21 @@ }} /> - { - await initChannels(); + onSubmit={async ({ name, access_control }) => { + const res = await createNewChannel(localStorage.token, { + name: name, + access_control: access_control + }).catch((error) => { + toast.error(error); + return null; + }); + + if (res) { + await initChannels(); + showCreateChannel = false; + } }} /> @@ -642,7 +653,12 @@ onAddLabel={$i18n.t('Create Channel')} > {#each $channels as channel} - + { + await initChannels(); + }} + /> {/each} {/if} diff --git a/src/lib/components/layout/Sidebar/ChannelItem.svelte b/src/lib/components/layout/Sidebar/ChannelItem.svelte index 14752a038..6e4e8c62f 100644 --- a/src/lib/components/layout/Sidebar/ChannelItem.svelte +++ b/src/lib/components/layout/Sidebar/ChannelItem.svelte @@ -1,33 +1,55 @@ + { + const res = await updateChannelById(localStorage.token, channel.id, { + name, + access_control + }).catch((error) => { + toast.error(error.message); + }); + + if (res) { + toast.success('Channel updated successfully'); + } + + onUpdate(); + }} +/> +
{ if ($mobile) { showSidebar.set(false); @@ -50,7 +72,7 @@
- {name} + {channel.name}
@@ -60,10 +82,12 @@ class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300" on:pointerup={(e) => { e.stopPropagation(); + + showEditChannelModal = true; }} > {/if} diff --git a/src/lib/components/layout/Sidebar/CreateChannelModal.svelte b/src/lib/components/layout/Sidebar/ChannelModal.svelte similarity index 72% rename from src/lib/components/layout/Sidebar/CreateChannelModal.svelte rename to src/lib/components/layout/Sidebar/ChannelModal.svelte index 7834e7442..e0ccc58bb 100644 --- a/src/lib/components/layout/Sidebar/CreateChannelModal.svelte +++ b/src/lib/components/layout/Sidebar/ChannelModal.svelte @@ -1,15 +1,19 @@
-
{$i18n.t('Create Channel')}
+
+ {#if edit} + {$i18n.t('Edit Channel')} + {:else} + {$i18n.t('Create Channel')} + {/if} +
+ {#if edit} + + {/if} +
+ + { + deleteHandler(); + }} +/>