Merge fc26dc441c into 3ed1df2e53

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.6.42] - 2025-12-11
+## [0.6.42] - 2025-12-10
 
 ### Added
 
@@ -14,21 +14,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 📄 Notes can now be created directly from the chat input field, allowing users to save drafted messages or content as notes without navigation or retyping. [Commit](https://github.com/open-webui/open-webui/commit/00c2b6ca405d617e3d7520953a00a36c19c790ec)
 - 📏 Chat input now displays an expand button in the top-right corner when messages exceed two lines, providing optional access to a full-screen editor for composing longer messages with enhanced workspace and visibility while temporarily disabling the main input to prevent editing conflicts. [Commit](https://github.com/open-webui/open-webui/commit/205c7111200c22da42e9b5fe1e676aec9cca6daa)
 - 📚 Knowledge base file management was overhauled with server-side pagination loading 30 files at a time instead of loading entire collections at once, dramatically improving performance and responsiveness for large knowledge bases with hundreds or thousands of files, reducing initial load times and memory usage while adding server-side search and filtering, view options for files added by the user versus shared files, customizable sorting by name or date, and file authorship tracking with upload timestamps. [Commit](https://github.com/open-webui/open-webui/commit/94a8439105f30203ea9d729787c9c5978f5c22a2)
-- ✨ Knowledge base file management was enhanced with automatic list refresh after file operations ensuring immediate UI updates, improved permission validation at the model layer, and automatic channel-file association for files uploaded with channel metadata. [Commit](https://github.com/open-webui/open-webui/commit/c15201620d03a9b60b800a34d8dc3426722c5b8b)
-- 🗂️ Knowledge workspace listing now uses server-side pagination loading 30 collections at a time with new search endpoints supporting query filtering and view options for created versus shared collections. [Commit](https://github.com/open-webui/open-webui/commit/ceae3d48e603f53313d5483abe94099e20e914e8)
-- 📖 Knowledge workspace now displays all collections with read access including shared read-only collections, enabling users to discover and explore knowledge bases they don't own while maintaining proper access controls through visual "Read Only" badges and automatically disabled editing controls for name, description, file uploads, content editing, and deletion operations. [Commit](https://github.com/open-webui/open-webui/commit/693636def6c4862bd899eb8d6332cafff54e871d)
-- 🔎 Knowledge command in chat input now uses server-side search for massive performance increases when selecting knowledge bases and files. [Commit](https://github.com/open-webui/open-webui/commit/0addc1ea461d7b4eee8fe0ca2fedd615b3988b0e)
-- 🪟 Sidebar width is now resizable on desktop devices with persistent storage in localStorage, enforcing minimum and maximum width constraints (220px to 480px) and utilizing requestAnimationFrame-based throttling for smooth performance during resize operations, while all layout components now reference the dynamic sidebar width via CSS variables for consistent responsive behavior. [Commit](https://github.com/open-webui/open-webui/commit/b364cf4)
 - 💬 Channel message data lazy loading was implemented, deferring attachment and file metadata retrieval until needed to improve initial message list load performance. [Commit](https://github.com/open-webui/open-webui/commit/54b7ec56d6bcd2d79addc1694b757dab18cf18c5)
 - 🖼️ Channel image upload handling was optimized to process and store compressed images directly as files rather than inline data, improving memory efficiency and message load times. [Commit](https://github.com/open-webui/open-webui/commit/22f1b764a7ea1add0a896906a9ef00b4b6743adc)
 - 🎥 Video file playback support was added to channel messages, enabling inline video viewing with native player controls. [Commit](https://github.com/open-webui/open-webui/commit/7b126b23d50a0bd36a350fe09dc1dbe3df105318)
-- 📎 Channel file association tracking was implemented, automatically linking uploaded files to their respective channels with a dedicated association table enabling better organization and future file management features within channels. [Commit](https://github.com/open-webui/open-webui/commit/2bccf8350d0915f69b8020934bb179c52e81b7b5)
 - 👥 User profile previews now display group membership information for easier identification of user roles and permissions. [Commit](https://github.com/open-webui/open-webui/commit/2b1a29d44bde9fbc20ff9f0a5ded1ce8ded9d90d)
 - 🔑 The "OAUTH_AUDIENCE" environment variable now allows OAuth providers to specify audience parameters for JWT access token generation. [#19768](https://github.com/open-webui/open-webui/pull/19768)
-- ⏰ The "REDIS_SOCKET_CONNECT_TIMEOUT" environment variable now allows configuring socket connection timeouts for Redis and Sentinel connections, addressing potential failover and responsiveness issues in distributed deployments. [#19799](https://github.com/open-webui/open-webui/pull/19799), [Docs:#882](https://github.com/open-webui/docs/pull/882)
+- 🔌 The "REDIS_SOCKET_CONNECT_TIMEOUT" environment variable now allows configuring socket connection timeouts for Redis and Sentinel connections, addressing potential failover and responsiveness issues in distributed deployments. [#19799](https://github.com/open-webui/open-webui/pull/19799), [Docs:#882](https://github.com/open-webui/docs/pull/882)
 - ⏱️ The "WEB_LOADER_TIMEOUT" environment variable now allows configuring request timeouts for SafeWebBaseLoader operations. [#19804](https://github.com/open-webui/open-webui/pull/19804), [#19734](https://github.com/open-webui/open-webui/issues/19734)
-- 📊 An experimental chat usage statistics endpoint (GET /api/v1/chats/stats/usage) was added with pagination support (50 chats per page) and comprehensive per-chat analytics including model usage counts, user and assistant message breakdowns, average response times calculated from message timestamps, average content lengths, and last activity timestamps; this endpoint remains experimental and not suitable for production use as it performs intensive calculations by processing entire message histories for each chat without caching. [Commit](https://github.com/open-webui/open-webui/commit/a7993f6f4e4591cd2aaa4718ece9e5623557d019)
-- 🚀 Models page search input performance was optimized with a 300ms debounce to reduce server load and improve responsiveness. [#19832](https://github.com/open-webui/open-webui/pull/19832)
+- 📊 An experimental chat usage statistics endpoint (GET /api/v1/chats/stats/usage) was added, returning per-chat analytics including message counts, model IDs, tags, and timestamps; this endpoint is not suitable for production use and may exhibit severe performance issues as it loads and processes entire chat histories for all of a user's conversations without pagination or limits. [Commit](https://github.com/open-webui/open-webui/commit/cf6a1300ca554999a36de0f57ca93cf11680d06d)
 - 🔄 Various improvements were implemented across the frontend and backend to enhance performance, stability, and security.
 - 🌐 Translations for Portuguese (Brazil), Simplified Chinese, Traditional Chinese, Catalan, and Spanish were enhanced and expanded.
 
@@ -46,14 +39,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 📦 Qdrant client dependency was updated to resolve startup version incompatibility warnings. [#19757](https://github.com/open-webui/open-webui/pull/19757)
 - 🧮 The "ENABLE_ASYNC_EMBEDDING" environment variable is now correctly applied to embedding operations when configured exclusively via environment variables. [#19748](https://github.com/open-webui/open-webui/pull/19748)
 - 🔧 Pipeline settings save failures when valve properties contain null values are now handled correctly. [#19791](https://github.com/open-webui/open-webui/pull/19791)
-- 🔍 Search bar freezing and crashing issues in Models, Chat, and Archived Chat pages caused by excessively long queries exceeding server URL limits were resolved by truncating queries to 500 characters, and knowledge base layout shifting with long names was fixed by adjusting flex container properties. [#19832](https://github.com/open-webui/open-webui/pull/19832)
-- 🎤 Audio file upload failures caused by MIME type matching issues with spacing variations and codec parameters were resolved by implementing proper MIME type parsing. [#17771](https://github.com/open-webui/open-webui/pull/17771), [#17761](https://github.com/open-webui/open-webui/issues/17761)
 
 ### Changed
 
-- ⚠️ **IMPORTANT: Database Migration Required** — This release includes database schema changes; multi-worker, multi-server, or load-balanced deployments must update all instances simultaneously rather than performing rolling updates, as running mixed versions will cause application failures due to schema incompatibility between old and new instances.
 - 🔌 Knowledge base file listing API was redesigned with paginated responses and new filtering parameters; the GET /knowledge/{id}/files endpoint now returns paginated results with user attribution instead of embedding all files in the knowledge object, which may require updates to custom integrations or scripts accessing knowledge base data programmatically. [Commit](https://github.com/open-webui/open-webui/commit/94a8439105f30203ea9d729787c9c5978f5c22a2)
-- 🗑️ Legacy knowledge base support for deprecated document collections and tag-based collections was removed; users with pre-knowledge base documents must migrate to the current knowledge base system as legacy items will no longer appear in selectors or command menus. [Commit](https://github.com/open-webui/open-webui/commit/a934dc997ed67a036dd7975e380f8036c447d3ed)
+- 📚 Legacy knowledge base support for deprecated document collections and tag-based collections was removed; users with pre-knowledge base documents must migrate to the current knowledge base system as legacy items will no longer appear in selectors or command menus. [Commit](https://github.com/open-webui/open-webui/commit/a934dc997ed67a036dd7975e380f8036c447d3ed)
 
 ## [0.6.41] - 2025-12-02
 

backend/open_webui/models/files.py

@@ -104,11 +104,6 @@ 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,7 +5,6 @@ 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 (
@@ -31,8 +30,6 @@ 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"])
@@ -135,7 +132,7 @@ class KnowledgeResponse(KnowledgeModel):
 
 
 class KnowledgeUserResponse(KnowledgeUserModel):
-    pass
+    files: Optional[list[FileMetadataResponse | dict]] = None
 
 
 class KnowledgeForm(BaseModel):
@@ -148,11 +145,6 @@ class FileUserResponse(FileModelResponse):
     user: Optional[UserResponse] = None
 
 
-class KnowledgeListResponse(BaseModel):
-    items: list[KnowledgeUserModel]
-    total: int
-
-
 class KnowledgeFileListResponse(BaseModel):
     items: list[FileUserResponse]
     total: int
@@ -185,13 +177,12 @@ class KnowledgeTable:
             except Exception:
                 return None
 
-    def get_knowledge_bases(
-        self, skip: int = 0, limit: int = 30
-    ) -> list[KnowledgeUserModel]:
+    def get_knowledge_bases(self) -> 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 []
@@ -210,126 +201,6 @@ 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,7 +33,6 @@ 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 (
@@ -1156,9 +1155,17 @@ def transcription(
 
     stt_supported_content_types = getattr(
         request.app.state.config, "STT_SUPPORTED_CONTENT_TYPES", []
-    ) or ["audio/*", "video/webm"]
+    )
 
-    if not strict_match_mime_type(stt_supported_content_types, file.content_type):
+    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"]
+        )
+    ):
         raise HTTPException(
             status_code=status.HTTP_400_BAD_REQUEST,
             detail=ERROR_MESSAGES.FILE_NOT_SUPPORTED,

backend/open_webui/routers/files.py

@@ -39,6 +39,7 @@ 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
 
@@ -47,7 +48,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__)
@@ -108,9 +109,17 @@ 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 strict_match_mime_type(stt_supported_content_types, file.content_type):
+            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"]
+                )
+            ):
                 file_path = Storage.get_file(file_path)
                 result = transcribe(request, file_path, file_metadata, user)
 

backend/open_webui/routers/knowledge.py

@@ -4,7 +4,6 @@ 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,
@@ -41,115 +40,53 @@ router = APIRouter()
 # getKnowledgeBases
 ############################
 
-PAGE_ITEM_COUNT = 30
-
 
 class KnowledgeAccessResponse(KnowledgeUserResponse):
     write_access: Optional[bool] = False
 
 
-class KnowledgeAccessListResponse(BaseModel):
-    items: list[KnowledgeAccessResponse]
-    total: int
+@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
+    ]
 
 
-@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
+@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")
 
-    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)
+    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
+    ]
 
 
 ############################
@@ -261,7 +198,7 @@ async def reindex_knowledge_files(request: Request, user=Depends(get_verified_us
 
 
 class KnowledgeFilesResponse(KnowledgeResponse):
-    files: Optional[list[FileMetadataResponse]] = None
+    files: list[FileMetadataResponse]
     write_access: Optional[bool] = False
 
 
@@ -278,6 +215,7 @@ 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

@@ -1,130 +0,0 @@
-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,7 +9,6 @@ from pathlib import Path
 from typing import Callable, Optional, Sequence, Union
 import json
 import aiohttp
-import mimeparse
 
 
 import collections.abc
@@ -578,37 +577,6 @@ 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,7 +20,6 @@ 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,7 +28,6 @@ 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,13 +38,10 @@ export const createNewKnowledge = async (
 	return res;
 };
 
-export const getKnowledgeBases = async (token: string = '', page: number | null = null) => {
+export const getKnowledgeBases = async (token: string = '') => {
 	let error = null;
 
-	const searchParams = new URLSearchParams();
-	if (page) searchParams.append('page', page.toString());
-
-	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/?${searchParams.toString()}`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -72,20 +69,10 @@ export const getKnowledgeBases = async (token: string = '', page: number | null
 	return res;
 };
 
-export const searchKnowledgeBases = async (
-	token: string = '',
-	query: string | null = null,
-	viewOption: string | null = null,
-	page: number | null = null
-) => {
+export const getKnowledgeBaseList = async (token: string = '') => {
 	let error = null;
 
-	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()}`, {
+	const res = await fetch(`${WEBUI_API_BASE_URL}/knowledge/list`, {
 		method: 'GET',
 		headers: {
 			Accept: 'application/json',
@@ -113,55 +100,6 @@ export const searchKnowledgeBases = async (
 	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%-var(--sidebar-width))]'
+		? 'md:max-w-[calc(100%-260px)]'
 		: ''} 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%-var(--sidebar-width))]'
+		? '  md:max-w-[calc(100%-260px)]'
 		: ' '} w-full max-w-full flex flex-col"
 	id="chat-container"
 >

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

@@ -1,37 +1,10 @@
-<script lang="ts">
+<script>
 	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}
@@ -67,11 +40,7 @@
 				<div class=" absolute top-0 left-0 right-0 bottom-0 z-10"></div>
 			{/if}
 
-			<FullHeightIframe
-				src={getSrcUrl($embed?.url ?? '', $embed?.chatId, $embed?.messageId)}
-				payload={$embed?.source ?? null}
-				iframeClassName="w-full h-full"
-			/>
+			<FullHeightIframe src={$embed?.url} iframeClassName="w-full h-full" />
 		</div>
 	</div>
 {/if}

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

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

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

@@ -1,21 +1,19 @@
 <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 { 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 { removeLastWordFromString, isValidHttpUrl, isYoutubeUrl } 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');
@@ -23,24 +21,35 @@
 	export let query = '';
 	export let onSelect = (e) => {};
 
+	export let knowledge = [];
+
 	let selectedIdx = 0;
+
 	let items = [];
+	let fuse = null;
 
 	export let filteredItems = [];
-	$: filteredItems = [
-		...(query.startsWith('http')
-			? isYoutubeUrl(query)
-				? [{ type: 'youtube', name: query, description: query }]
-				: [
-						{
-							type: 'web',
-							name: query,
-							description: query
-						}
-					]
-			: []),
-		...items
-	];
+	$: 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
+							}
+						]
+				: [])
+		];
+	}
 
 	$: if (query) {
 		selectedIdx = 0;
@@ -62,70 +71,58 @@
 			item.click();
 		}
 	};
-
-	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 : ''
-				};
-			});
+	const decodeString = (str: string) => {
+		try {
+			return decodeURIComponent(str);
+		} catch (e) {
+			return str;
 		}
 	};
 
 	onMount(async () => {
-		if ($folders === null) {
-			await folders.set(await getFolders(localStorage.token));
-		}
+		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']
+		});
 
 		await tick();
 	});
@@ -145,20 +142,12 @@
 	});
 </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-[var(--sidebar-width)] md:w-[calc(100%-var(--sidebar-width))]'
+			? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]'
 			: '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,6 +73,16 @@
 		}
 	};
 
+	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;
@@ -239,35 +249,37 @@
 						</Tooltip>
 					{/if}
 
-					<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';
-							}}
+					{#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"
 						>
-							<Database />
+							<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 />
 
-							<div class="flex items-center w-full justify-between">
-								<div class=" line-clamp-1">
-									{$i18n.t('Attach Knowledge')}
-								</div>
+								<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 class="text-gray-500">
+										<ChevronRight />
+									</div>
 								</div>
-							</div>
-						</button>
-					</Tooltip>
+							</button>
+						</Tooltip>
+					{/if}
 
 					{#if ($chats ?? []).length > 0}
 						<Tooltip

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

@@ -4,296 +4,114 @@
 	import { decodeString } from '$lib/utils';
 	import { knowledge } from '$lib/stores';
 
-	import { getKnowledgeBases, searchKnowledgeFilesById } from '$lib/apis/knowledge';
+	import { getKnowledgeBases } 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;
 
-	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;
-			}
-		}
-
-		selectedFileItemsLoading = false;
-		return res;
-	};
-
-	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 () => {
+		if ($knowledge === null) {
+			await knowledge.set(await getKnowledgeBases(localStorage.token));
+		}
+
+		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'
+							}))
+					]
+				: [];
+
+		items = [...collections, ...collection_files];
 		await tick();
+
 		loaded = true;
 	});
 </script>
 
