From ba885d0026ad3cce70c7cc36d1d6f59775264a12 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 13 Aug 2026 13:03:56 -0600
Subject: [PATCH] refac

---
 .../components/channel/MessageInput.svelte    |  3 +-
 .../channel/MessageInput/MentionList.svelte   | 42 ++++++++++++++-----
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/channel/MessageInput.svelte b/src/lib/components/channel/MessageInput.svelte
index 4e48c50e62..e500414c08 100644
--- a/src/lib/components/channel/MessageInput.svelte
+++ b/src/lib/components/channel/MessageInput.svelte
@@ -575,7 +575,8 @@
 					i18n,
 					triggerChar: '@',
 					modelSuggestions: true,
-					userSuggestions
+					userSuggestions,
+					channelId: channel?.id
 				})
 			},
 			...(channelSuggestions
diff --git a/src/lib/components/channel/MessageInput/MentionList.svelte b/src/lib/components/channel/MessageInput/MentionList.svelte
index f3d14b7d23..8dab0e932f 100644
--- a/src/lib/components/channel/MessageInput/MentionList.svelte
+++ b/src/lib/components/channel/MessageInput/MentionList.svelte
@@ -2,12 +2,13 @@
 	import { getContext, onDestroy, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { channels, models, user } from '$lib/stores';
+	import { channels, models } 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';
+	import { getChannelMembersById } from '$lib/apis/channels';
 
 	export let query = '';
 
@@ -20,28 +21,47 @@
 	export let modelSuggestions = false;
 	export let userSuggestions = false;
 	export let channelSuggestions = false;
+	export let channelId: string | null = null;
 
 	let _models = [];
 	let _users = [];
 	let _channels = [];
 
+	type UserSuggestion = { id: string; name: string };
+
 	$: 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;
-		});
+	const toUserItems = (users: UserSuggestion[]) =>
+		[...users]
+			.map((u) => ({ type: 'user', id: u.id, label: u.name }))
+			.sort((a, b) => a.label.localeCompare(b.label));
 
-		if (res) {
-			_users = [...res.users.map((u) => ({ type: 'user', id: u.id, label: u.name }))].sort((a, b) =>
-				a.label.localeCompare(b.label)
-			);
-		}
+	const getUserList = async () => {
+		const [channelMembers, searchResults] = await Promise.all([
+			channelId
+				? getChannelMembersById(localStorage.token, channelId, query, 'name', 'asc').catch(
+						(error) => {
+							console.error('Error loading channel members:', error);
+							return null;
+						}
+					)
+				: Promise.resolve(null),
+			searchUsers(localStorage.token, query).catch((error) => {
+				console.error('Error searching users:', error);
+				return null;
+			})
+		]);
+
+		const memberUsers = (channelMembers?.users ?? []) as UserSuggestion[];
+		const searchedUsers = (searchResults?.users ?? []) as UserSuggestion[];
+		const memberIds = new Set(memberUsers.map((u) => u.id));
+		const globalUsers = searchedUsers.filter((u) => !memberIds.has(u.id));
+
+		_users = [...toUserItems(memberUsers), ...toUserItems(globalUsers)];
 	};
 
 	$: if (query !== null && userSuggestions) {