Merge 3b3e12b43a into 6f1486ffd0

Co-Authored-By: ALiNew <42788336+sukjinkim@users.noreply.github.com>

backend/open_webui/models/files.py

@@ -104,6 +104,11 @@ class FileUpdateForm(BaseModel):
     meta: Optional[dict] = None
 
 
+class FileListResponse(BaseModel):
+    items: list[FileModel]
+    total: int
+
+
 class FilesTable:
     def insert_new_file(self, user_id: str, form_data: FileForm) -> Optional[FileModel]:
         with get_db() as db:

backend/open_webui/models/knowledge.py

@@ -5,6 +5,7 @@ from typing import Optional
 import uuid
 
 from open_webui.internal.db import Base, get_db
+
 from open_webui.env import SRC_LOG_LEVELS
 
 from open_webui.models.files import (
@@ -30,6 +31,8 @@ from sqlalchemy import (
 )
 
 from open_webui.utils.access_control import has_access
+from open_webui.utils.db.access_control import has_permission
+
 
 log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])
@@ -132,7 +135,7 @@ class KnowledgeResponse(KnowledgeModel):
 
 
 class KnowledgeUserResponse(KnowledgeUserModel):
-    files: Optional[list[FileMetadataResponse | dict]] = None
+    pass
 
 
 class KnowledgeForm(BaseModel):
@@ -145,6 +148,11 @@ class FileUserResponse(FileModelResponse):
     user: Optional[UserResponse] = None
 
 
+class KnowledgeListResponse(BaseModel):
+    items: list[KnowledgeUserModel]
+    total: int
+
+
 class KnowledgeFileListResponse(BaseModel):
     items: list[FileUserResponse]
     total: int
@@ -177,12 +185,13 @@ class KnowledgeTable:
             except Exception:
                 return None
 
-    def get_knowledge_bases(self) -> list[KnowledgeUserModel]:
+    def get_knowledge_bases(
+        self, skip: int = 0, limit: int = 30
+    ) -> list[KnowledgeUserModel]:
         with get_db() as db:
             all_knowledge = (
                 db.query(Knowledge).order_by(Knowledge.updated_at.desc()).all()
             )
-
             user_ids = list(set(knowledge.user_id for knowledge in all_knowledge))
 
             users = Users.get_users_by_user_ids(user_ids) if user_ids else []
@@ -201,6 +210,126 @@ class KnowledgeTable:
                 )
             return knowledge_bases
 
+    def search_knowledge_bases(
+        self, user_id: str, filter: dict, skip: int = 0, limit: int = 30
+    ) -> KnowledgeListResponse:
+        try:
+            with get_db() as db:
+                query = db.query(Knowledge, User).outerjoin(
+                    User, User.id == Knowledge.user_id
+                )
+
+                if filter:
+                    query_key = filter.get("query")
+                    if query_key:
+                        query = query.filter(
+                            or_(
+                                Knowledge.name.ilike(f"%{query_key}%"),
+                                Knowledge.description.ilike(f"%{query_key}%"),
+                            )
+                        )
+
+                    view_option = filter.get("view_option")
+                    if view_option == "created":
+                        query = query.filter(Knowledge.user_id == user_id)
+                    elif view_option == "shared":
+                        query = query.filter(Knowledge.user_id != user_id)
+
+                    query = has_permission(db, Knowledge, query, filter)
+
+                query = query.order_by(Knowledge.updated_at.desc())
+
+                total = query.count()
+                if skip:
+                    query = query.offset(skip)
+                if limit:
+                    query = query.limit(limit)
+
+                items = query.all()
+
+                knowledge_bases = []
+                for knowledge_base, user in items:
+                    knowledge_bases.append(
+                        KnowledgeUserModel.model_validate(
+                            {
+                                **KnowledgeModel.model_validate(
+                                    knowledge_base
+                                ).model_dump(),
+                                "user": (
+                                    UserModel.model_validate(user).model_dump()
+                                    if user
+                                    else None
+                                ),
+                            }
+                        )
+                    )
+
+                return KnowledgeListResponse(items=knowledge_bases, total=total)
+        except Exception as e:
+            print(e)
+            return KnowledgeListResponse(items=[], total=0)
+
+    def search_knowledge_files(
+        self, filter: dict, skip: int = 0, limit: int = 30
+    ) -> KnowledgeFileListResponse:
+        """
+        Scalable version: search files across all knowledge bases the user has
+        READ access to, without loading all KBs or using large IN() lists.
+        """
+        try:
+            with get_db() as db:
+                # Base query: join Knowledge → KnowledgeFile → File
+                query = (
+                    db.query(File, User)
+                    .join(KnowledgeFile, File.id == KnowledgeFile.file_id)
+                    .join(Knowledge, KnowledgeFile.knowledge_id == Knowledge.id)
+                    .outerjoin(User, User.id == KnowledgeFile.user_id)
+                )
+
+                # Apply access-control directly to the joined query
+                # This makes the database handle filtering, even with 10k+ KBs
+                query = has_permission(db, Knowledge, query, filter)
+
+                # Apply filename search
+                if filter:
+                    q = filter.get("query")
+                    if q:
+                        query = query.filter(File.filename.ilike(f"%{q}%"))
+
+                # Order by file changes
+                query = query.order_by(File.updated_at.desc())
+
+                # Count before pagination
+                total = query.count()
+
+                if skip:
+                    query = query.offset(skip)
+                if limit:
+                    query = query.limit(limit)
+
+                rows = query.all()
+
+                items = []
+                for file, user in rows:
+                    items.append(
+                        FileUserResponse(
+                            **FileModel.model_validate(file).model_dump(),
+                            user=(
+                                UserResponse(
+                                    **UserModel.model_validate(user).model_dump()
+                                )
+                                if user
+                                else None
+                            ),
+                        )
+                    )
+
+                return KnowledgeFileListResponse(items=items, total=total)
+
+        except Exception as e:
+            print("search_knowledge_files error:", e)
+            return KnowledgeFileListResponse(items=[], total=0)
+
     def check_access_by_user_id(self, id, user_id, permission="write") -> bool:
         knowledge = self.get_knowledge_by_id(id)
         if not knowledge:

backend/open_webui/routers/audio.py

@@ -33,6 +33,7 @@ from fastapi.responses import FileResponse
 from pydantic import BaseModel
 
 