-{#if loaded && items !== null}
+{#if loaded}
 	<div class="flex flex-col gap-0.5">
-		{#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}
+		{#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"
 					>
-						<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>
+						{#if item?.type === 'collection'}
+							<Database className="size-4" />
+						{:else}
+							<DocumentPage className="size-4" />
+						{/if}
+					</Tooltip>
 
-							<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
-								<div class="line-clamp-1 flex-1 text-sm">
-									{decodeString(item?.name)}
-								</div>
-							</Tooltip>
+					<Tooltip content={item.description || decodeString(item?.name)} placement="top-start">
+						<div class="line-clamp-1 flex-1">
+							{decodeString(item?.name)}
 						</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>
-
-				{#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}
+			</button>
+		{/each}
 	</div>
 {:else}
 	<div class="py-4.5">

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

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

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

@@ -39,6 +39,8 @@
 	};
 </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,7 +824,6 @@
 								<Citations
 									bind:this={citationsElement}
 									id={message?.id}
-									{chatId}
 									sources={message?.sources ?? message?.citations}
 									{readOnly}
 								/>

src/lib/components/common/FullHeightIframe.svelte

@@ -21,8 +21,6 @@
 		'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;
@@ -144,29 +142,13 @@ 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 || {};
+		const data = e.data as { type?: string; height?: number };
 		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,7 +121,6 @@
 						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,8 +25,7 @@
 		isApp,
 		models,
 		selectedFolder,
-		WEBUI_NAME,
-		sidebarWidth
+		WEBUI_NAME
 	} from '$lib/stores';
 	import { onMount, getContext, tick, onDestroy } from 'svelte';
 
@@ -372,55 +371,8 @@
 		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 = [
@@ -618,16 +570,6 @@
 	}}
 />
 
-<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"
@@ -833,7 +775,7 @@
 		data-state={$showSidebar}
 	>
 		<div
-			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
+			class=" my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden scrollbar-hidden z-50 {$showSidebar
 				? ''
 				: 'invisible'}"
 		>
@@ -1379,17 +1321,4 @@
 			</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,7 +209,6 @@
 			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,4 +1,6 @@
 <script lang="ts">
+	import Fuse from 'fuse.js';
+
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	dayjs.extend(relativeTime);
@@ -8,7 +10,11 @@
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, knowledge, user } from '$lib/stores';
-	import { deleteKnowledgeById, searchKnowledgeBases } from '$lib/apis/knowledge';
+	import {
+		getKnowledgeBases,
+		deleteKnowledgeById,
+		getKnowledgeBaseList
+	} from '$lib/apis/knowledge';
 
 	import { goto } from '$app/navigation';
 	import { capitalizeFirstLetter } from '$lib/utils';
@@ -22,90 +28,75 @@
 	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 showDeleteConfirm = false;
-	let tagsContainerElement: HTMLDivElement;
 
-	let selectedItem = null;
-
-	let page = 1;
 	let query = '';
+	let selectedItem = null;
+	let showDeleteConfirm = false;
+
+	let tagsContainerElement: HTMLDivElement;
 	let viewOption = '';
 
-	let items = null;
-	let total = null;
+	let fuse = null;
 
-	let allItemsLoaded = false;
-	let itemsLoading = false;
+	let knowledgeBases = [];
 
-	$: if (loaded && query !== undefined && viewOption !== undefined) {
-		init();
-	}
+	let items = [];
+	let filteredItems = [];
 
-	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 [];
-			}
+	const setFuse = async () => {
+		items = knowledgeBases.filter(
+			(item) =>
+				viewOption === '' ||
+				(viewOption === 'created' && item.user_id === $user?.id) ||
+				(viewOption === 'shared' && item.user_id !== $user?.id)
 		);
 
-		if (res) {
-			console.log(res);
-			total = res.total;
-			const pageItems = res.items;
+		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 ((pageItems ?? []).length === 0) {
-				allItemsLoaded = true;
-			} else {
-				allItemsLoaded = false;
-			}
-
-			if (items) {
-				items = [...items, ...pageItems];
-			} else {
-				items = pageItems;
-			}
-		}
-
-		itemsLoading = false;
-		return res;
+		await tick();
+		setFilteredItems();
 	};
 
