enh: channel suggestions

src/lib/components/channel/Channel.svelte

@@ -250,6 +250,8 @@
 				<MessageInput
 					id="root"
 					{typingUsers}
+					userSuggestions={true}
+					channelSuggestions={true}
 					{onChange}
 					onSubmit={submitHandler}
 					{scrollToBottom}

src/lib/components/channel/MessageInput.svelte

@@ -56,6 +56,9 @@
 	export let acceptFiles = true;
 	export let showFormattingToolbar = true;
 
+	export let userSuggestions = false;
+	export let channelSuggestions = false;
+
 	export let typingUsersClassName = 'from-white dark:from-gray-900';
 
 	let loaded = false;
@@ -563,9 +566,24 @@
 			{
 				char: '@',
 				render: getSuggestionRenderer(MentionList, {
-					i18n
+					i18n,
+					triggerChar: '@',
+					modelSuggestions: true,
+					userSuggestions
 				})
 			},
+			...(channelSuggestions
+				? [
+						{
+							char: '#',
+							render: getSuggestionRenderer(MentionList, {
+								i18n,
+								triggerChar: '#',
+								channelSuggestions
+							})
+						}
+					]
+				: []),
 			{
 				char: '/',
 				render: getSuggestionRenderer(CommandSuggestionList, {

src/lib/components/channel/MessageInput/MentionList.svelte

@@ -1,41 +1,88 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, onDestroy, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { models } from '$lib/stores';
+	import { channels, models, user } from '$lib/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Hashtag from '$lib/components/icons/Hashtag.svelte';
+	import Lock from '$lib/components/icons/Lock.svelte';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
+	import { searchUsers } from '$lib/apis/users';
+
 	export let query = '';
 
 	export let command: (payload: { id: string; label: string }) => void;
 	export let selectedIndex = 0;
 
-	let items = [];
+	export let label = '';
+	export let triggerChar = '@';
 
-	$: filteredItems = $models.filter((u) => u.name.toLowerCase().includes(query.toLowerCase()));
+	export let modelSuggestions = false;
+	export let userSuggestions = false;
+	export let channelSuggestions = false;
+
+	let _models = [];
+	let _users = [];
+	let _channels = [];
+
+	$: filteredItems = [..._users, ..._models, ..._channels].filter(
+		(u) =>
+			u.label.toLowerCase().includes(query.toLowerCase()) ||
+			u.id.toLowerCase().includes(query.toLowerCase())
+	);
+
+	const getUserList = async () => {
+		const res = await searchUsers(localStorage.token, query).catch((error) => {
+			console.error('Error searching users:', error);
+			return null;
+		});
+
+		if (res) {
+			_users = [...res.users.map((u) => ({ type: 'user', id: u.id, label: u.name }))].sort((a, b) =>
+				a.label.localeCompare(b.label)
+			);
+		}
+	};
+
+	$: if (query && userSuggestions) {
+		getUserList();
+	}
 
 	const select = (index: number) => {
 		const item = filteredItems[index];
-		// Add the "A:" prefix to the id to indicate it's an agent/assistant/ai model
-		if (item) command({ id: `A:${item.id}|${item.name}`, label: item.name });
+		if (!item) return;
+
+		// Add the "U:", "A:" or "C:" prefix to the id
+		// and also append the label after a pipe |
+		// so that the mention renderer can show the label
+		if (item)
+			command({
+				id: `${item.type === 'user' ? 'U' : item.type === 'model' ? 'A' : 'C'}:${item.id}|${item.label}`,
+				label: item.label
+			});
 	};
 
 	const onKeyDown = (event: KeyboardEvent) => {
 		if (!['ArrowUp', 'ArrowDown', 'Enter', 'Tab', 'Escape'].includes(event.key)) return false;
 
 		if (event.key === 'ArrowUp') {
-			selectedIndex = (selectedIndex + filteredItems.length - 1) % filteredItems.length;
+			selectedIndex = Math.max(0, selectedIndex - 1);
 			const item = document.querySelector(`[data-selected="true"]`);
 			item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
 			return true;
 		}
 		if (event.key === 'ArrowDown') {
-			selectedIndex = (selectedIndex + 1) % filteredItems.length;
+			selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
 			const item = document.querySelector(`[data-selected="true"]`);
 			item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
 			return true;
 		}
 		if (event.key === 'Enter' || event.key === 'Tab') {
 			select(selectedIndex);
+
+			if (event.key === 'Enter') {
+				event.preventDefault();
+			}
 			return true;
 		}
 		if (event.key === 'Escape') {
@@ -50,18 +97,57 @@
 	export function _onKeyDown(event: KeyboardEvent) {
 		return onKeyDown(event);
 	}
+
+	const keydownListener = (e) => {
+		// required to prevent the default enter behavior
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			select(selectedIndex);
+		}
+	};
+
+	onMount(async () => {
+		window.addEventListener('keydown', keydownListener);
+		if (channelSuggestions) {
+			// Add a dummy channel item
+			_channels = [
+				...$channels.map((c) => ({ type: 'channel', id: c.id, label: c.name, data: c }))
+			];
+		} else {
+			if (userSuggestions) {
+				await getUserList();
+			}
+
+			if (modelSuggestions) {
+				_models = [...$models.map((m) => ({ type: 'model', id: m.id, label: m.name, data: m }))];
+			}
+		}
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', keydownListener);
+	});
 </script>
 
 {#if filteredItems.length}
 	<div
-		class="mention-list text-black dark:text-white rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-60 p-1"
+		class="mention-list text-black dark:text-white rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
 		id="suggestions-container"
 	>
 		<div class="overflow-y-auto scrollbar-thin max-h-60">
-			<div class="px-2 text-xs text-gray-500 py-1">
-				{$i18n.t('Models')}
-			</div>
 			{#each filteredItems as item, i}
+				{#if i === 0 || item?.type !== filteredItems[i - 1]?.type}
+					<div class="px-2 text-xs text-gray-500 py-1">
+						{#if item?.type === 'user'}
+							{$i18n.t('Users')}
+						{:else if item?.type === 'model'}
+							{$i18n.t('Models')}
+						{:else if item?.type === 'channel'}
+							{$i18n.t('Channels')}
+						{/if}
+					</div>
+				{/if}
+
 				<Tooltip content={item?.id} placement="top-start">
 					<button
 						type="button"
@@ -69,13 +155,47 @@
 						on:mousemove={() => {
 							selectedIndex = i;
 						}}
-						class="px-2.5 py-1.5 rounded-xl w-full text-left {i === selectedIndex
+						class="flex items-center justify-between px-2.5 py-1.5 rounded-xl w-full text-left {i ===
+						selectedIndex
 							? 'bg-gray-50 dark:bg-gray-800 selected-command-option-button'
 							: ''}"
 						data-selected={i === selectedIndex}
 					>
-						<div class="truncate">
-							@{item.name}
+						{#if item.type === 'channel'}
+							<div class=" size-4 justify-center flex items-center mr-0.5">
+								{#if item?.data?.access_control === null}
+									<Hashtag className="size-3" strokeWidth="2.5" />
+								{:else}
+									<Lock className="size-[15px]" strokeWidth="2" />
+								{/if}
+							</div>
+						{:else if item.type === 'model'}
+							<img
+								src={item?.data?.info?.meta?.profile_image_url ??
+									`${WEBUI_BASE_URL}/static/favicon.png`}
+								alt={item?.data?.name ?? item.id}
+								class="rounded-full size-5 items-center mr-2"
+							/>
+						{:else if item.type === 'user'}
+							<img
+								src={`${WEBUI_API_BASE_URL}/users/${item.id}/profile/image`}
+								alt={item?.label ?? item.id}
+								class="rounded-full size-5 items-center mr-2"
+							/>
+						{/if}
+
+						<div class="truncate flex-1 pr-2">
+							{item.label}
+						</div>
+
+						<div class="shrink-0 text-xs text-gray-500">
+							{#if item.type === 'user'}
+								{$i18n.t('User')}
+							{:else if item.type === 'model'}
+								{$i18n.t('Model')}
+							{:else if item.type === 'channel'}
+								{$i18n.t('Channel')}
+							{/if}
 						</div>
 					</button>
 				</Tooltip>

src/lib/components/channel/Thread.svelte

@@ -203,6 +203,8 @@
 					id={threadId}
 					typingUsersClassName="from-gray-50 dark:from-gray-850"
 					{typingUsers}
+					userSuggestions={true}
+					channelSuggestions={true}
 					{onChange}
 					onSubmit={submitHandler}
 				/>