+from open_webui.utils.misc import strict_match_mime_type
 from open_webui.utils.auth import get_admin_user, get_verified_user
 from open_webui.utils.headers import include_user_info_headers
 from open_webui.config import (
@@ -1155,17 +1156,9 @@ def transcription(
 
     stt_supported_content_types = getattr(
         request.app.state.config, "STT_SUPPORTED_CONTENT_TYPES", []
-    )
+    ) or ["audio/*", "video/webm"]
 
-    if not any(
-        fnmatch(file.content_type, content_type)
-        for content_type in (
-            stt_supported_content_types
-            if stt_supported_content_types
-            and any(t.strip() for t in stt_supported_content_types)
-            else ["audio/*", "video/webm"]
-        )
-    ):
+    if not strict_match_mime_type(stt_supported_content_types, file.content_type):
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail=ERROR_MESSAGES.FILE_NOT_SUPPORTED,

backend/open_webui/routers/files.py

@@ -39,7 +39,6 @@ from open_webui.models.knowledge import Knowledges
 from open_webui.models.groups import Groups
 
 
-from open_webui.routers.knowledge import get_knowledge, get_knowledge_list
 from open_webui.routers.retrieval import ProcessFileForm, process_file
 from open_webui.routers.audio import transcribe
 
@@ -48,7 +47,7 @@ from open_webui.storage.provider import Storage
 
 from open_webui.utils.auth import get_admin_user, get_verified_user
 from open_webui.utils.access_control import has_access
-
+from open_webui.utils.misc import strict_match_mime_type
 from pydantic import BaseModel
 
 log = logging.getLogger(__name__)
@@ -109,17 +108,9 @@ def process_uploaded_file(request, file, file_path, file_item, file_metadata, us
         if file.content_type:
             stt_supported_content_types = getattr(
                 request.app.state.config, "STT_SUPPORTED_CONTENT_TYPES", []
-            )
+            ) or ["audio/*", "video/webm"]
 
-            if any(
-                fnmatch(file.content_type, content_type)
-                for content_type in (
-                    stt_supported_content_types
-                    if stt_supported_content_types
-                    and any(t.strip() for t in stt_supported_content_types)
-                    else ["audio/*", "video/webm"]
-                )
-            ):
+            if strict_match_mime_type(stt_supported_content_types, file.content_type):
                 file_path = Storage.get_file(file_path)
                 result = transcribe(request, file_path, file_metadata, user)
 

backend/open_webui/routers/knowledge.py

@@ -4,6 +4,7 @@ from fastapi import APIRouter, Depends, HTTPException, status, Request, Query
 from fastapi.concurrency import run_in_threadpool
 import logging
 
+from open_webui.models.groups import Groups
 from open_webui.models.knowledge import (
     KnowledgeFileListResponse,
     Knowledges,
@@ -40,53 +41,115 @@ router = APIRouter()
 # getKnowledgeBases
 ############################
 
+PAGE_ITEM_COUNT = 30
+
 
 class KnowledgeAccessResponse(KnowledgeUserResponse):
     write_access: Optional[bool] = False
 
 
-@router.get("/", response_model=list[KnowledgeAccessResponse])
-async def get_knowledge(user=Depends(get_verified_user)):
-    # Return knowledge bases with read access
-    knowledge_bases = []
-    if user.role == "admin" and BYPASS_ADMIN_ACCESS_CONTROL:
-        knowledge_bases = Knowledges.get_knowledge_bases()
-    else:
-        knowledge_bases = Knowledges.get_knowledge_bases_by_user_id(user.id, "read")
-
-    return [
-        KnowledgeAccessResponse(
-            **knowledge_base.model_dump(),
-            files=Knowledges.get_file_metadatas_by_id(knowledge_base.id),
-            write_access=(
-                user.id == knowledge_base.user_id
-                or has_access(user.id, "write", knowledge_base.access_control)
-            ),
-        )
-        for knowledge_base in knowledge_bases
-    ]
+class KnowledgeAccessListResponse(BaseModel):
+    items: list[KnowledgeAccessResponse]
+    total: int
 
 
-@router.get("/list", response_model=list[KnowledgeAccessResponse])
-async def get_knowledge_list(user=Depends(get_verified_user)):
-    # Return knowledge bases with write access
-    knowledge_bases = []
-    if user.role == "admin" and BYPASS_ADMIN_ACCESS_CONTROL:
-        knowledge_bases = Knowledges.get_knowledge_bases()
-    else:
-        knowledge_bases = Knowledges.get_knowledge_bases_by_user_id(user.id, "read")
+@router.get("/", response_model=KnowledgeAccessListResponse)
+async def get_knowledge_bases(page: Optional[int] = 1, user=Depends(get_verified_user)):
+    page = max(page, 1)
+    limit = PAGE_ITEM_COUNT
+    skip = (page - 1) * limit
 
-    return [
-        KnowledgeAccessResponse(
-            **knowledge_base.model_dump(),
-            files=Knowledges.get_file_metadatas_by_id(knowledge_base.id),
-            write_access=(
-                user.id == knowledge_base.user_id
-                or has_access(user.id, "write", knowledge_base.access_control)
-            ),
-        )
-        for knowledge_base in knowledge_bases
-    ]
+    filter = {}
+    if not user.role == "admin" or not BYPASS_ADMIN_ACCESS_CONTROL:
+        groups = Groups.get_groups_by_member_id(user.id)
+        if groups:
+            filter["group_ids"] = [group.id for group in groups]
+
+        filter["user_id"] = user.id
+
+    result = Knowledges.search_knowledge_bases(
+        user.id, filter=filter, skip=skip, limit=limit
+    )
+
+    return KnowledgeAccessListResponse(
+        items=[
+            KnowledgeAccessResponse(
+                **knowledge_base.model_dump(),
+                write_access=(
+                    user.id == knowledge_base.user_id
+                    or has_access(user.id, "write", knowledge_base.access_control)
+                ),
+            )
+            for knowledge_base in result.items
+        ],
+        total=result.total,
+    )
+
+
+@router.get("/search", response_model=KnowledgeAccessListResponse)
+async def search_knowledge_bases(
+    query: Optional[str] = None,
+    view_option: Optional[str] = None,
+    page: Optional[int] = 1,
+    user=Depends(get_verified_user),
+):
+    page = max(page, 1)
+    limit = PAGE_ITEM_COUNT
+    skip = (page - 1) * limit
+
+    filter = {}
+    if query:
+        filter["query"] = query
+    if view_option:
+        filter["view_option"] = view_option
+
+    if not user.role == "admin" or not BYPASS_ADMIN_ACCESS_CONTROL:
+        groups = Groups.get_groups_by_member_id(user.id)
+        if groups:
+            filter["group_ids"] = [group.id for group in groups]
+
+        filter["user_id"] = user.id
+
+    result = Knowledges.search_knowledge_bases(
+        user.id, filter=filter, skip=skip, limit=limit
+    )
+
+    return KnowledgeAccessListResponse(
+        items=[
+            KnowledgeAccessResponse(
+                **knowledge_base.model_dump(),
+                write_access=(
+                    user.id == knowledge_base.user_id
+                    or has_access(user.id, "write", knowledge_base.access_control)
+                ),
+            )
+            for knowledge_base in result.items
+        ],
+        total=result.total,
+    )
+
+
+@router.get("/search/files", response_model=KnowledgeFileListResponse)
+async def search_knowledge_files(
+    query: Optional[str] = None,
+    page: Optional[int] = 1,
+    user=Depends(get_verified_user),
+):
+    page = max(page, 1)
+    limit = PAGE_ITEM_COUNT
+    skip = (page - 1) * limit
+
+    filter = {}
+    if query:
+        filter["query"] = query
+
+    groups = Groups.get_groups_by_member_id(user.id)
+    if groups:
+        filter["group_ids"] = [group.id for group in groups]
+
+    filter["user_id"] = user.id
+
+    return Knowledges.search_knowledge_files(filter=filter, skip=skip, limit=limit)
 
 
 ############################
@@ -198,7 +261,7 @@ async def reindex_knowledge_files(request: Request, user=Depends(get_verified_us
 
 
 class KnowledgeFilesResponse(KnowledgeResponse):
-    files: list[FileMetadataResponse]
+    files: Optional[list[FileMetadataResponse]] = None
     write_access: Optional[bool] = False
 
 
@@ -215,7 +278,6 @@ async def get_knowledge_by_id(id: str, user=Depends(get_verified_user)):
 
             return KnowledgeFilesResponse(
                 **knowledge.model_dump(),
-                files=Knowledges.get_file_metadatas_by_id(knowledge.id),
                 write_access=(
                     user.id == knowledge.user_id
                     or has_access(user.id, "write", knowledge.access_control)

backend/open_webui/utils/db/access_control.py

@@ -0,0 +1,130 @@
+from pydantic import BaseModel, ConfigDict
+from sqlalchemy import BigInteger, Boolean, Column, String, Text, JSON
+from sqlalchemy.dialects.postgresql import JSONB
+
+
+from sqlalchemy import or_, func, select, and_, text, cast, or_, and_, func
+
+
+def has_permission(db, DocumentModel, query, filter: dict, permission: str = "read"):
+    group_ids = filter.get("group_ids", [])
+    user_id = filter.get("user_id")
+    dialect_name = db.bind.dialect.name
+
+    conditions = []
+
+    # Handle read_only permission separately
+    if permission == "read_only":
+        # For read_only, we want items where:
+        # 1. User has explicit read permission (via groups or user-level)
+        # 2. BUT does NOT have write permission
+        # 3. Public items are NOT considered read_only
+
+        read_conditions = []
+
+        # Group-level read permission
+        if group_ids:
+            group_read_conditions = []
+            for gid in group_ids:
+                if dialect_name == "sqlite":
+                    group_read_conditions.append(
+                        DocumentModel.access_control["read"]["group_ids"].contains(
+                            [gid]
+                        )
+                    )
+                elif dialect_name == "postgresql":
+                    group_read_conditions.append(
+                        cast(
+                            DocumentModel.access_control["read"]["group_ids"],
+                            JSONB,
+                        ).contains([gid])
+                    )
+
+            if group_read_conditions:
+                read_conditions.append(or_(*group_read_conditions))
+
+        # Combine read conditions
+        if read_conditions:
+            has_read = or_(*read_conditions)
+        else:
+            # If no read conditions, return empty result
+            return query.filter(False)
+
+        # Now exclude items where user has write permission
+        write_exclusions = []
+
+        # Exclude items owned by user (they have implicit write)
+        if user_id:
+            write_exclusions.append(DocumentModel.user_id != user_id)
+
+        # Exclude items where user has explicit write permission via groups
+        if group_ids:
+            group_write_conditions = []
+            for gid in group_ids:
+                if dialect_name == "sqlite":
+                    group_write_conditions.append(
+                        DocumentModel.access_control["write"]["group_ids"].contains(
+                            [gid]
+                        )
+                    )
+                elif dialect_name == "postgresql":
+                    group_write_conditions.append(
+                        cast(
+                            DocumentModel.access_control["write"]["group_ids"],
+                            JSONB,
+                        ).contains([gid])
+                    )
+
+            if group_write_conditions:
+                # User should NOT have write permission
+                write_exclusions.append(~or_(*group_write_conditions))
+
+        # Exclude public items (items without access_control)
+        write_exclusions.append(DocumentModel.access_control.isnot(None))
+        write_exclusions.append(cast(DocumentModel.access_control, String) != "null")
+
+        # Combine: has read AND does not have write AND not public
+        if write_exclusions:
+            query = query.filter(and_(has_read, *write_exclusions))
+        else:
+            query = query.filter(has_read)
+
+        return query
+
+    # Original logic for other permissions (read, write, etc.)
+    # Public access conditions
+    if group_ids or user_id:
+        conditions.extend(
+            [
+                DocumentModel.access_control.is_(None),
+                cast(DocumentModel.access_control, String) == "null",
+            ]
+        )
+
+    # User-level permission (owner has all permissions)
+    if user_id:
+        conditions.append(DocumentModel.user_id == user_id)
+
+    # Group-level permission
+    if group_ids:
+        group_conditions = []
+        for gid in group_ids:
+            if dialect_name == "sqlite":
+                group_conditions.append(
+                    DocumentModel.access_control[permission]["group_ids"].contains(
+                        [gid]
+                    )
+                )
+            elif dialect_name == "postgresql":
+                group_conditions.append(
+                    cast(
+                        DocumentModel.access_control[permission]["group_ids"],
+                        JSONB,
+                    ).contains([gid])
+                )
+        conditions.append(or_(*group_conditions))
+
+    if conditions:
+        query = query.filter(or_(*conditions))
+
+    return query

backend/open_webui/utils/misc.py

@@ -9,6 +9,7 @@ from pathlib import Path
 from typing import Callable, Optional, Sequence, Union
 import json
 import aiohttp
+import mimeparse
 
 
 import collections.abc
@@ -577,6 +578,37 @@ def throttle(interval: float = 10.0):
     return decorator
 
 
+def strict_match_mime_type(supported: list[str] | str, header: str) -> Optional[str]:
+    """
+    Strictly match the mime type with the supported mime types.
+
+    :param supported: The supported mime types.
+    :param header: The header to match.
+    :return: The matched mime type or None if no match is found.
+    """
+
+    try:
+        if isinstance(supported, str):
+            supported = supported.split(",")
+
+        supported = [s for s in supported if s.strip() and "/" in s]
+
+        match = mimeparse.best_match(supported, header)
+        if not match:
+            return None
+
+        _, _, match_params = mimeparse.parse_mime_type(match)
+        _, _, header_params = mimeparse.parse_mime_type(header)
+        for k, v in match_params.items():
+            if header_params.get(k) != v:
+                return None
+
+        return match
+    except Exception as e:
+        log.exception(f"Failed to match mime type {header}: {e}")
+        return None
+
+
 def extract_urls(text: str) -> list[str]:
     # Regex pattern to match URLs
     url_pattern = re.compile(

backend/requirements.txt

@@ -20,6 +20,7 @@ aiofiles
 starlette-compress==1.6.1
 httpx[socks,http2,zstd,cli,brotli]==0.28.1
 starsessions[redis]==2.2.1
+python-mimeparse==2.0.0
 
 sqlalchemy==2.0.44
 alembic==1.17.2

pyproject.toml

@@ -28,6 +28,7 @@ dependencies = [
     "starlette-compress==1.6.1",
     "httpx[socks,http2,zstd,cli,brotli]==0.28.1",
     "starsessions[redis]==2.2.1",
+    "python-mimeparse==2.0.0",
 
     "sqlalchemy==2.0.44",
     "alembic==1.17.2",

src/lib/apis/knowledge/index.ts

@@ -38,10 +38,13 @@ export const createNewKnowledge = async (
 	return res;
 };
 
-export const getKnowledgeBases = async (token: string = '') => {
+export const getKnowledgeBases = async (token: string = '', page: number | null = null) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/`, {
+	const searchParams = new URLSearchParams();
+	if (page) searchParams.append('page', page.toString());
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/?${searchParams.toString()}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -69,10 +72,20 @@ export const getKnowledgeBases = async (token: string = '') => {
 	return res;
 };
 
-export const getKnowledgeBaseList = async (token: string = '') => {
+export const searchKnowledgeBases = async (
+	token: string = '',
+	query: string | null = null,
+	viewOption: string | null = null,
+	page: number | null = null
+) => {
 	let error = null;
 
-	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/list`, {
+	const searchParams = new URLSearchParams();
+	if (query) searchParams.append('query', query);
+	if (viewOption) searchParams.append('view_option', viewOption);
+	if (page) searchParams.append('page', page.toString());
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/search?${searchParams.toString()}`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -100,6 +113,55 @@ export const getKnowledgeBaseList = async (token: string = '') => {
 	return res;
 };
 
+export const searchKnowledgeFiles = async (
+	token: string,
+	query?: string | null = null,
+	viewOption?: string | null = null,
+	orderBy?: string | null = null,
+	direction?: string | null = null,
+	page: number = 1
+) => {
+	let error = null;
+
+	const searchParams = new URLSearchParams();
+	if (query) searchParams.append('query', query);
+	if (viewOption) searchParams.append('view_option', viewOption);
+	if (orderBy) searchParams.append('order_by', orderBy);
+	if (direction) searchParams.append('direction', direction);
+	searchParams.append('page', page.toString());
+
+	const res = await fetch(
+		`${WEBUI_API_BASE_URL}/knowledge/search/files?${searchParams.toString()}`,
+		{
+			method: 'GET',
+			headers: {
+				Accept: 'application/json',
+				'Content-Type': 'application/json',
+				authorization: `Bearer ${token}`
+			}
+		}
+	)
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+
+			console.error(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const getKnowledgeById = async (token: string, id: string) => {
 	let error = null;
 

src/lib/components/channel/Channel.svelte

@@ -290,7 +290,7 @@
 
 <div
 	class="h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-		? 'md:max-w-[calc(100%-260px)]'
+		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} w-full max-w-full flex flex-col"
 	id="channel-container"
 >

src/lib/components/chat/Chat.svelte

@@ -2384,7 +2384,7 @@
 
 <div
 	class="h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-		? '  md:max-w-[calc(100%-260px)]'
+		? '  md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ' '} w-full max-w-full flex flex-col"
 	id="chat-container"
 >

src/lib/components/chat/ChatControls/Embeds.svelte

@@ -1,10 +1,37 @@
-<script>
+<script lang="ts">
 	import { embed, showControls, showEmbeds } from '$lib/stores';
 
 	import FullHeightIframe from '$lib/components/common/FullHeightIframe.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
 	export let overlay = false;
+
+	const getSrcUrl = (url: string, chatId?: string, messageId?: string) => {
+		try {
+			const parsed = new URL(url);
+
+			if (chatId) {
+				parsed.searchParams.set('chat_id', chatId);
+			}
+
+			if (messageId) {
+				parsed.searchParams.set('message_id', messageId);
+			}
+
+			return parsed.toString();
+		} catch {
+			// Fallback for relative URLs or invalid input
+			const hasQuery = url.includes('?');
+			const parts = [];
+
+			if (chatId) parts.push(`chat_id=${encodeURIComponent(chatId)}`);
+			if (messageId) parts.push(`message_id=${encodeURIComponent(messageId)}`);
+
+			if (parts.length === 0) return url;
+
+			return url + (hasQuery ? '&' : '?') + parts.join('&');
+		}
+	};
 </script>
 
 {#if $embed}
@@ -40,7 +67,11 @@
 				<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
 			{/if}
 
-			<FullHeightIframe src={$embed?.url} iframeClassName="w-full h-full" />
+			<FullHeightIframe
+				src={getSrcUrl($embed?.url ?? '', $embed?.chatId, $embed?.messageId)}
+				payload={$embed?.source ?? null}
+				iframeClassName="w-full h-full"
+			/>
 		</div>
 	</div>
 {/if}

src/lib/components/chat/MessageInput/CommandSuggestionList.svelte

@@ -28,9 +28,6 @@
 		await Promise.all([
 			(async () => {
 				prompts.set(await getPrompts(localStorage.token));
-			})(),
-			(async () => {
-				knowledge.set(await getKnowledgeBases(localStorage.token));
 			})()
 		]);
 		loading = false;
@@ -103,7 +100,6 @@
 					bind:this={suggestionElement}
 					{query}
 					bind:filteredItems
-					knowledge={$knowledge ?? []}
 					onSelect={(e) => {
 						const { type, data } = e;
 

src/lib/components/chat/MessageInput/Commands/Knowledge.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import Fuse from 'fuse.js';
-
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	dayjs.extend(relativeTime);
 
 	import { tick, getContext, onMount, onDestroy } from 'svelte';
-	import { removeLastWordFromString, isValidHttpUrl, isYoutubeUrl } from '$lib/utils';
+
+	import { folders } from '$lib/stores';
+	import { getFolders } from '$lib/apis/folders';
+	import { searchKnowledgeBases, searchKnowledgeFiles } from '$lib/apis/knowledge';
+	import { removeLastWordFromString, isValidHttpUrl, isYoutubeUrl, decodeString } from '$lib/utils';
+
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
 	import Database from '$lib/components/icons/Database.svelte';
 	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
 	import Youtube from '$lib/components/icons/Youtube.svelte';
-	import { folders } from '$lib/stores';
 	import Folder from '$lib/components/icons/Folder.svelte';
 
 	const i18n = getContext('i18n');
@@ -21,35 +23,24 @@
 	export let query = '';
 	export let onSelect = (e) => {};
 
-	export let knowledge = [];
-
 	let selectedIdx = 0;
-
 	let items = [];
-	let fuse = null;
 
 	export let filteredItems = [];
-	$: if (fuse) {
-		filteredItems = [
-			...(query
-				? fuse.search(query).map((e) => {
-						return e.item;
-					})
-				: items),
-
-			...(query.startsWith('http')
-				? isYoutubeUrl(query)
-					? [{ type: 'youtube', name: query, description: query }]
-					: [
-							{
-								type: 'web',
-								name: query,
-								description: query
-							}
-						]
-				: [])
-		];
-	}
+	$: filteredItems = [
+		...(query.startsWith('http')
+			? isYoutubeUrl(query)
+				? [{ type: 'youtube', name: query, description: query }]
+				: [
+						{
+							type: 'web',
+							name: query,
+							description: query
+						}
+					]
+			: []),
+		...items
+	];
 
 	$: if (query) {
 		selectedIdx = 0;
@@ -71,58 +62,70 @@
 			item.click();
 		}
 	};
-	const decodeString = (str: string) => {
-		try {
-			return decodeURIComponent(str);
-		} catch (e) {
-			return str;
+
+	let folderItems = [];
+	let knowledgeItems = [];
+	let fileItems = [];
+
+	$: items = [...folderItems, ...knowledgeItems, ...fileItems];
+
+	$: if (query !== null) {
+		getItems();
+	}
+
+	const getItems = () => {
+		getFolderItems();
+		getKnowledgeItems();
+		getKnowledgeFileItems();
+	};
+
+	const getFolderItems = async () => {
+		folderItems = $folders
+			.map((folder) => ({
+				...folder,
+				type: 'folder',
+				description: $i18n.t('Folder'),
+				title: folder.name
+			}))
+			.filter((folder) => folder.name.toLowerCase().includes(query.toLowerCase()));
+	};
+
+	const getKnowledgeItems = async () => {
+		const res = await searchKnowledgeBases(localStorage.token, query).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			knowledgeItems = res.items.map((item) => {
+				return {
+					...item,
+					type: 'collection'
+				};
+			});
+		}
+	};
+
+	const getKnowledgeFileItems = async () => {
+		const res = await searchKnowledgeFiles(localStorage.token, query).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			fileItems = res.items.map((item) => {
+				return {
+					...item,
+					type: 'file',
+					name: item.filename,
+					description: item.collection ? item.collection.name : ''
+				};
+			});
 		}
 	};
 
 	onMount(async () => {
-		let collections = knowledge
-			.filter((item) => !item?.meta?.document)
-			.map((item) => ({
-				...item,
-				type: 'collection'
-			}));
-
-		let collection_files =
-			knowledge.length > 0
-				? [
-						...knowledge
-							.reduce((a, item) => {
-								return [
-									...new Set([
-										...a,
-										...(item?.files ?? []).map((file) => ({
-											...file,
-											collection: { name: item.name, description: item.description } // DO NOT REMOVE, USED IN FILE DESCRIPTION/ATTACHMENT
-										}))
-									])
-								];
-							}, [])
-							.map((file) => ({
-								...file,
-								name: file?.meta?.name,
-								description: `${file?.collection?.description}`,
-								knowledge: true, // DO NOT REMOVE, USED TO INDICATE KNOWLEDGE BASE FILE
-								type: 'file'
-							}))
-					]
-				: [];
-
-		let folder_items = $folders.map((folder) => ({
-			...folder,
-			type: 'folder',
-			description: $i18n.t('Folder'),
-			title: folder.name
-		}));
-
-		items = [...folder_items, ...collections, ...collection_files];
-		fuse = new Fuse(items, {
-			keys: ['name', 'description']
-		});
+		if ($folders === null) {
+			await folders.set(await getFolders(localStorage.token));
+		}
 
 		await tick();
 	});
@@ -142,12 +145,20 @@
 	});
 </script>
 
-<div class="px-2 text-xs text-gray-500 py-1">
-	{$i18n.t('Knowledge')}
-</div>
-
 {#if filteredItems.length > 0 || query.startsWith('http')}
 	{#each filteredItems as item, idx}
+		{#if idx === 0 || item?.type !== items[idx - 1]?.type}
+			<div class="px-2 text-xs text-gray-500 py-1">
+				{#if item?.type === 'folder'}
+					{$i18n.t('Folders')}
+				{:else if item?.type === 'collection'}
+					{$i18n.t('Collections')}
+				{:else if item?.type === 'file'}
+					{$i18n.t('Files')}
+				{/if}
+			</div>
+		{/if}
+
 		{#if !['youtube', 'web'].includes(item.type)}
 			<button
 				class=" px-2 py-1 rounded-xl w-full text-left flex justify-between items-center {idx ===

src/lib/components/chat/MessageInput/FilesOverlay.svelte

@@ -18,7 +18,7 @@
 	<div
 		bind:this={overlayElement}
 		class="fixed {$showSidebar
-			? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]'
+			? 'left-0 md:left-[var(--sidebar-width)] md:w-[calc(100%-var(--sidebar-width))]'
 			: 'left-0'}  fixed top-0 right-0 bottom-0 w-full h-full flex z-9999 touch-none pointer-events-none"
 		id="dropzone"
 		role="region"

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -73,16 +73,6 @@
 		}
 	};
 
-	const init = async () => {
-		if ($knowledge === null) {
-			await knowledge.set(await getKnowledgeBases(localStorage.token));
-		}
-	};
-
-	$: if (show) {
-		init();
-	}
-
 	const onSelect = (item) => {
 		if (files.find((f) => f.id === item.id)) {
 			return;
@@ -249,37 +239,35 @@
 						</Tooltip>
 					{/if}
 
-					{#if ($knowledge ?? []).length > 0}
-						<Tooltip
-							content={fileUploadCapableModels.length !== selectedModels.length
-								? $i18n.t('Model(s) do not support file upload')
-								: !fileUploadEnabled
-									? $i18n.t('You do not have permission to upload files.')
-									: ''}
-							className="w-full"
+					<Tooltip
+						content={fileUploadCapableModels.length !== selectedModels.length
+							? $i18n.t('Model(s) do not support file upload')
+							: !fileUploadEnabled
+								? $i18n.t('You do not have permission to upload files.')
+								: ''}
+						className="w-full"
+					>
+						<button
+							class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
+								? 'opacity-50'
+								: ''}"
+							on:click={() => {
+								tab = 'knowledge';
+							}}
 						>
-							<button
-								class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
-									? 'opacity-50'
-									: ''}"
-								on:click={() => {
-									tab = 'knowledge';
-								}}
-							>
-								<Database />
+							<Database />
 
-								<div class="flex items-center w-full justify-between">
-									<div class=" line-clamp-1">
-										{$i18n.t('Attach Knowledge')}
-									</div>
-
-									<div class="text-gray-500">
-										<ChevronRight />
-									</div>
+							<div class="flex items-center w-full justify-between">
+								<div class=" line-clamp-1">
+									{$i18n.t('Attach Knowledge')}
 								</div>
-							</button>
-						</Tooltip>
-					{/if}
+
+								<div class="text-gray-500">
+									<ChevronRight />
+								</div>
+							</div>
+						</button>
+					</Tooltip>
 
 					{#if ($chats ?? []).length > 0}
 						<Tooltip

src/lib/components/chat/MessageInput/InputMenu/Knowledge.svelte

@@ -4,114 +4,296 @@
 	import { decodeString } from '$lib/utils';
 	import { knowledge } from '$lib/stores';
 
-	import { getKnowledgeBases } from '$lib/apis/knowledge';
+	import { getKnowledgeBases, searchKnowledgeFilesById } from '$lib/apis/knowledge';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Database from '$lib/components/icons/Database.svelte';
 	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Loader from '$lib/components/common/Loader.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let onSelect = (e) => {};
 
 	let loaded = false;
-	let items = [];
 	let selectedIdx = 0;
 
-	onMount(async () => {
-		if ($knowledge === null) {
-			await knowledge.set(await getKnowledgeBases(localStorage.token));
+	let selectedItem = null;
+
+	let selectedFileItemsPage = 1;
+
+	let selectedFileItems = null;
+	let selectedFileItemsTotal = null;
+
+	let selectedFileItemsLoading = false;
+	let selectedFileAllItemsLoaded = false;
+
+	$: if (selectedItem) {
+		initSelectedFileItems();
+	}
+
+	const initSelectedFileItems = async () => {
+		selectedFileItemsPage = 1;
+		selectedFileItems = null;
+		selectedFileItemsTotal = null;
+		selectedFileAllItemsLoaded = false;
+		selectedFileItemsLoading = false;
+		await tick();
+		await getSelectedFileItemsPage();
+	};
+
+	const loadMoreSelectedFileItems = async () => {
+		if (selectedFileAllItemsLoaded) return;
+		selectedFileItemsPage += 1;
+		await getSelectedFileItemsPage();
+	};
+
+	const getSelectedFileItemsPage = async () => {
+		if (!selectedItem) return;
+		selectedFileItemsLoading = true;
+
+		const res = await searchKnowledgeFilesById(
+			localStorage.token,
+			selectedItem.id,
+			null,
+			null,
+			null,
+			null,
+			selectedFileItemsPage
+		).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			selectedFileItemsTotal = res.total;
+			const pageItems = res.items;
+
+			if ((pageItems ?? []).length === 0) {
+				selectedFileAllItemsLoaded = true;
+			} else {
+				selectedFileAllItemsLoaded = false;
+			}
+
+			if (selectedFileItems) {
+				selectedFileItems = [...selectedFileItems, ...pageItems];
+			} else {
+				selectedFileItems = pageItems;
+			}
 		}
 
-		let collections = $knowledge
-			.filter((item) => !item?.meta?.document)
-			.map((item) => ({
-				...item,
-				type: 'collection'
-			}));
-		``;
-		let collection_files =
-			$knowledge.length > 0
-				? [
-						...$knowledge
-							.reduce((a, item) => {
-								return [
-									...new Set([
-										...a,
-										...(item?.files ?? []).map((file) => ({
-											...file,
-											collection: { name: item.name, description: item.description } // DO NOT REMOVE, USED IN FILE DESCRIPTION/ATTACHMENT
-										}))
-									])
-								];
-							}, [])
-							.map((file) => ({
-								...file,
-								name: file?.meta?.name,
-								description: `${file?.collection?.name} - ${file?.collection?.description}`,
-								knowledge: true, // DO NOT REMOVE, USED TO INDICATE KNOWLEDGE BASE FILE
-								type: 'file'
-							}))
-					]
-				: [];
+		selectedFileItemsLoading = false;
+		return res;
+	};
 
-		items = [...collections, ...collection_files];
+	let page = 1;
+	let items = null;
+	let total = null;
+
+	let itemsLoading = false;
+	let allItemsLoaded = false;
+
+	$: if (loaded) {
+		init();
+	}
+
+	const init = async () => {
+		reset();
 		await tick();
+		await getItemsPage();
+	};
 
+	const reset = () => {
+		page = 1;
+		items = null;
+		total = null;
+		allItemsLoaded = false;
+		itemsLoading = false;
+	};
+
+	const loadMoreItems = async () => {
+		if (allItemsLoaded) return;
+		page += 1;
+		await getItemsPage();
+	};
+
+	const getItemsPage = async () => {
+		itemsLoading = true;
+		const res = await getKnowledgeBases(localStorage.token, page).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			console.log(res);
+			total = res.total;
+			const pageItems = res.items;
+
+			if ((pageItems ?? []).length === 0) {
+				allItemsLoaded = true;
+			} else {
+				allItemsLoaded = false;
+			}
+
+			if (items) {
+				items = [...items, ...pageItems];
+			} else {
+				items = pageItems;
+			}
+		}
+
+		itemsLoading = false;
+		return res;
+	};
+
+	onMount(async () => {
+		await tick();
 		loaded = true;
 	});
 </script>
 
-{#if loaded}
+{#if loaded && items !== null}
 	<div class="flex flex-col gap-0.5">
-		{#each items as item, idx}
-			<button
-				class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
-				selectedIdx
-					? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
-					: ''}"
-				type="button"
-				on:click={() => {
-					console.log(item);
-					onSelect(item);
-				}}
-				on:mousemove={() => {
-					selectedIdx = idx;
-				}}
-				on:mouseleave={() => {
-					if (idx === 0) {
-						selectedIdx = -1;
-					}
-				}}
-				data-selected={idx === selectedIdx}
-			>
-				<div class="  text-black dark:text-gray-100 flex items-center gap-1">
-					<Tooltip
-						content={item?.legacy
-							? $i18n.t('Legacy')
-							: item?.type === 'file'
-								? $i18n.t('File')
-								: item?.type === 'collection'
-									? $i18n.t('Collection')
-									: ''}
-						placement="top"
+		{#if items.length === 0}
+			<div class="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
+				{$i18n.t('No knowledge bases found.')}
+			</div>
+		{:else}
+			{#each items as item, idx (item.id)}
+				<div
+					class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
+					selectedIdx
+						? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
+						: ''}"
+				>
+					<button
+						class="w-full flex-1"
+						type="button"
+						on:click={() => {
+							onSelect({
+								type: 'collection',
+								...item
+							});
+						}}
+						on:mousemove={() => {
+							selectedIdx = idx;
+						}}
+						on:mouseleave={() => {
+							if (idx === 0) {
+								selectedIdx = -1;
+							}
+						}}
+						data-selected={idx === selectedIdx}
 					>
-						{#if item?.type === 'collection'}
-							<Database className="size-4" />
-						{:else}
-							<DocumentPage className="size-4" />
-						{/if}
-					</Tooltip>
+						<div class="  text-black dark:text-gray-100 flex items-center gap-1 shrink-0">
+							<Tooltip content={$i18n.t('Collection')} placement="top">
+								<Database className="size-4" />
+							</Tooltip>
 
-					<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
-						<div class="line-clamp-1 flex-1">
-							{decodeString(item?.name)}
+							<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
+								<div class="line-clamp-1 flex-1 text-sm">
+									{decodeString(item?.name)}
+								</div>
+							</Tooltip>
 						</div>
+					</button>
+
+					<Tooltip content={$i18n.t('Show Files')} placement="top">
+						<button
+							type="button"
+							class=" ml-2 opacity-50 hover:opacity-100 transition"
+							on:click={() => {
+								if (selectedItem && selectedItem.id === item.id) {
+									selectedItem = null;
+								} else {
+									selectedItem = item;
+								}
+							}}
+						>
+							{#if selectedItem && selectedItem.id === item.id}
+								<ChevronDown className="size-3" />
+							{:else}
+								<ChevronRight className="size-3" />
+							{/if}
+						</button>
 					</Tooltip>
 				</div>
-			</button>
-		{/each}
+
+				{#if selectedItem && selectedItem.id === item.id}
+					<div class="pl-3 mb-1 flex flex-col gap-0.5">
+						{#if selectedFileItems === null && selectedFileItemsTotal === null}
+							<div class=" py-1 flex justify-center">
+								<Spinner className="size-3" />
+							</div>
+						{:else if selectedFileItemsTotal === 0}
+							<div class=" text-xs text-gray-500 dark:text-gray-400 italic py-0.5 px-2">
+								{$i18n.t('No files in this knowledge base.')}
+							</div>
+						{:else}
+							{#each selectedFileItems as file, fileIdx (file.id)}
+								<button
+									class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm hover:bg-gray-50 hover:dark:bg-gray-800 hover:dark:text-gray-100"
+									type="button"
+									on:click={() => {
+										console.log(file);
+										onSelect({
+											type: 'file',
+											name: file?.meta?.name,
+											...file
+										});
+									}}
+								>
+									<div class=" flex items-center gap-1.5">
+										<Tooltip content={$i18n.t('Collection')} placement="top">
+											<DocumentPage className="size-4" />
+										</Tooltip>
+
+										<Tooltip content={decodeString(file?.meta?.name)} placement="top-start">
+											<div class="line-clamp-1 flex-1 text-sm">
+												{decodeString(file?.meta?.name)}
+											</div>
+										</Tooltip>
+									</div>
+								</button>
+							{/each}
+
+							{#if !selectedFileAllItemsLoaded && !selectedFileItemsLoading}
+								<Loader
+									on:visible={async (e) => {
+										if (!selectedFileItemsLoading) {
+											await loadMoreSelectedFileItems();
+										}
+									}}
+								>
+									<div
+										class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2"
+									>
+										<Spinner className=" size-3" />
+										<div class=" ">{$i18n.t('Loading...')}</div>
+									</div>
+								</Loader>
+							{/if}
+						{/if}
+					</div>
+				{/if}
+			{/each}
+
+			{#if !allItemsLoaded}
+				<Loader
+					on:visible={(e) => {
+						if (!itemsLoading) {
+							loadMoreItems();
+						}
+					}}
+				>
+					<div class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2">
+						<Spinner className=" size-4" />
+						<div class=" ">{$i18n.t('Loading...')}</div>
+					</div>
+				</Loader>
+			{/if}
+		{/if}
 	</div>
 {:else}
 	<div class="py-4.5">

src/lib/components/chat/Messages/Citations.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import CitationModal from './Citations/CitationModal.svelte';
 	import { embed, showControls, showEmbeds } from '$lib/stores';
 
+	import CitationModal from './Citations/CitationModal.svelte';
+
 	const i18n = getContext('i18n');
 
 	export let id = '';
+	export let chatId = '';
+
 	export let sources = [];
 	export let readOnly = false;
 
@@ -35,8 +38,11 @@
 						showControls.set(true);
 						showEmbeds.set(true);
 						embed.set({
+							url: embedUrl,
 							title: citations[sourceIdx]?.source?.name || 'Embedded Content',
-							url: embedUrl
+							source: citations[sourceIdx],
+							chatId: chatId,
+							messageId: id
 						});
 					}
 				} else {

src/lib/components/chat/Messages/Markdown/SourceToken.svelte

@@ -39,8 +39,6 @@
 	};
 </script>
 
-{sourceIds}
-
 {#if sourceIds}
 	{#if (token?.ids ?? []).length == 1}
 		<Source id={token.ids[0] - 1} title={sourceIds[token.ids[0] - 1]} {onClick} />

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -824,6 +824,7 @@
 								<Citations
 									bind:this={citationsElement}
 									id={message?.id}
+									{chatId}
 									sources={message?.sources ?? message?.citations}
 									{readOnly}
 								/>

src/lib/components/common/FullHeightIframe.svelte

@@ -21,6 +21,8 @@
 		'strict-origin-when-cross-origin';
 	export let allowFullscreen = true;
 
+	export let payload = null; // payload to send into the iframe on request
+
 	let iframe: HTMLIFrameElement | null = null;
 	let iframeSrc: string | null = null;
 	let iframeDoc: string | null = null;
@@ -142,13 +144,29 @@ window.Chart = parent.Chart; // Chart previously assigned on parent
 		}
 	}
 
-	// Handle height messages from the iframe (we also verify the sender)
 	function onMessage(e: MessageEvent) {
 		if (!iframe || e.source !== iframe.contentWindow) return;
-		const data = e.data as { type?: string; height?: number };
+
+		const data = e.data || {};
 		if (data?.type === 'iframe:height' && typeof data.height === 'number') {
 			iframe.style.height = Math.max(0, data.height) + 'px';
 		}
+
+		// Pong message for testing connectivity
+		if (data?.type === 'pong') {
+			console.log('Received pong from iframe:', data);
+
+			// Optional: reply back
+			iframe.contentWindow?.postMessage({ type: 'pong:ack' }, '*');
+		}
+
+		// Send payload data if requested
+		if (data?.type === 'payload') {
+			iframe.contentWindow?.postMessage(
+				{ type: 'payload', requestId: data?.requestId ?? null, payload: payload },
+				'*'
+			);
+		}
 	}
 
 	// When the iframe loads, try same-origin resize (cross-origin will noop)

src/lib/components/layout/ArchivedChatsModal.svelte

@@ -36,7 +36,7 @@
 
 	let filter = {};
 	$: filter = {
-		...(query ? { query } : {}),
+		...(query ? { query: query } : {}),
 		...(orderBy ? { order_by: orderBy } : {}),
 		...(direction ? { direction } : {})
 	};

src/lib/components/layout/ChatsModal.svelte

@@ -121,6 +121,7 @@
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 						bind:value={query}
 						placeholder={$i18n.t('Search Chats')}
+						maxlength="500"
 					/>
 
 					{#if query}

src/lib/components/layout/Sidebar.svelte

@@ -25,7 +25,8 @@
 		isApp,
 		models,
 		selectedFolder,
-		WEBUI_NAME
+		WEBUI_NAME,
+		sidebarWidth
 	} from '$lib/stores';
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
 
@@ -371,8 +372,55 @@
 		selectedChatId = null;
 	};
 
+	const MIN_WIDTH = 220;
+	const MAX_WIDTH = 480;
+
+	let isResizing = false;
+
+	let startWidth = 0;
+	let startClientX = 0;
+
+	const resizeStartHandler = (e: MouseEvent) => {
+		if ($mobile) return;
+		isResizing = true;
+
+		startClientX = e.clientX;
+		startWidth = $sidebarWidth ?? 260;
+
+		document.body.style.userSelect = 'none';
+	};
+
+	const resizeEndHandler = () => {
+		if (!isResizing) return;
+		isResizing = false;
+
+		document.body.style.userSelect = '';
+		localStorage.setItem('sidebarWidth', String($sidebarWidth));
+	};
+
+	const resizeSidebarHandler = (endClientX) => {
+		const dx = endClientX - startClientX;
+		const newSidebarWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + dx));
+
+		sidebarWidth.set(newSidebarWidth);
+		document.documentElement.style.setProperty('--sidebar-width', `${newSidebarWidth}px`);
+	};
+
 	let unsubscribers = [];
+
 	onMount(async () => {
+		try {
+			const width = Number(localStorage.getItem('sidebarWidth'));
+			if (!Number.isNaN(width) && width >= MIN_WIDTH && width <= MAX_WIDTH) {
+				sidebarWidth.set(width);
+			}
+		} catch {}
+
+		document.documentElement.style.setProperty('--sidebar-width', `${$sidebarWidth}px`);
+		sidebarWidth.subscribe((w) => {
+			document.documentElement.style.setProperty('--sidebar-width', `${w}px`);
+		});
+
 		await showSidebar.set(!$mobile ? localStorage.sidebar === 'true' : false);
 
 		unsubscribers = [
@@ -570,6 +618,16 @@
 	}}
 />
 
+<svelte:window
+	on:mousemove={(e) => {
+		if (!isResizing) return;
+		resizeSidebarHandler(e.clientX);
+	}}
+	on:mouseup={() => {
+		resizeEndHandler();
+	}}
+/>
+
 {#if !$mobile && !$showSidebar}
 	<div
 		class=" pt-[7px] pb-2 px-2 flex flex-col justify-between text-black dark:text-white hover:bg-gray-50/30 dark:hover:bg-gray-950/30 h-full z-10 transition-all border-e-[0.5px] border-gray-50 dark:border-gray-850/30"
@@ -775,7 +833,7 @@
 		data-state={$showSidebar}
 	>
 		<div
-			class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden scrollbar-hidden z-50 {$showSidebar
+			class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[var(--sidebar-width)] overflow-x-hidden scrollbar-hidden z-50 {$showSidebar
 				? ''
 				: 'invisible'}"
 		>
@@ -1321,4 +1379,17 @@
 			</div>
 		</div>
 	</div>
+
+	{#if !$mobile}
+		<div
+			class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
+			id="sidebar-resizer"
+			on:mousedown={resizeStartHandler}
+			role="separator"
+		>
+			<div
+				class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+			/>
+		</div>
+	{/if}
 {/if}

src/lib/components/layout/Sidebar/SearchInput.svelte

@@ -209,6 +209,7 @@
 			class="w-full rounded-r-xl py-1.5 pl-2.5 text-sm bg-transparent dark:text-gray-300 outline-hidden"
 			placeholder={placeholder ? placeholder : $i18n.t('Search')}
 			autocomplete="off"
+			maxlength="500"
 			bind:value
 			on:input={() => {
 				dispatch('input');

src/lib/components/workspace/Knowledge.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import Fuse from 'fuse.js';
-
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	dayjs.extend(relativeTime);
@@ -10,11 +8,7 @@
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, knowledge, user } from '$lib/stores';
-	import {
-		getKnowledgeBases,
-		deleteKnowledgeById,
-		getKnowledgeBaseList
-	} from '$lib/apis/knowledge';
+	import { deleteKnowledgeById, searchKnowledgeBases } from '$lib/apis/knowledge';
 
 	import { goto } from '$app/navigation';
 	import { capitalizeFirstLetter } from '$lib/utils';
@@ -28,75 +22,90 @@
 	import Tooltip from '../common/Tooltip.svelte';
 	import XMark from '../icons/XMark.svelte';
 	import ViewSelector from './common/ViewSelector.svelte';
+	import Loader from '../common/Loader.svelte';
 
 	let loaded = false;
-
-	let query = '';
-	let selectedItem = null;
 	let showDeleteConfirm = false;
-
 	let tagsContainerElement: HTMLDivElement;
+
+	let selectedItem = null;
+
+	let page = 1;
+	let query = '';
 	let viewOption = '';
 
-	let fuse = null;
+	let items = null;
+	let total = null;
 
-	let knowledgeBases = [];
+	let allItemsLoaded = false;
+	let itemsLoading = false;
 
-	let items = [];
-	let filteredItems = [];
+	$: if (loaded && query !== undefined && viewOption !== undefined) {
+		init();
+	}
 
-	const setFuse = async () => {
-		items = knowledgeBases.filter(
-			(item) =>
-				viewOption === '' ||
-				(viewOption === 'created' && item.user_id === $user?.id) ||
-				(viewOption === 'shared' && item.user_id !== $user?.id)
+	const reset = () => {
+		page = 1;
+		items = null;
+		total = null;
+		allItemsLoaded = false;
+		itemsLoading = false;
+	};
+
+	const loadMoreItems = async () => {
+		if (allItemsLoaded) return;
+		page += 1;
+		await getItemsPage();
+	};
+
+	const init = async () => {
+		reset();
+		await getItemsPage();
+	};
+
+	const getItemsPage = async () => {
+		itemsLoading = true;
+		const res = await searchKnowledgeBases(localStorage.token, query, viewOption, page).catch(
+			() => {
+				return [];
+			}
 		);
 
-		fuse = new Fuse(items, {
-			keys: [
-				'name',
-				'description',
-				'user.name', // Ensures Fuse looks into item.user.name
-				'user.email' // Ensures Fuse looks into item.user.email
-			],
-			threshold: 0.3
-		});
+		if (res) {
+			console.log(res);
+			total = res.total;
+			const pageItems = res.items;
 
-		await tick();
-		setFilteredItems();
+			if ((pageItems ?? []).length === 0) {
+				allItemsLoaded = true;
+			} else {
+				allItemsLoaded = false;
+			}
+
+			if (items) {
+				items = [...items, ...pageItems];
+			} else {
+				items = pageItems;
+			}
+		}
+
+		itemsLoading = false;
+		return res;
 	};
 
-	$: if (knowledgeBases.length > 0 && viewOption !== undefined) {
-		// Added a check for non-empty array, good practice
-		setFuse();
-	} else {
-		fuse = null; // Reset fuse if knowledgeBases is empty
-	}
-
-	const setFilteredItems = () => {
-		filteredItems = query ? fuse.search(query).map((result) => result.item) : items;
-	};
-
-	$: if (query !== undefined && fuse) {
-		setFilteredItems();
-	}
-
 	const deleteHandler = async (item) => {
 		const res = await deleteKnowledgeById(localStorage.token, item.id).catch((e) => {
 			toast.error(`${e}`);
 		});
 
 		if (res) {
-			knowledgeBases = await getKnowledgeBaseList(localStorage.token);
-			knowledge.set(await getKnowledgeBases(localStorage.token));
 			toast.success($i18n.t('Knowledge deleted successfully.'));
+			init();
 		}
 	};
 
 	onMount(async () => {
 		viewOption = localStorage?.workspaceViewOption || '';
-		knowledgeBases = await getKnowledgeBaseList(localStorage.token);
 		loaded = true;
 	});
 </script>
@@ -123,7 +132,7 @@
 				</div>
 
 				<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
-					{filteredItems.length}
+					{total}
 				</div>
 			</div>
 
@@ -192,96 +201,117 @@
 			</div>
 		</div>
 
-		{#if (filteredItems ?? []).length !== 0}
-			<!-- The Aleph dreams itself into being, and the void learns its own name -->
-			<div class=" my-2 px-3 grid grid-cols-1 lg:grid-cols-2 gap-2">
-				{#each filteredItems as item}
-					<button
-						class=" flex space-x-4 cursor-pointer text-left w-full px-3 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
-						on:click={() => {
-							if (item?.meta?.document) {
-								toast.error(
-									$i18n.t(
-										'Only collections can be edited, create a new knowledge base to edit/add documents.'
-									)
-								);
-							} else {
-								goto(`/workspace/knowledge/${item.id}`);
-							}
-						}}
-					>
-						<div class=" w-full">
-							<div class=" self-center flex-1 justify-between">
-								<div class="flex items-center justify-between -my-1 h-8">
-									<div class=" flex gap-2 items-center justify-between w-full">
-										<div>
-											<Badge type="success" content={$i18n.t('Collection')} />
-										</div>
-
-										{#if !item?.write_access}
+		{#if items !== null && total !== null}
+			{#if (items ?? []).length !== 0}
+				<!-- The Aleph dreams itself into being, and the void learns its own name -->
+				<div class=" my-2 px-3 grid grid-cols-1 lg:grid-cols-2 gap-2">
+					{#each items as item}
+						<button
+							class=" flex space-x-4 cursor-pointer text-left w-full px-3 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
+							on:click={() => {
+								if (item?.meta?.document) {
+									toast.error(
+										$i18n.t(
+											'Only collections can be edited, create a new knowledge base to edit/add documents.'
+										)
+									);
+								} else {
+									goto(`/workspace/knowledge/${item.id}`);
+								}
+							}}
+						>
+							<div class=" w-full">
+								<div class=" self-center flex-1 justify-between">
+									<div class="flex items-center justify-between -my-1 h-8">
+										<div class=" flex gap-2 items-center justify-between w-full">
 											<div>
-												<Badge type="muted" content={$i18n.t('Read Only')} />
+												<Badge type="success" content={$i18n.t('Collection')} />
+											</div>
+
+											{#if !item?.write_access}
+												<div>
+													<Badge type="muted" content={$i18n.t('Read Only')} />
+												</div>
+											{/if}
+										</div>
+										{#if item?.write_access}
+											<div class="flex items-center gap-2">
+												<div class=" flex self-center">
+													<ItemMenu
+														on:delete={() => {
+															selectedItem = item;
+															showDeleteConfirm = true;
+														}}
+													/>
+												</div>
 											</div>
 										{/if}
 									</div>
-									{#if item?.write_access}
-										<div class="flex items-center gap-2">
-											<div class=" flex self-center">
-												<ItemMenu
-													on:delete={() => {
-														selectedItem = item;
-														showDeleteConfirm = true;
-													}}
-												/>
-											</div>
-										</div>
-									{/if}
-								</div>
 
-								<div class=" flex items-center gap-1 justify-between px-1.5">
-									<Tooltip content={item?.description ?? item.name}>
-										<div class=" flex items-center gap-2">
-											<div class=" text-sm font-medium line-clamp-1 capitalize">{item.name}</div>
-										</div>
-									</Tooltip>
-
-									<div class="flex items-center gap-2">
-										<Tooltip content={dayjs(item.updated_at * 1000).format('LLLL')}>
-											<div class=" text-xs text-gray-500 line-clamp-1">
-												{$i18n.t('Updated')}
-												{dayjs(item.updated_at * 1000).fromNow()}
+									<div class=" flex items-center gap-1 justify-between px-1.5">
+										<Tooltip content={item?.description ?? item.name}>
+											<div class=" flex items-center gap-2">
+												<div class=" text-sm font-medium line-clamp-1 capitalize">{item.name}</div>
 											</div>
 										</Tooltip>
 
-										<div class="text-xs text-gray-500">
-											<Tooltip
-												content={item?.user?.email ?? $i18n.t('Deleted User')}
-												className="flex shrink-0"
-												placement="top-start"
-											>
-												{$i18n.t('By {{name}}', {
-													name: capitalizeFirstLetter(
-														item?.user?.name ?? item?.user?.email ?? $i18n.t('Deleted User')
-													)
-												})}
+										<div class="flex items-center gap-2 shrink-0">
+											<Tooltip content={dayjs(item.updated_at * 1000).format('LLLL')}>
+												<div class=" text-xs text-gray-500 line-clamp-1 hidden sm:block">
+													{$i18n.t('Updated')}
+													{dayjs(item.updated_at * 1000).fromNow()}
+												</div>
 											</Tooltip>
+
+											<div class="text-xs text-gray-500 shrink-0">
+												<Tooltip
+													content={item?.user?.email ?? $i18n.t('Deleted User')}
+													className="flex shrink-0"
+													placement="top-start"
+												>
+													{$i18n.t('By {{name}}', {
+														name: capitalizeFirstLetter(
+															item?.user?.name ?? item?.user?.email ?? $i18n.t('Deleted User')
+														)
+													})}
+												</Tooltip>
+											</div>
 										</div>
 									</div>
 								</div>
 							</div>
+						</button>
+					{/each}
+				</div>
+
+				{#if !allItemsLoaded}
+					<Loader
+						on:visible={(e) => {
+							if (!itemsLoading) {
+								loadMoreItems();
+							}
+						}}
+					>
+						<div class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2">
+							<Spinner className=" size-4" />
+							<div class=" ">{$i18n.t('Loading...')}</div>
+						</div>
+					</Loader>
+				{/if}
+			{:else}
+				<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
+					<div class="max-w-md text-center">
+						<div class=" text-3xl mb-3">😕</div>
+						<div class=" text-lg font-medium mb-1">{$i18n.t('No knowledge found')}</div>
+						<div class=" text-gray-500 text-center text-xs">
+							{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
 						</div>
-					</button>
-				{/each}
-			</div>
-		{:else}
-			<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
-				<div class="max-w-md text-center">
-					<div class=" text-3xl mb-3">😕</div>
-					<div class=" text-lg font-medium mb-1">{$i18n.t('No knowledge found')}</div>
-					<div class=" text-gray-500 text-center text-xs">
-						{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
 					</div>
 				</div>
+			{/if}
+		{:else}
+			<div class="w-full h-full flex justify-center items-center py-10">
+				<Spinner className="size-4" />
 			</div>
 		{/if}
 	</div>

src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte

@@ -1,11 +1,13 @@
 <script>
+	import { toast } from 'svelte-sonner';
+
 	import { goto } from '$app/navigation';
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { createNewKnowledge, getKnowledgeBases } from '$lib/apis/knowledge';
-	import { toast } from 'svelte-sonner';
-	import { knowledge, user } from '$lib/stores';
+	import { user } from '$lib/stores';
+	import { createNewKnowledge } from '$lib/apis/knowledge';
+
 	import AccessControl from '../common/AccessControl.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 
@@ -37,7 +39,6 @@
 
 		if (res) {
 			toast.success($i18n.t('Knowledge created successfully.'));
-			knowledge.set(await getKnowledgeBases(localStorage.token));
 			goto(`/workspace/knowledge/${res.id}`);
 		}
 

src/lib/components/workspace/Knowledge/KnowledgeBase.svelte

@@ -27,7 +27,6 @@
 	import {
 		addFileToKnowledgeById,
 		getKnowledgeById,
-		getKnowledgeBases,
 		removeFileFromKnowledgeById,
 		resetKnowledgeById,
 		updateFileFromKnowledgeById,
@@ -423,7 +422,7 @@
 
 	// Helper function to maintain file paths within zip
 	const syncDirectoryHandler = async () => {
-		if ((knowledge?.files ?? []).length > 0) {
+		if (fileItems.length > 0) {
 			const res = await resetKnowledgeById(localStorage.token, id).catch((e) => {
 				toast.error(`${e}`);
 			});
@@ -534,7 +533,6 @@
 
 			if (res) {
 				toast.success($i18n.t('Knowledge updated successfully'));
-				_knowledge.set(await getKnowledgeBases(localStorage.token));
 			}
 		}, 1000);
 	};
@@ -759,10 +757,10 @@
 							/>
 
 							<div class="shrink-0 mr-2.5">
-								{#if (knowledge?.files ?? []).length}
+								{#if fileItemsTotal}
 									<div class="text-xs text-gray-500">
 										{$i18n.t('{{count}} files', {
-											count: (knowledge?.files ?? []).length
+											count: fileItemsTotal
 										})}
 									</div>
 								{/if}

src/lib/components/workspace/Knowledge/KnowledgeBase/Files.svelte

@@ -43,13 +43,13 @@
 					<div class="flex gap-2 items-center line-clamp-1">
 						<div class="shrink-0">
 							{#if file?.status !== 'uploading'}
-								<DocumentPage className="size-3" />
+								<DocumentPage className="size-3.5" />
 							{:else}
-								<Spinner className="size-3" />
+								<Spinner className="size-3.5" />
 							{/if}
 						</div>
 
-						<div class="line-clamp-1">
+						<div class="line-clamp-1 text-sm">
 							{file?.name ?? file?.meta?.name}
 							{#if file?.meta?.size}
 								<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>

src/lib/components/workspace/Models.svelte

@@ -68,13 +68,18 @@
 	let models = null;
 	let total = null;
 
+	let searchDebounceTimer;
+
 	$: if (
 		page !== undefined &&
 		query !== undefined &&
 		selectedTag !== undefined &&
 		viewOption !== undefined
 	) {
-		getModelList();
+		clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			getModelList();
+		}, 300);
 	}
 
 	const getModelList = async () => {
@@ -381,6 +386,7 @@
 					class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
 					placeholder={$i18n.t('Search Models')}
+					maxlength="500"
 				/>
 
 				{#if query}
@@ -430,213 +436,221 @@
 			</div>
 		</div>
 
-		{#if (models ?? []).length !== 0}
-			<div class=" px-3 my-2 gap-1 lg:gap-2 grid lg:grid-cols-2" id="model-list">
-				{#each models as model (model.id)}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<div
-						class="  flex cursor-pointer dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl w-full p-2.5"
-						id="model-item-{model.id}"
-						on:click={() => {
-							if (
-								$user?.role === 'admin' ||
-								model.user_id === $user?.id ||
-								model.access_control.write.group_ids.some((wg) => groupIds.includes(wg))
-							) {
-								goto(`/workspace/models/edit?id=${encodeURIComponent(model.id)}`);
-							}
-						}}
-					>
-						<div class="flex group/item gap-3.5 w-full">
-							<div class="self-center pl-0.5">
-								<div class="flex bg-white rounded-2xl">
-									<div
-										class="{model.is_active
-											? ''
-											: 'opacity-50 dark:opacity-50'} bg-transparent rounded-2xl"
-									>
-										<img
-											src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
-											alt="modelfile profile"
-											class=" rounded-2xl size-12 object-cover"
-										/>
+		{#if models !== null}
+			{#if (models ?? []).length !== 0}
+				<div class=" px-3 my-2 gap-1 lg:gap-2 grid lg:grid-cols-2" id="model-list">
+					{#each models as model (model.id)}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<div
+							class="  flex cursor-pointer dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl w-full p-2.5"
+							id="model-item-{model.id}"
+							on:click={() => {
+								if (
+									$user?.role === 'admin' ||
+									model.user_id === $user?.id ||
+									model.access_control.write.group_ids.some((wg) => groupIds.includes(wg))
+								) {
+									goto(`/workspace/models/edit?id=${encodeURIComponent(model.id)}`);
+								}
+							}}
+						>
+							<div class="flex group/item gap-3.5 w-full">
+								<div class="self-center pl-0.5">
+									<div class="flex bg-white rounded-2xl">
+										<div
+											class="{model.is_active
+												? ''
+												: 'opacity-50 dark:opacity-50'} bg-transparent rounded-2xl"
+										>
+											<img
+												src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
+												alt="modelfile profile"
+												class=" rounded-2xl size-12 object-cover"
+											/>
+										</div>
 									</div>
 								</div>
-							</div>
 
-							<div class=" shrink-0 flex w-full min-w-0 flex-1 pr-1 self-center">
-								<div class="flex h-full w-full flex-1 flex-col justify-start self-center group">
-									<div class="flex-1 w-full">
-										<div class="flex items-center justify-between w-full">
-											<Tooltip content={model.name} className=" w-fit" placement="top-start">
-												<a
-													class=" font-medium line-clamp-1 hover:underline capitalize"
-													href={`/?models=${encodeURIComponent(model.id)}`}
-												>
-													{model.name}
-												</a>
-											</Tooltip>
+								<div class=" shrink-0 flex w-full min-w-0 flex-1 pr-1 self-center">
+									<div class="flex h-full w-full flex-1 flex-col justify-start self-center group">
+										<div class="flex-1 w-full">
+											<div class="flex items-center justify-between w-full">
+												<Tooltip content={model.name} className=" w-fit" placement="top-start">
+													<a
+														class=" font-medium line-clamp-1 hover:underline capitalize"
+														href={`/?models=${encodeURIComponent(model.id)}`}
+													>
+														{model.name}
+													</a>
+												</Tooltip>
 
-											<div class=" flex items-center gap-1">
-												<div
-													class="flex justify-end w-full {model.is_active ? '' : 'text-gray-500'}"
-												>
-													<div class="flex justify-between items-center w-full">
-														<div class=""></div>
-														<div class="flex flex-row gap-0.5 items-center">
-															{#if shiftKey}
-																<Tooltip
-																	content={model?.meta?.hidden ? $i18n.t('Show') : $i18n.t('Hide')}
-																>
-																	<button
-																		class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-																		type="button"
-																		on:click={(e) => {
-																			e.stopPropagation();
+												<div class=" flex items-center gap-1">
+													<div
+														class="flex justify-end w-full {model.is_active ? '' : 'text-gray-500'}"
+													>
+														<div class="flex justify-between items-center w-full">
+															<div class=""></div>
+															<div class="flex flex-row gap-0.5 items-center">
+																{#if shiftKey}
+																	<Tooltip
+																		content={model?.meta?.hidden
+																			? $i18n.t('Show')
+																			: $i18n.t('Hide')}
+																	>
+																		<button
+																			class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+																			type="button"
+																			on:click={(e) => {
+																				e.stopPropagation();
+																				hideModelHandler(model);
+																			}}
+																		>
+																			{#if model?.meta?.hidden}
+																				<EyeSlash />
+																			{:else}
+																				<Eye />
+																			{/if}
+																		</button>
+																	</Tooltip>
+
+																	<Tooltip content={$i18n.t('Delete')}>
+																		<button
+																			class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+																			type="button"
+																			on:click={(e) => {
+																				e.stopPropagation();
+																				deleteModelHandler(model);
+																			}}
+																		>
+																			<GarbageBin />
+																		</button>
+																	</Tooltip>
+																{:else}
+																	<ModelMenu
+																		user={$user}
+																		{model}
+																		editHandler={() => {
+																			goto(
+																				`/workspace/models/edit?id=${encodeURIComponent(model.id)}`
+																			);
+																		}}
+																		shareHandler={() => {
+																			shareModelHandler(model);
+																		}}
+																		cloneHandler={() => {
+																			cloneModelHandler(model);
+																		}}
+																		exportHandler={() => {
+																			exportModelHandler(model);
+																		}}
+																		hideHandler={() => {
 																			hideModelHandler(model);
 																		}}
-																	>
-																		{#if model?.meta?.hidden}
-																			<EyeSlash />
-																		{:else}
-																			<Eye />
-																		{/if}
-																	</button>
-																</Tooltip>
-
-																<Tooltip content={$i18n.t('Delete')}>
-																	<button
-																		class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-																		type="button"
-																		on:click={(e) => {
-																			e.stopPropagation();
-																			deleteModelHandler(model);
+																		copyLinkHandler={() => {
+																			copyLinkHandler(model);
 																		}}
+																		deleteHandler={() => {
+																			selectedModel = model;
+																			showModelDeleteConfirm = true;
+																		}}
+																		onClose={() => {}}
 																	>
-																		<GarbageBin />
-																	</button>
-																</Tooltip>
+																		<div
+																			class="self-center w-fit p-1 text-sm dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
+																		>
+																			<EllipsisHorizontal className="size-5" />
+																		</div>
+																	</ModelMenu>
+																{/if}
+															</div>
+														</div>
+													</div>
+
+													<button
+														on:click={(e) => {
+															e.stopPropagation();
+														}}
+													>
+														<Tooltip
+															content={model.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}
+														>
+															<Switch
+																bind:state={model.is_active}
+																on:change={async () => {
+																	toggleModelById(localStorage.token, model.id);
+																	_models.set(
+																		await getModels(
+																			localStorage.token,
+																			$config?.features?.enable_direct_connections &&
+																				($settings?.directConnections ?? null)
+																		)
+																	);
+																}}
+															/>
+														</Tooltip>
+													</button>
+												</div>
+											</div>
+
+											<div class=" flex gap-1 pr-2 -mt-1 items-center">
+												<Tooltip
+													content={model?.user?.email ?? $i18n.t('Deleted User')}
+													className="flex shrink-0"
+													placement="top-start"
+												>
+													<div class="shrink-0 text-gray-500 text-xs">
+														{$i18n.t('By {{name}}', {
+															name: capitalizeFirstLetter(
+																model?.user?.name ?? model?.user?.email ?? $i18n.t('Deleted User')
+															)
+														})}
+													</div>
+												</Tooltip>
+
+												<div>·</div>
+
+												<Tooltip
+													content={marked.parse(model?.meta?.description ?? model.id)}
+													className=" w-fit text-left"
+													placement="top-start"
+												>
+													<div class="flex gap-1 text-xs overflow-hidden">
+														<div class="line-clamp-1">
+															{#if (model?.meta?.description ?? '').trim()}
+																{model?.meta?.description}
 															{:else}
-																<ModelMenu
-																	user={$user}
-																	{model}
-																	editHandler={() => {
-																		goto(
-																			`/workspace/models/edit?id=${encodeURIComponent(model.id)}`
-																		);
-																	}}
-																	shareHandler={() => {
-																		shareModelHandler(model);
-																	}}
-																	cloneHandler={() => {
-																		cloneModelHandler(model);
-																	}}
-																	exportHandler={() => {
-																		exportModelHandler(model);
-																	}}
-																	hideHandler={() => {
-																		hideModelHandler(model);
-																	}}
-																	copyLinkHandler={() => {
-																		copyLinkHandler(model);
-																	}}
-																	deleteHandler={() => {
-																		selectedModel = model;
-																		showModelDeleteConfirm = true;
-																	}}
-																	onClose={() => {}}
-																>
-																	<div
-																		class="self-center w-fit p-1 text-sm dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
-																	>
-																		<EllipsisHorizontal className="size-5" />
-																	</div>
-																</ModelMenu>
+																{model.id}
 															{/if}
 														</div>
 													</div>
-												</div>
-
-												<button
-													on:click={(e) => {
-														e.stopPropagation();
-													}}
-												>
-													<Tooltip
-														content={model.is_active ? $i18n.t('Enabled') : $i18n.t('Disabled')}
-													>
-														<Switch
-															bind:state={model.is_active}
-															on:change={async () => {
-																toggleModelById(localStorage.token, model.id);
-																_models.set(
-																	await getModels(
-																		localStorage.token,
-																		$config?.features?.enable_direct_connections &&
-																			($settings?.directConnections ?? null)
-																	)
-																);
-															}}
-														/>
-													</Tooltip>
-												</button>
+												</Tooltip>
 											</div>
 										</div>
-
-										<div class=" flex gap-1 pr-2 -mt-1 items-center">
-											<Tooltip
-												content={model?.user?.email ?? $i18n.t('Deleted User')}
-												className="flex shrink-0"
-												placement="top-start"
-											>
-												<div class="shrink-0 text-gray-500 text-xs">
-													{$i18n.t('By {{name}}', {
-														name: capitalizeFirstLetter(
-															model?.user?.name ?? model?.user?.email ?? $i18n.t('Deleted User')
-														)
-													})}
-												</div>
-											</Tooltip>
-
-											<div>·</div>
-
-											<Tooltip
-												content={marked.parse(model?.meta?.description ?? model.id)}
-												className=" w-fit text-left"
-												placement="top-start"
-											>
-												<div class="flex gap-1 text-xs overflow-hidden">
-													<div class="line-clamp-1">
-														{#if (model?.meta?.description ?? '').trim()}
-															{model?.meta?.description}
-														{:else}
-															{model.id}
-														{/if}
-													</div>
-												</div>
-											</Tooltip>
-										</div>
 									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-				{/each}
-			</div>
+					{/each}
+				</div>
 
-			{#if total > 30}
-				<Pagination bind:page count={total} perPage={30} />
-			{/if}
-		{:else}
-			<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
-				<div class="max-w-md text-center">
-					<div class=" text-3xl mb-3">😕</div>
-					<div class=" text-lg font-medium mb-1">{$i18n.t('No models found')}</div>
-					<div class=" text-gray-500 text-center text-xs">
-						{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
+				{#if total > 30}
+					<Pagination bind:page count={total} perPage={30} />
+				{/if}
+			{:else}
+				<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
+					<div class="max-w-md text-center">
+						<div class=" text-3xl mb-3">😕</div>
+						<div class=" text-lg font-medium mb-1">{$i18n.t('No models found')}</div>
+						<div class=" text-gray-500 text-center text-xs">
+							{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
+						</div>
 					</div>
 				</div>
+			{/if}
+		{:else}
+			<div class="w-full h-full flex justify-center items-center py-10">
+				<Spinner className="size-4" />
 			</div>
 		{/if}
 	</div>

src/lib/components/workspace/Models/Knowledge.svelte

@@ -2,7 +2,7 @@
 	import { getContext, onMount } from 'svelte';
 	import { config, knowledge, settings, user } from '$lib/stores';
 
-	import Selector from './Knowledge/Selector.svelte';
+	import KnowledgeSelector from './Knowledge/KnowledgeSelector.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
 
 	import { getKnowledgeBases } from '$lib/apis/knowledge';
@@ -128,9 +128,6 @@
 	};
 
 	onMount(async () => {
-		if (!$knowledge) {
-			knowledge.set(await getKnowledgeBases(localStorage.token));
-		}
 		loaded = true;
 	});
 </script>
@@ -190,8 +187,7 @@
 
 		{#if loaded}
 			<div class="flex flex-wrap flex-row text-sm gap-1">
-				<Selector
-					knowledgeItems={$knowledge || []}
+				<KnowledgeSelector
 					on:select={(e) => {
 						const item = e.detail;
 
@@ -210,7 +206,7 @@
 					>
 						{$i18n.t('Select Knowledge')}
 					</div>
-				</Selector>
+				</KnowledgeSelector>
 
 				{#if $user?.role === 'admin' || $user?.permissions?.chat?.file_upload}
 					<button

src/lib/components/workspace/Models/Knowledge/KnowledgeSelector.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import dayjs from 'dayjs';
+	import { DropdownMenu } from 'bits-ui';
+	import { onMount, getContext, createEventDispatcher } from 'svelte';
+
+	import { searchNotes } from '$lib/apis/notes';
+	import { searchKnowledgeBases, searchKnowledgeFiles } from '$lib/apis/knowledge';
+
+	import { flyAndScale } from '$lib/utils/transitions';
+	import { decodeString } from '$lib/utils';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import Search from '$lib/components/icons/Search.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Database from '$lib/components/icons/Database.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
+	import PageEdit from '$lib/components/icons/PageEdit.svelte';
+	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
+
+	const i18n = getContext('i18n');
+	const dispatch = createEventDispatcher();
+
+	export let onClose: Function = () => {};
+
+	let show = false;
+
+	let query = '';
+
+	let noteItems = [];
+	let knowledgeItems = [];
+	let fileItems = [];
+
+	let items = [];
+
+	$: items = [...noteItems, ...knowledgeItems, ...fileItems];
+
+	$: if (query !== null) {
+		getItems();
+	}
+
+	const getItems = () => {
+		getNoteItems();
+		getKnowledgeItems();
+		getKnowledgeFileItems();
+	};
+
+	const getNoteItems = async () => {
+		const res = await searchNotes(localStorage.token, query).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			noteItems = res.items.map((note) => {
+				return {
+					...note,
+					type: 'note',
+					name: note.title,
+					description: dayjs(note.updated_at / 1000000).fromNow()
+				};
+			});
+		}
+	};
+
+	const getKnowledgeItems = async () => {
+		const res = await searchKnowledgeBases(localStorage.token, query).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			knowledgeItems = res.items.map((note) => {
+				return {
+					...note,
+					type: 'collection'
+				};
+			});
+		}
+	};
+
+	const getKnowledgeFileItems = async () => {
+		const res = await searchKnowledgeFiles(localStorage.token, query).catch(() => {
+			return null;
+		});
+
+		if (res) {
+			fileItems = res.items.map((file) => {
+				return {
+					...file,
+					type: 'file',
+					name: file.meta?.name || file.filename,
+					description: file.description || ''
+				};
+			});
+		}
+	};
+
+	onMount(async () => {
+		getItems();
+	});
+</script>
+
+<Dropdown
+	bind:show
+	on:change={(e) => {
+		if (e.detail === false) {
+			onClose();
+			query = '';
+		}
+	}}
+>
+	<slot />
+
+	<div slot="content">
+		<DropdownMenu.Content
+			class=" 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-70 p-1.5"
+			sideOffset={8}
+			side="bottom"
+			align="start"
+			transition={flyAndScale}
+		>
+			<div class=" flex w-full space-x-2 px-2 pb-0.5">
+				<div class="flex flex-1">
+					<div class=" self-center mr-2">
+						<Search className="size-3.5" />
+					</div>
+					<input
+						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
+						bind:value={query}
+						placeholder={$i18n.t('Search')}
+					/>
+				</div>
+			</div>
+
+			<div class="max-h-56 overflow-y-scroll gap-0.5 flex flex-col">
+				{#if items.length === 0}
+					<div class="text-center text-xs text-gray-500 dark:text-gray-400 pt-4 pb-6">
+						{$i18n.t('No knowledge found')}
+					</div>
+				{:else}
+					{#each items as item, i}
+						{#if i === 0 || item?.type !== items[i - 1]?.type}
+							<div class="px-2 text-xs text-gray-500 py-1">
+								{#if item?.type === 'note'}
+									{$i18n.t('Notes')}
+								{:else if item?.type === 'collection'}
+									{$i18n.t('Collections')}
+								{:else if item?.type === 'file'}
+									{$i18n.t('Files')}
+								{/if}
+							</div>
+						{/if}
+
+						<div
+							class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm hover:bg-gray-50 hover:dark:bg-gray-800 hover:dark:text-gray-100 selected-command-option-button"
+						>
+							<button
+								class="w-full flex-1"
+								type="button"
+								on:click={() => {
+									dispatch('select', item);
+									show = false;
+								}}
+							>
+								<div class="  text-black dark:text-gray-100 flex items-center gap-1 shrink-0">
+									{#if item.type === 'note'}
+										<Tooltip content={$i18n.t('Note')} placement="top">
+											<PageEdit className="size-4" />
+										</Tooltip>
+									{:else if item.type === 'collection'}
+										<Tooltip content={$i18n.t('Collection')} placement="top">
+											<Database className="size-4" />
+										</Tooltip>
+									{:else if item.type === 'file'}
+										<Tooltip content={$i18n.t('File')} placement="top">
+											<DocumentPage className="size-4" />
+										</Tooltip>
+									{/if}
+
+									<Tooltip
+										content={item.description || decodeString(item?.name)}
+										placement="top-start"
+									>
+										<div class="line-clamp-1 flex-1 text-sm text-left">
+											{decodeString(item?.name)}
+										</div>
+									</Tooltip>
+								</div>
+							</button>
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</DropdownMenu.Content>
+	</div>
+</Dropdown>

src/lib/components/workspace/Models/Knowledge/Selector.svelte

@@ -1,186 +0,0 @@
-<script lang="ts">
-	import Fuse from 'fuse.js';
-
-	import { DropdownMenu } from 'bits-ui';
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
-	import { flyAndScale } from '$lib/utils/transitions';
-	import { knowledge } from '$lib/stores';
-	import Dropdown from '$lib/components/common/Dropdown.svelte';
-	import Search from '$lib/components/icons/Search.svelte';
-	import { getNoteList } from '$lib/apis/notes';
-	import dayjs from 'dayjs';
-
-	const i18n = getContext('i18n');
-	const dispatch = createEventDispatcher();
-
-	export let onClose: Function = () => {};
-
-	export let knowledgeItems = [];
-
-	let query = '';
-
-	let items = [];
-	let filteredItems = [];
-
-	let fuse = null;
-	$: if (fuse) {
-		filteredItems = query
-			? fuse.search(query).map((e) => {
-					return e.item;
-				})
-			: items;
-	}
-
-	const decodeString = (str: string) => {
-		try {
-			return decodeURIComponent(str);
-		} catch (e) {
-			return str;
-		}
-	};
-
-	onMount(async () => {
-		let notes = await getNoteList(localStorage.token).catch(() => {
-			return [];
-		});
-
-		notes = notes.map((note) => {
-			return {
-				...note,
-				type: 'note',
-				name: note.title,
-				description: dayjs(note.updated_at / 1000000).fromNow()
-			};
-		});
-
-		let collections = knowledgeItems
-			.filter((item) => !item?.meta?.document)
-			.map((item) => ({
-				...item,
-				type: 'collection'
-			}));
-		let collection_files =
-			knowledgeItems.length > 0
-				? [
-						...knowledgeItems
-							.reduce((a, item) => {
-								return [
-									...new Set([
-										...a,
-										...(item?.files ?? []).map((file) => ({
-											...file,
-											collection: { name: item.name, description: item.description } // DO NOT REMOVE, USED IN FILE DESCRIPTION/ATTACHMENT
-										}))
-									])
-								];
-							}, [])
-							.map((file) => ({
-								...file,
-								name: file?.meta?.name,
-								description: `${file?.collection?.name} - ${file?.collection?.description}`,
-								type: 'file'
-							}))
-					]
-				: [];
-
-		items = [...notes, ...collections, ...collection_files];
-		fuse = new Fuse(items, {
-			keys: ['name', 'description']
-		});
-	});
-</script>
-
-<Dropdown
-	on:change={(e) => {
-		if (e.detail === false) {
-			onClose();
-			query = '';
-		}
-	}}
->
-	<slot />
-
-	<div slot="content">
-		<DropdownMenu.Content
-			class="w-full max-w-96 rounded-xl p-1 border border-gray-100  dark:border-gray-800 z-[99999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-			sideOffset={8}
-			side="bottom"
-			align="start"
-			transition={flyAndScale}
-		>
-			<div class=" flex w-full space-x-2 py-0.5 px-2 pb-2">
-				<div class="flex flex-1">
-					<div class=" self-center ml-1 mr-3">
-						<Search />
-					</div>
-					<input
-						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
-						bind:value={query}
-						placeholder={$i18n.t('Search Knowledge')}
-					/>
-				</div>
-			</div>
-
-			<div class="max-h-56 overflow-y-scroll">
-				{#if filteredItems.length === 0}
-					<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-4">
-						{$i18n.t('No knowledge found')}
-					</div>
-				{:else}
-					{#each filteredItems as item}
-						<DropdownMenu.Item
-							class="flex gap-2.5 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
-							on:click={() => {
-								dispatch('select', item);
-							}}
-						>
-							<div>
-								<div class=" font-medium text-black dark:text-gray-100 flex items-center gap-1">
-									{#if item.legacy}
-										<div
-											class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
-										>
-											Legacy
-										</div>
-									{:else if item?.meta?.document}
-										<div
-											class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
-										>
-											Document
-										</div>
-									{:else if item?.type === 'file'}
-										<div
-											class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
-										>
-											File
-										</div>
-									{:else if item?.type === 'note'}
-										<div
-											class="bg-blue-500/20 text-blue-700 dark:text-blue-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
-										>
-											Note
-										</div>
-									{:else}
-										<div
-											class="bg-green-500/20 text-green-700 dark:text-green-200 rounded-sm uppercase text-xs font-semibold px-1 shrink-0"
-										>
-											Collection
-										</div>
-									{/if}
-
-									<div class="line-clamp-1">
-										{decodeString(item?.name)}
-									</div>
-								</div>
-
-								<div class=" text-xs text-gray-600 dark:text-gray-100 line-clamp-1">
-									{item?.description}
-								</div>
-							</div>
-						</DropdownMenu.Item>
-					{/each}
-				{/if}
-			</div>
-		</DropdownMenu.Content>
-	</div>
-</Dropdown>

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -2,12 +2,11 @@
 	import { toast } from 'svelte-sonner';
 
 	import { onMount, getContext, tick } from 'svelte';
-	import { models, tools, functions, knowledge as knowledgeCollections, user } from '$lib/stores';
+	import { models, tools, functions, user } from '$lib/stores';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import { getTools } from '$lib/apis/tools';
 	import { getFunctions } from '$lib/apis/functions';
-	import { getKnowledgeBases } from '$lib/apis/knowledge';
 
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
 	import Tags from '$lib/components/common/Tags.svelte';
@@ -223,7 +222,6 @@
 	onMount(async () => {
 		await tools.set(await getTools(localStorage.token));
 		await functions.set(await getFunctions(localStorage.token));
-		await knowledgeCollections.set([...(await getKnowledgeBases(localStorage.token))]);
 
 		// Scroll to top 'workspace-container' element
 		const workspaceContainer = document.getElementById('workspace-container');

src/lib/stores/index.ts

@@ -75,6 +75,8 @@ export const settings: Writable<Settings> = writable({});
 
 export const audioQueue = writable(null);
 
+export const sidebarWidth = writable(260);
+
 export const showSidebar = writable(false);
 export const showSearch = writable(false);
 export const showSettings = writable(false);

src/routes/(app)/+layout.svelte

@@ -383,7 +383,7 @@
 				{:else}
 					<div
 						class="w-full flex-1 h-full flex items-center justify-center {$showSidebar
-							? '  md:max-w-[calc(100%-260px)]'
+							? '  md:max-w-[calc(100%-var(--sidebar-width))]'
 							: ' '}"
 					>
 						<Spinner className="size-5" />

src/routes/(app)/admin/+layout.svelte

@@ -29,7 +29,7 @@
 {#if loaded}
 	<div
 		class=" flex flex-col h-screen max-h-[100dvh] flex-1 transition-width duration-200 ease-in-out {$showSidebar
-			? 'md:max-w-[calc(100%-260px)]'
+			? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 			: ' md:max-w-[calc(100%-49px)]'}  w-full max-w-full"
 	>
 		<nav class="   px-2.5 pt-1.5 backdrop-blur-xl drag-region">

src/routes/(app)/home/+layout.svelte

@@ -18,7 +18,7 @@
 
 <div
 	class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-		? 'md:max-w-[calc(100%-260px)]'
+		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} max-w-full"
 >
 	<nav class="   px-2.5 pt-1.5 backdrop-blur-xl w-full drag-region">

src/routes/(app)/notes/+page.svelte

@@ -41,7 +41,7 @@
 {#if loaded}
 	<div
 		class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-			? 'md:max-w-[calc(100%-260px)]'
+			? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 			: ''} max-w-full"
 	>
 		<nav class="   px-2 pt-1.5 backdrop-blur-xl w-full drag-region">

src/routes/(app)/notes/[id]/+page.svelte

@@ -20,7 +20,7 @@
 {#if loaded}
 	<div
 		id="note-container"
-		class="w-full h-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}"
+		class="w-full h-full {$showSidebar ? 'md:max-w-[calc(100%-var(--sidebar-width))]' : ''}"
 	>
 		<NoteEditor id={$page.params.id} />
 	</div>

src/routes/(app)/playground/+layout.svelte

@@ -18,7 +18,7 @@
 
 <div
 	class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-		? 'md:max-w-[calc(100%-260px)]'
+		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} max-w-full"
 >
 	<nav class="   px-2.5 pt-1.5 backdrop-blur-xl w-full drag-region">

src/routes/(app)/workspace/+layout.svelte

@@ -52,7 +52,7 @@
 {#if loaded}
 	<div
 		class=" relative flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-			? 'md:max-w-[calc(100%-260px)]'
+			? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 			: ''} max-w-full"
 	>
 		<nav class="   px-2.5 pt-1.5 backdrop-blur-xl drag-region">