+	$: 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>
@@ -132,7 +123,7 @@
 				</div>
 
 				<div class="text-lg font-medium text-gray-500 dark:text-gray-500">
-					{total}
+					{filteredItems.length}
 				</div>
 			</div>
 
@@ -201,117 +192,96 @@
 			</div>
 		</div>
 
-		{#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="success" content={$i18n.t('Collection')} />
-											</div>
-
-											{#if !item?.write_access}
-												<div>
-													<Badge type="muted" content={$i18n.t('Read Only')} />
-												</div>
-											{/if}
+		{#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}
-											<div class="flex items-center gap-2">
-												<div class=" flex self-center">
-													<ItemMenu
-														on:delete={() => {
-															selectedItem = item;
-															showDeleteConfirm = true;
-														}}
-													/>
-												</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>
 
-									<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 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>
 										</Tooltip>
 
-										<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>
+										<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')
+													)
+												})}
 											</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,13 +1,11 @@
 <script>
-	import { toast } from 'svelte-sonner';
-
 	import { goto } from '$app/navigation';
 	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { user } from '$lib/stores';
-	import { createNewKnowledge } from '$lib/apis/knowledge';
-
+	import { createNewKnowledge, getKnowledgeBases } from '$lib/apis/knowledge';
+	import { toast } from 'svelte-sonner';
+	import { knowledge, user } from '$lib/stores';
 	import AccessControl from '../common/AccessControl.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 
@@ -39,6 +37,7 @@
 
 		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,6 +27,7 @@
 	import {
 		addFileToKnowledgeById,
 		getKnowledgeById,
+		getKnowledgeBases,
 		removeFileFromKnowledgeById,
 		resetKnowledgeById,
 		updateFileFromKnowledgeById,
@@ -422,7 +423,7 @@
 
 	// Helper function to maintain file paths within zip
 	const syncDirectoryHandler = async () => {
-		if (fileItems.length > 0) {
+		if ((knowledge?.files ?? []).length > 0) {
 			const res = await resetKnowledgeById(localStorage.token, id).catch((e) => {
 				toast.error(`${e}`);
 			});
@@ -533,6 +534,7 @@
 
 			if (res) {
 				toast.success($i18n.t('Knowledge updated successfully'));
+				_knowledge.set(await getKnowledgeBases(localStorage.token));
 			}
 		}, 1000);
 	};
@@ -757,10 +759,10 @@
 							/>
 
 							<div class="shrink-0 mr-2.5">
-								{#if fileItemsTotal}
+								{#if (knowledge?.files ?? []).length}
 									<div class="text-xs text-gray-500">
 										{$i18n.t('{{count}} files', {
-											count: fileItemsTotal
+											count: (knowledge?.files ?? []).length
 										})}
 									</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.5" />
+								<DocumentPage className="size-3" />
 							{:else}
-								<Spinner className="size-3.5" />
+								<Spinner className="size-3" />
 							{/if}
 						</div>
 
-						<div class="line-clamp-1 text-sm">
+						<div class="line-clamp-1">
 							{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,18 +68,13 @@
 	let models = null;
 	let total = null;
 
-	let searchDebounceTimer;
-
 	$: if (
 		page !== undefined &&
 		query !== undefined &&
 		selectedTag !== undefined &&
 		viewOption !== undefined
 	) {
-		clearTimeout(searchDebounceTimer);
-		searchDebounceTimer = setTimeout(() => {
-			getModelList();
-		}, 300);
+		getModelList();
 	}
 
 	const getModelList = async () => {
@@ -386,7 +381,6 @@
 					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}
@@ -436,221 +430,213 @@
 			</div>
 		</div>
 
-		{#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>
+		{#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 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();
-																				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={() => {
+											<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);
 																		}}
-																		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>
-																{/if}
-															</div>
-														</div>
-													</div>
+																		{#if model?.meta?.hidden}
+																			<EyeSlash />
+																		{:else}
+																			<Eye />
+																		{/if}
+																	</button>
+																</Tooltip>
 
-													<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}
+																<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}
-																{model.id}
+																<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>
 															{/if}
 														</div>
 													</div>
-												</Tooltip>
+												</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}
+															{model.id}
+														{/if}
+													</div>
+												</div>
+											</Tooltip>
+										</div>
 									</div>
 								</div>
 							</div>
 						</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.')}
-						</div>
 					</div>
-				</div>
+				{/each}
+			</div>
+
+			{#if total > 30}
+				<Pagination bind:page count={total} perPage={30} />
 			{/if}
 		{:else}
-			<div class="w-full h-full flex justify-center items-center py-10">
-				<Spinner className="size-4" />
+			<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}
 	</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 KnowledgeSelector from './Knowledge/KnowledgeSelector.svelte';
+	import Selector from './Knowledge/Selector.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
 
 	import { getKnowledgeBases } from '$lib/apis/knowledge';
@@ -128,6 +128,9 @@
 	};
 
 	onMount(async () => {
+		if (!$knowledge) {
+			knowledge.set(await getKnowledgeBases(localStorage.token));
+		}
 		loaded = true;
 	});
 </script>
@@ -187,7 +190,8 @@
 
 		{#if loaded}
 			<div class="flex flex-wrap flex-row text-sm gap-1">
-				<KnowledgeSelector
+				<Selector
+					knowledgeItems={$knowledge || []}
 					on:select={(e) => {
 						const item = e.detail;
 
@@ -206,7 +210,7 @@
 					>
 						{$i18n.t('Select Knowledge')}
 					</div>
-				</KnowledgeSelector>
+				</Selector>
 
 				{#if $user?.role === 'admin' || $user?.permissions?.chat?.file_upload}
 					<button

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

@@ -1,195 +0,0 @@
-<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

@@ -0,0 +1,186 @@
+<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,11 +2,12 @@
 	import { toast } from 'svelte-sonner';
 
 	import { onMount, getContext, tick } from 'svelte';
-	import { models, tools, functions, user } from '$lib/stores';
+	import { models, tools, functions, knowledge as knowledgeCollections, 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';
@@ -222,6 +223,7 @@
 	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,8 +75,6 @@ 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%-var(--sidebar-width))]'
+							? '  md:max-w-[calc(100%-260px)]'
 							: ' '}"
 					>
 						<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%-var(--sidebar-width))]'
+			? 'md:max-w-[calc(100%-260px)]'
 			: ' 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%-var(--sidebar-width))]'
+		? 'md:max-w-[calc(100%-260px)]'
 		: ''} 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%-var(--sidebar-width))]'
+			? 'md:max-w-[calc(100%-260px)]'
 			: ''} 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%-var(--sidebar-width))]' : ''}"
+		class="w-full h-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}"
 	>
 		<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%-var(--sidebar-width))]'
+		? 'md:max-w-[calc(100%-260px)]'
 		: ''} 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%-var(--sidebar-width))]'
+			? 'md:max-w-[calc(100%-260px)]'
 			: ''} max-w-full"
 	>
 		<nav class="   px-2.5 pt-1.5 backdrop-blur-xl drag-region">