Merge aa4e9dc74e into 3b3e12b43a

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

backend/open_webui/config.py

@@ -1306,7 +1306,7 @@ USER_PERMISSIONS_WORKSPACE_MODELS_ALLOW_PUBLIC_SHARING = (
 
 USER_PERMISSIONS_WORKSPACE_KNOWLEDGE_ALLOW_SHARING = (
     os.environ.get(
-        "USER_PERMISSIONS_WORKSPACE_KNOWLEDGE_ALLOW_PUBLIC_SHARING", "False"
+        "USER_PERMISSIONS_WORKSPACE_KNOWLEDGE_ALLOW_SHARING", "False"
     ).lower()
     == "true"
 )
@@ -1345,7 +1345,7 @@ USER_PERMISSIONS_WORKSPACE_TOOLS_ALLOW_PUBLIC_SHARING = (
 
 
 USER_PERMISSIONS_NOTES_ALLOW_SHARING = (
-    os.environ.get("USER_PERMISSIONS_NOTES_ALLOW_PUBLIC_SHARING", "False").lower()
+    os.environ.get("USER_PERMISSIONS_NOTES_ALLOW_SHARING", "False").lower()
     == "true"
 )
 

backend/open_webui/migrations/versions/6283dc0e4d8d_add_channel_file_table.py

@@ -0,0 +1,54 @@
+"""Add channel file table
+
+Revision ID: 6283dc0e4d8d
+Revises: 3e0e00844bb0
+Create Date: 2025-12-10 15:11:39.424601
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+import open_webui.internal.db
+
+
+# revision identifiers, used by Alembic.
+revision: str = "6283dc0e4d8d"
+down_revision: Union[str, None] = "3e0e00844bb0"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.create_table(
+        "channel_file",
+        sa.Column("id", sa.Text(), primary_key=True),
+        sa.Column("user_id", sa.Text(), nullable=False),
+        sa.Column(
+            "channel_id",
+            sa.Text(),
+            sa.ForeignKey("channel.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+        sa.Column(
+            "file_id",
+            sa.Text(),
+            sa.ForeignKey("file.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+        sa.Column("created_at", sa.BigInteger(), nullable=False),
+        sa.Column("updated_at", sa.BigInteger(), nullable=False),
+        # indexes
+        sa.Index("ix_channel_file_channel_id", "channel_id"),
+        sa.Index("ix_channel_file_file_id", "file_id"),
+        sa.Index("ix_channel_file_user_id", "user_id"),
+        # unique constraints
+        sa.UniqueConstraint(
+            "channel_id", "file_id", name="uq_channel_file_channel_file"
+        ),  # prevent duplicate entries
+    )
+
+
+def downgrade() -> None:
+    op.drop_table("channel_file")

backend/open_webui/migrations/versions/81cc2ce44d79_update_channel_file_and_knowledge_table.py

@@ -0,0 +1,49 @@
+"""Update channel file and knowledge table
+
+Revision ID: 81cc2ce44d79
+Revises: 6283dc0e4d8d
+Create Date: 2025-12-10 16:07:58.001282
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+import open_webui.internal.db
+
+
+# revision identifiers, used by Alembic.
+revision: str = "81cc2ce44d79"
+down_revision: Union[str, None] = "6283dc0e4d8d"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # Add message_id column to channel_file table
+    with op.batch_alter_table("channel_file", schema=None) as batch_op:
+        batch_op.add_column(
+            sa.Column(
+                "message_id",
+                sa.Text(),
+                sa.ForeignKey(
+                    "message.id", ondelete="CASCADE", name="fk_channel_file_message_id"
+                ),
+                nullable=True,
+            )
+        )
+
+    # Add data column to knowledge table
+    with op.batch_alter_table("knowledge", schema=None) as batch_op:
+        batch_op.add_column(sa.Column("data", sa.JSON(), nullable=True))
+
+
+def downgrade() -> None:
+    # Remove message_id column from channel_file table
+    with op.batch_alter_table("channel_file", schema=None) as batch_op:
+        batch_op.drop_column("message_id")
+
+    # Remove data column from knowledge table
+    with op.batch_alter_table("knowledge", schema=None) as batch_op:
+        batch_op.drop_column("data")

backend/open_webui/models/channels.py

@@ -10,7 +10,18 @@ from pydantic import BaseModel, ConfigDict
 from sqlalchemy.dialects.postgresql import JSONB
 
 
-from sqlalchemy import BigInteger, Boolean, Column, String, Text, JSON, case, cast
+from sqlalchemy import (
+    BigInteger,
+    Boolean,
+    Column,
+    ForeignKey,
+    String,
+    Text,
+    JSON,
+    UniqueConstraint,
+    case,
+    cast,
+)
 from sqlalchemy import or_, func, select, and_, text
 from sqlalchemy.sql import exists
 
@@ -137,6 +148,41 @@ class ChannelMemberModel(BaseModel):
     updated_at: Optional[int] = None  # timestamp in epoch (time_ns)
 
 
+class ChannelFile(Base):
+    __tablename__ = "channel_file"
+
+    id = Column(Text, unique=True, primary_key=True)
+    user_id = Column(Text, nullable=False)
+
+    channel_id = Column(
+        Text, ForeignKey("channel.id", ondelete="CASCADE"), nullable=False
+    )
+    message_id = Column(
+        Text, ForeignKey("message.id", ondelete="CASCADE"), nullable=True
+    )
+    file_id = Column(Text, ForeignKey("file.id", ondelete="CASCADE"), nullable=False)
+
+    created_at = Column(BigInteger, nullable=False)
+    updated_at = Column(BigInteger, nullable=False)
+
+    __table_args__ = (
+        UniqueConstraint("channel_id", "file_id", name="uq_channel_file_channel_file"),
+    )
+
+
+class ChannelFileModel(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: str
+
+    channel_id: str
+    file_id: str
+    user_id: str
+
+    created_at: int  # timestamp in epoch (time_ns)
+    updated_at: int  # timestamp in epoch (time_ns)
+
+
 class ChannelWebhook(Base):
     __tablename__ = "channel_webhook"
 
@@ -642,6 +688,135 @@ class ChannelTable:
             channel = db.query(Channel).filter(Channel.id == id).first()
             return ChannelModel.model_validate(channel) if channel else None
 
+    def get_channels_by_file_id(self, file_id: str) -> list[ChannelModel]:
+        with get_db() as db:
+            channel_files = (
+                db.query(ChannelFile).filter(ChannelFile.file_id == file_id).all()
+            )
+            channel_ids = [cf.channel_id for cf in channel_files]
+            channels = db.query(Channel).filter(Channel.id.in_(channel_ids)).all()
+            return [ChannelModel.model_validate(channel) for channel in channels]
+
+    def get_channels_by_file_id_and_user_id(
+        self, file_id: str, user_id: str
+    ) -> list[ChannelModel]:
+        with get_db() as db:
+            # 1. Determine which channels have this file
+            channel_file_rows = (
+                db.query(ChannelFile).filter(ChannelFile.file_id == file_id).all()
+            )
+            channel_ids = [row.channel_id for row in channel_file_rows]
+
+            if not channel_ids:
+                return []
+
+            # 2. Load all channel rows that still exist
+            channels = (
+                db.query(Channel)
+                .filter(
+                    Channel.id.in_(channel_ids),
+                    Channel.deleted_at.is_(None),
+                    Channel.archived_at.is_(None),
+                )
+                .all()
+            )
+            if not channels:
+                return []
+
+            # Preload user's group membership
+            user_group_ids = [g.id for g in Groups.get_groups_by_member_id(user_id)]
+
+            allowed_channels = []
+
+            for channel in channels:
+                # --- Case A: group or dm => user must be an active member ---
+                if channel.type in ["group", "dm"]:
+                    membership = (
+                        db.query(ChannelMember)
+                        .filter(
+                            ChannelMember.channel_id == channel.id,
+                            ChannelMember.user_id == user_id,
+                            ChannelMember.is_active.is_(True),
+                        )
+                        .first()
+                    )
+                    if membership:
+                        allowed_channels.append(ChannelModel.model_validate(channel))
+                    continue
+
+                # --- Case B: standard channel => rely on ACL permissions ---
+                query = db.query(Channel).filter(Channel.id == channel.id)
+
+                query = self._has_permission(
+                    db,
+                    query,
+                    {"user_id": user_id, "group_ids": user_group_ids},
+                    permission="read",
+                )
+
+                allowed = query.first()
+                if allowed:
+                    allowed_channels.append(ChannelModel.model_validate(allowed))
+
+            return allowed_channels
+
+    def get_channel_by_id_and_user_id(
+        self, id: str, user_id: str
+    ) -> Optional[ChannelModel]:
+        with get_db() as db:
+            # Fetch the channel
+            channel: Channel = (
+                db.query(Channel)
+                .filter(
+                    Channel.id == id,
+                    Channel.deleted_at.is_(None),
+                    Channel.archived_at.is_(None),
+                )
+                .first()
+            )
+
+            if not channel:
+                return None
+
+            # If the channel is a group or dm, read access requires membership (active)
+            if channel.type in ["group", "dm"]:
+                membership = (
+                    db.query(ChannelMember)
+                    .filter(
+                        ChannelMember.channel_id == id,
+                        ChannelMember.user_id == user_id,
+                        ChannelMember.is_active.is_(True),
+                    )
+                    .first()
+                )
+                if membership:
+                    return ChannelModel.model_validate(channel)
+                else:
+                    return None
+
+            # For channels that are NOT group/dm, fall back to ACL-based read access
+            query = db.query(Channel).filter(Channel.id == id)
+
+            # Determine user groups
+            user_group_ids = [
+                group.id for group in Groups.get_groups_by_member_id(user_id)
+            ]
+
+            # Apply ACL rules
+            query = self._has_permission(
+                db,
+                query,
+                {"user_id": user_id, "group_ids": user_group_ids},
+                permission="read",
+            )
+
+            channel_allowed = query.first()
+            return (
+                ChannelModel.model_validate(channel_allowed)
+                if channel_allowed
+                else None
+            )
+
     def update_channel_by_id(
         self, id: str, form_data: ChannelForm
     ) -> Optional[ChannelModel]:
@@ -663,6 +838,65 @@ class ChannelTable:
             db.commit()
             return ChannelModel.model_validate(channel) if channel else None
 
+    def add_file_to_channel_by_id(
+        self, channel_id: str, file_id: str, user_id: str
+    ) -> Optional[ChannelFileModel]:
+        with get_db() as db:
+            channel_file = ChannelFileModel(
+                **{
+                    "id": str(uuid.uuid4()),
+                    "channel_id": channel_id,
+                    "file_id": file_id,
+                    "user_id": user_id,
+                    "created_at": int(time.time()),
+                    "updated_at": int(time.time()),
+                }
+            )
+
+            try:
+                result = ChannelFile(**channel_file.model_dump())
+                db.add(result)
+                db.commit()
+                db.refresh(result)
+                if result:
+                    return ChannelFileModel.model_validate(result)
+                else:
+                    return None
+            except Exception:
+                return None
+
+    def set_file_message_id_in_channel_by_id(
+        self, channel_id: str, file_id: str, message_id: str
+    ) -> bool:
+        try:
+            with get_db() as db:
+                channel_file = (
+                    db.query(ChannelFile)
+                    .filter_by(channel_id=channel_id, file_id=file_id)
+                    .first()
+                )
+                if not channel_file:
+                    return False
+
+                channel_file.message_id = message_id
+                channel_file.updated_at = int(time.time())
+
+                db.commit()
+                return True
+        except Exception:
+            return False
+
+    def remove_file_from_channel_by_id(self, channel_id: str, file_id: str) -> bool:
+        try:
+            with get_db() as db:
+                db.query(ChannelFile).filter_by(
+                    channel_id=channel_id, file_id=file_id
+                ).delete()
+                db.commit()
+                return True
+        except Exception:
+            return False
+
     def delete_channel_by_id(self, id: str):
         with get_db() as db:
             db.query(Channel).filter(Channel.id == id).delete()

backend/open_webui/models/chats.py

@@ -126,6 +126,49 @@ class ChatTitleIdResponse(BaseModel):
     created_at: int
 
 
+class ChatListResponse(BaseModel):
+    items: list[ChatModel]
+    total: int
+
+
+class ChatUsageStatsResponse(BaseModel):
+    id: str  # chat id
+
+    models: dict = {}  # models used in the chat with their usage counts
+    message_count: int  # number of messages in the chat
+
+    history_models: dict = {}  # models used in the chat history with their usage counts
+    history_message_count: int  # number of messages in the chat history
+    history_user_message_count: int  # number of user messages in the chat history
+    history_assistant_message_count: (
+        int  # number of assistant messages in the chat history
+    )
+
+    average_response_time: (
+        float  # average response time of assistant messages in seconds
+    )
+    average_user_message_content_length: (
+        float  # average length of user message contents
+    )
+    average_assistant_message_content_length: (
+        float  # average length of assistant message contents
+    )
+
+    tags: list[str] = []  # tags associated with the chat
+
+    last_message_at: int  # timestamp of the last message
+    updated_at: int
+    created_at: int
+
+    model_config = ConfigDict(extra="allow")
+
+
+class ChatUsageStatsListResponse(BaseModel):
+    items: list[ChatUsageStatsResponse]
+    total: int
+    model_config = ConfigDict(extra="allow")
+
+
 class ChatTable:
     def _clean_null_bytes(self, obj):
         """
@@ -675,14 +718,31 @@ class ChatTable:
             )
             return [ChatModel.model_validate(chat) for chat in all_chats]
 
-    def get_chats_by_user_id(self, user_id: str) -> list[ChatModel]:
+    def get_chats_by_user_id(
+        self, user_id: str, skip: Optional[int] = None, limit: Optional[int] = None
+    ) -> ChatListResponse:
         with get_db() as db:
-            all_chats = (
+            query = (
                 db.query(Chat)
                 .filter_by(user_id=user_id)
                 .order_by(Chat.updated_at.desc())
             )
-            return [ChatModel.model_validate(chat) for chat in all_chats]
+
+            total = query.count()
+
+            if skip is not None:
+                query = query.offset(skip)
+            if limit is not None:
+                query = query.limit(limit)
+
+            all_chats = query.all()
+
+            return ChatListResponse(
+                **{
+                    "items": [ChatModel.model_validate(chat) for chat in all_chats],
+                    "total": total,
+                }
+            )
 
     def get_pinned_chats_by_user_id(self, user_id: str) -> list[ChatModel]:
         with get_db() as db:

backend/open_webui/models/files.py

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

backend/open_webui/models/knowledge.py

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

backend/open_webui/models/notes.py

@@ -255,7 +255,9 @@ class NoteTable:
                     query = query.filter(
                         or_(
                             Note.title.ilike(f"%{query_key}%"),
-                            Note.data["content"]["md"].ilike(f"%{query_key}%"),
+                            cast(Note.data["content"]["md"], Text).ilike(
+                                f"%{query_key}%"
+                            ),
                         )
                     )
 

backend/open_webui/routers/audio.py

@@ -33,6 +33,7 @@ from fastapi.responses import FileResponse
 from pydantic import BaseModel
 
 
+from open_webui.utils.misc import strict_match_mime_type
 from open_webui.utils.auth import get_admin_user, get_verified_user
 from open_webui.utils.headers import include_user_info_headers
 from open_webui.config import (
@@ -1155,17 +1156,9 @@ def transcription(
 
     stt_supported_content_types = getattr(
         request.app.state.config, "STT_SUPPORTED_CONTENT_TYPES", []
-    )
+    ) or ["audio/*", "video/webm"]
 
-    if not any(
+    if not strict_match_mime_type(stt_supported_content_types, file.content_type):
-        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/channels.py

@@ -1093,6 +1093,15 @@ async def post_new_message(
 
     try:
         message, channel = await new_message_handler(request, id, form_data, user)
+        try:
+            if files := message.data.get("files", []):
+                for file in files:
+                    Channels.set_file_message_id_in_channel_by_id(
+                        channel.id, file.get("id", ""), message.id
+                    )
+        except Exception as e:
+            log.debug(e)
+
         active_user_ids = get_user_ids_from_room(f"channel:{channel.id}")
 
         async def background_handler():

backend/open_webui/routers/chats.py

@@ -8,6 +8,7 @@ from open_webui.socket.main import get_event_emitter
 from open_webui.models.chats import (
     ChatForm,
     ChatImportForm,
+    ChatUsageStatsListResponse,
     ChatsImportForm,
     ChatResponse,
     Chats,
@@ -68,16 +69,25 @@ def get_session_user_chat_list(
 
 
 ############################
-# GetChatList
+# GetChatUsageStats
+# EXPERIMENTAL: may be removed in future releases
 ############################
 
 
-@router.get("/stats/usage", response_model=list[ChatTitleIdResponse])
+@router.get("/stats/usage", response_model=ChatUsageStatsListResponse)
-def get_session_user_chat_usage(
+def get_session_user_chat_usage_stats(
+    items_per_page: Optional[int] = 50,
+    page: Optional[int] = 1,
     user=Depends(get_verified_user),
 ):
     try:
-        chats = Chats.get_chats_by_user_id(user.id)
+        limit = items_per_page
+        skip = (page - 1) * limit
+
+        result = Chats.get_chats_by_user_id(user.id, skip=skip, limit=limit)
+
+        chats = result.items
+        total = result.total
 
         chat_stats = []
         for chat in chats:
@@ -86,37 +96,96 @@ def get_session_user_chat_usage(
 
             if messages_map and message_id:
                 try:
+                    history_models = {}
+                    history_message_count = len(messages_map)
+                    history_user_messages = []
+                    history_assistant_messages = []
+
+                    for message in messages_map.values():
+                        if message.get("role", "") == "user":
+                            history_user_messages.append(message)
+                        elif message.get("role", "") == "assistant":
+                            history_assistant_messages.append(message)
+                            model = message.get("model", None)
+                            if model:
+                                if model not in history_models:
+                                    history_models[model] = 0
+                                history_models[model] += 1
+
+                    average_user_message_content_length = (
+                        sum(
+                            len(message.get("content", ""))
+                            for message in history_user_messages
+                        )
+                        / len(history_user_messages)
+                        if len(history_user_messages) > 0
+                        else 0
+                    )
+                    average_assistant_message_content_length = (
+                        sum(
+                            len(message.get("content", ""))
+                            for message in history_assistant_messages
+                        )
+                        / len(history_assistant_messages)
+                        if len(history_assistant_messages) > 0
+                        else 0
+                    )
+
+                    response_times = []
+                    for message in history_assistant_messages:
+                        user_message_id = message.get("parentId", None)
+                        if user_message_id and user_message_id in messages_map:
+                            user_message = messages_map[user_message_id]
+                            response_time = message.get(
+                                "timestamp", 0
+                            ) - user_message.get("timestamp", 0)
+
+                            response_times.append(response_time)
+
+                    average_response_time = (
+                        sum(response_times) / len(response_times)
+                        if len(response_times) > 0
+                        else 0
+                    )
+
                     message_list = get_message_list(messages_map, message_id)
                     message_count = len(message_list)
 
-                    last_assistant_message = next(
+                    models = {}
-                        (
+                    for message in reversed(message_list):
-                            message
+                        if message.get("role") == "assistant":
-                            for message in reversed(message_list)
+                            model = message.get("model", None)
-                            if message["role"] == "assistant"
+                            if model:
-                        ),
+                                if model not in models:
-                        None,
+                                    models[model] = 0
-                    )
+                                models[model] += 1
+
+                            annotation = message.get("annotation", {})
 
-                    model_id = (
-                        last_assistant_message.get("model", None)
-                        if last_assistant_message
-                        else None
-                    )
                     chat_stats.append(
                         {
                             "id": chat.id,
-                            "model_id": model_id,
+                            "models": models,
                             "message_count": message_count,
+                            "history_models": history_models,
+                            "history_message_count": history_message_count,
+                            "history_user_message_count": len(history_user_messages),
+                            "history_assistant_message_count": len(
+                                history_assistant_messages
+                            ),
+                            "average_response_time": average_response_time,
+                            "average_user_message_content_length": average_user_message_content_length,
+                            "average_assistant_message_content_length": average_assistant_message_content_length,
                             "tags": chat.meta.get("tags", []),
-                            "model_ids": chat.chat.get("models", []),
+                            "last_message_at": message_list[-1].get("timestamp", None),
                             "updated_at": chat.updated_at,
                             "created_at": chat.created_at,
                         }
                     )
                 except Exception as e:
                     pass
-        return chat_stats
+
+        return ChatUsageStatsListResponse(items=chat_stats, total=total)
 
     except Exception as e:
         log.exception(e)

backend/open_webui/routers/configs.py

@@ -147,6 +147,7 @@ class ToolServerConnection(BaseModel):
     headers: Optional[dict | str] = None
     key: Optional[str]
     config: Optional[dict]
+    placeholders: Optional[list[str]] = None
 
     model_config = ConfigDict(extra="allow")
 

backend/open_webui/routers/files.py

@@ -27,6 +27,7 @@ from open_webui.constants import ERROR_MESSAGES
 from open_webui.env import SRC_LOG_LEVELS
 from open_webui.retrieval.vector.factory import VECTOR_DB_CLIENT
 
+from open_webui.models.channels import Channels
 from open_webui.models.users import Users
 from open_webui.models.files import (
     FileForm,
@@ -38,7 +39,6 @@ from open_webui.models.knowledge import Knowledges
 from open_webui.models.groups import Groups
 
 
-from open_webui.routers.knowledge import get_knowledge, get_knowledge_list
 from open_webui.routers.retrieval import ProcessFileForm, process_file
 from open_webui.routers.audio import transcribe
 
@@ -47,7 +47,7 @@ from open_webui.storage.provider import Storage
 
 from open_webui.utils.auth import get_admin_user, get_verified_user
 from open_webui.utils.access_control import has_access
-
+from open_webui.utils.misc import strict_match_mime_type
 from pydantic import BaseModel
 
 log = logging.getLogger(__name__)
@@ -91,6 +91,10 @@ def has_access_to_file(
             if knowledge_base.id == knowledge_base_id:
                 return True
 
+    channels = Channels.get_channels_by_file_id_and_user_id(file_id, user.id)
+    if access_type == "read" and channels:
+        return True
+
     return False
 
 
@@ -104,17 +108,9 @@ def process_uploaded_file(request, file, file_path, file_item, file_metadata, us
         if file.content_type:
             stt_supported_content_types = getattr(
                 request.app.state.config, "STT_SUPPORTED_CONTENT_TYPES", []
-            )
+            ) or ["audio/*", "video/webm"]
 
-            if any(
+            if strict_match_mime_type(stt_supported_content_types, file.content_type):
-                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)
 
@@ -138,6 +134,7 @@ def process_uploaded_file(request, file, file_path, file_item, file_metadata, us
                 f"File type {file.content_type} is not provided, but trying to process anyway"
             )
             process_file(request, ProcessFileForm(file_id=file_item.id), user=user)
+
     except Exception as e:
         log.error(f"Error processing file: {file_item.id}")
         Files.update_file_data_by_id(
@@ -247,6 +244,13 @@ def upload_file_handler(
             ),
         )
 
+        if "channel_id" in file_metadata:
+            channel = Channels.get_channel_by_id_and_user_id(
+                file_metadata["channel_id"], user.id
+            )
+            if channel:
+                Channels.add_file_to_channel_by_id(channel.id, file_item.id, user.id)
+
         if process:
             if background_tasks and process_in_background:
                 background_tasks.add_task(

backend/open_webui/routers/knowledge.py

@@ -4,6 +4,7 @@ from fastapi import APIRouter, Depends, HTTPException, status, Request, Query
 from fastapi.concurrency import run_in_threadpool
 import logging
 
+from open_webui.models.groups import Groups
 from open_webui.models.knowledge import (
     KnowledgeFileListResponse,
     Knowledges,
@@ -40,41 +41,115 @@ router = APIRouter()
 # getKnowledgeBases
 ############################
 
-
+PAGE_ITEM_COUNT = 30
-@router.get("/", response_model=list[KnowledgeUserResponse])
-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 [
-        KnowledgeUserResponse(
-            **knowledge_base.model_dump(),
-            files=Knowledges.get_file_metadatas_by_id(knowledge_base.id),
-        )
-        for knowledge_base in knowledge_bases
-    ]
 
 
-@router.get("/list", response_model=list[KnowledgeUserResponse])
+class KnowledgeAccessResponse(KnowledgeUserResponse):
-async def get_knowledge_list(user=Depends(get_verified_user)):
+    write_access: Optional[bool] = False
-    # 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, "write")
 
-    return [
+
-        KnowledgeUserResponse(
+class KnowledgeAccessListResponse(BaseModel):
-            **knowledge_base.model_dump(),
+    items: list[KnowledgeAccessResponse]
-            files=Knowledges.get_file_metadatas_by_id(knowledge_base.id),
+    total: int
-        )
+
-        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
+
+    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)
 
 
 ############################
@@ -186,7 +261,8 @@ async def reindex_knowledge_files(request: Request, user=Depends(get_verified_us
 
 
 class KnowledgeFilesResponse(KnowledgeResponse):
-    files: list[FileMetadataResponse]
+    files: Optional[list[FileMetadataResponse]] = None
+    write_access: Optional[bool] = False
 
 
 @router.get("/{id}", response_model=Optional[KnowledgeFilesResponse])
@@ -202,7 +278,10 @@ 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)
+                ),
             )
     else:
         raise HTTPException(
@@ -363,11 +442,6 @@ def add_file_to_knowledge_by_id(
             detail=ERROR_MESSAGES.FILE_NOT_PROCESSED,
         )
 
-    # Add file to knowledge base
-    Knowledges.add_file_to_knowledge_by_id(
-        knowledge_id=id, file_id=form_data.file_id, user_id=user.id
-    )
-
     # Add content to the vector database
     try:
         process_file(
@@ -375,6 +449,11 @@ def add_file_to_knowledge_by_id(
             ProcessFileForm(file_id=form_data.file_id, collection_name=id),
             user=user,
         )
+
+        # Add file to knowledge base
+        Knowledges.add_file_to_knowledge_by_id(
+            knowledge_id=id, file_id=form_data.file_id, user_id=user.id
+        )
     except Exception as e:
         log.debug(e)
         raise HTTPException(

backend/open_webui/utils/db/access_control.py

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

backend/open_webui/utils/middleware.py

@@ -91,7 +91,11 @@ from open_webui.utils.misc import (
     convert_logit_bias_input_to_json,
     get_content_from_message,
 )
-from open_webui.utils.tools import get_tools, get_updated_tool_function
+from open_webui.utils.tools import (
+    get_tools,
+    get_updated_tool_function,
+    replace_placeholders_in_headers
+)
 from open_webui.utils.plugin import load_function_module_by_id
 from open_webui.utils.filter import (
     get_sorted_filter_ids,
@@ -1139,10 +1143,16 @@ async def process_chat_payload(request, form_data, user, metadata, model):
     except Exception as e:
         log.error(f"Error getting OAuth token: {e}")
 
+    __user__ = user.model_dump() if isinstance(user, UserModel) else {}
+    if isinstance(user, UserModel) and user.settings:
+        user_settings = user.settings.model_dump() if user.settings else {}
+        if "tool_server_placeholders" in user_settings:
+            __user__["tool_server_placeholders"] = user_settings["tool_server_placeholders"]
+
     extra_params = {
         "__event_emitter__": event_emitter,
         "__event_call__": event_caller,
-        "__user__": user.model_dump() if isinstance(user, UserModel) else {},
+        "__user__": __user__,
         "__metadata__": metadata,
         "__oauth_token__": oauth_token,
         "__request__": request,
@@ -1401,6 +1411,16 @@ async def process_chat_payload(request, form_data, user, metadata, model):
 
                     connection_headers = mcp_server_connection.get("headers", None)
                     if connection_headers and isinstance(connection_headers, dict):
+                        user_placeholders = (
+                            extra_params.get("__user__", {})
+                            .get("tool_server_placeholders", {})
+                            .get(server_id, {})
+                        )
+
+                        connection_headers = replace_placeholders_in_headers(
+                            connection_headers, user_placeholders
+                        )
+
                         for key, value in connection_headers.items():
                             headers[key] = value
 
@@ -1993,10 +2013,16 @@ async def process_chat_response(
     except Exception as e:
         log.error(f"Error getting OAuth token: {e}")
 
+    __user__ = user.model_dump() if isinstance(user, UserModel) else {}
+    if isinstance(user, UserModel) and user.settings:
+        user_settings = user.settings.model_dump() if user.settings else {}
+        if "tool_server_placeholders" in user_settings:
+            __user__["tool_server_placeholders"] = user_settings["tool_server_placeholders"]
+
     extra_params = {
         "__event_emitter__": event_emitter,
         "__event_call__": event_caller,
-        "__user__": user.model_dump() if isinstance(user, UserModel) else {},
+        "__user__": __user__,
         "__metadata__": metadata,
         "__oauth_token__": oauth_token,
         "__request__": request,

backend/open_webui/utils/misc.py

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

backend/open_webui/utils/tools.py

@@ -51,6 +51,28 @@ log = logging.getLogger(__name__)
 log.setLevel(SRC_LOG_LEVELS["MODELS"])
 
 
+def replace_placeholders_in_headers(
+    headers: dict, placeholders: dict[str, str]
+) -> dict:
+    if not headers or not placeholders:
+        return headers
+
+    replaced_headers = {}
+    for key, value in headers.items():
+        if isinstance(value, str):
+            replaced_value = value
+            for placeholder_name, placeholder_value in placeholders.items():
+                placeholder_pattern = f"{{{{{placeholder_name}}}}}"
+                replaced_value = replaced_value.replace(
+                    placeholder_pattern, placeholder_value
+                )
+            replaced_headers[key] = replaced_value
+        else:
+            replaced_headers[key] = value
+
+    return replaced_headers
+
+
 def get_async_tool_function_and_apply_extra_params(
     function: Callable, extra_params: dict
 ) -> Callable[..., Awaitable]:
@@ -195,6 +217,17 @@ async def get_tools(
 
                         connection_headers = tool_server_connection.get("headers", None)
                         if connection_headers and isinstance(connection_headers, dict):
+                            user_placeholders = (
+                                extra_params.get("__user__", {})
+                                .get("tool_server_placeholders", {})
+                                .get(server_id, {})
+                            )
+
+                            # Replace placeholders in headers
+                            connection_headers = replace_placeholders_in_headers(
+                                connection_headers, user_placeholders
+                            )
+
                             for key, value in connection_headers.items():
                                 headers[key] = value
 

backend/requirements.txt

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

pyproject.toml

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

src/lib/apis/knowledge/index.ts

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

src/lib/components/AddToolServerModal.svelte

@@ -46,6 +46,7 @@
 	let auth_type = 'bearer';
 	let key = '';
 	let headers = '';
+	let placeholders: string[] = [];
 
 	let functionNameFilterList = '';
 	let accessControl = {};
@@ -197,6 +198,7 @@
 				if (data.auth_type) auth_type = data.auth_type;
 				if (data.headers) headers = JSON.stringify(data.headers, null, 2);
 				if (data.key) key = data.key;
+				if (data.placeholders) placeholders = data.placeholders;
 
 				if (data.info) {
 					id = data.info.id ?? '';
@@ -231,6 +233,7 @@
 				auth_type,
 				headers: headers ? JSON.parse(headers) : undefined,
 				key,
+				placeholders: placeholders.length > 0 ? placeholders : undefined,
 
 				info: {
 					id: id,
@@ -302,6 +305,7 @@
 			headers: headers ? JSON.parse(headers) : undefined,
 
 			key,
+			placeholders: placeholders.length > 0 ? placeholders : undefined,
 			config: {
 				enable: enable,
 				function_name_filter_list: functionNameFilterList,
@@ -330,6 +334,7 @@
 
 		key = '';
 		auth_type = 'bearer';
+		placeholders = [];
 
 		id = '';
 		name = '';
@@ -355,6 +360,7 @@
 			headers = connection?.headers ? JSON.stringify(connection.headers, null, 2) : '';
 
 			key = connection?.key ?? '';
+			placeholders = connection?.placeholders ?? [];
 
 			id = connection.info?.id ?? '';
 			name = connection.info?.name ?? '';
@@ -726,6 +732,66 @@
 								</div>
 							</div>
 
+							<div class="flex gap-2 mt-2">
+								<div class="flex flex-col w-full">
+									<div class="flex justify-between items-center mb-0.5">
+										<label
+											for="placeholders-input"
+											class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+										>
+											{$i18n.t('Placeholders')}
+											<span class="text-xs text-gray-200 dark:text-gray-800 ml-0.5">
+												{$i18n.t('Optional')}
+											</span>
+										</label>
+
+										<Tooltip content={$i18n.t('Add Placeholder')}>
+											<button
+												class="px-1"
+												on:click={() => {
+													placeholders = [...placeholders, ''];
+												}}
+												type="button"
+											>
+												<Plus />
+											</button>
+										</Tooltip>
+									</div>
+
+									<div class="text-xs text-gray-500 mb-2">
+										{$i18n.t(
+											'Define placeholder names that users will need to fill in. Use them in headers as {{PLACEHOLDER_NAME}}'
+										)}
+									</div>
+
+									{#if placeholders.length > 0}
+										<div class="flex flex-col gap-2">
+											{#each placeholders as placeholder, idx}
+												<div class="flex gap-2 items-center">
+													<input
+														class={`flex-1 text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+														type="text"
+														bind:value={placeholders[idx]}
+														placeholder={$i18n.t('e.g., API_KEY or USER_TOKEN')}
+														autocomplete="off"
+													/>
+													<button
+														class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+														on:click={() => {
+															placeholders = placeholders.filter((_, i) => i !== idx);
+														}}
+														type="button"
+														aria-label={$i18n.t('Remove')}
+													>
+														<Minus />
+													</button>
+												</div>
+											{/each}
+										</div>
+									{/if}
+								</div>
+							</div>
+
 							<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
 							<div class="flex gap-2">

src/lib/components/channel/Channel.svelte

@@ -290,7 +290,7 @@
 
 <div
 	class="h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-		? 'md:max-w-[calc(100%-260px)]'
+		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} w-full max-w-full flex flex-col"
 	id="channel-container"
 >
@@ -365,6 +365,7 @@
 						bind:chatInputElement
 						bind:replyToMessage
 						{typingUsers}
+						{channel}
 						userSuggestions={true}
 						channelSuggestions={true}
 						disabled={!channel?.write_access}

src/lib/components/channel/MessageInput.svelte

@@ -42,9 +42,10 @@
 	import XMark from '../icons/XMark.svelte';
 
 	export let placeholder = $i18n.t('Type here...');
+	export let chatInputElement;
 
 	export let id = null;
-	export let chatInputElement;
+	export let channel = null;
 
 	export let typingUsers = [];
 	export let inputLoading = false;
@@ -459,15 +460,16 @@
 		try {
 			// During the file upload, file content is automatically extracted.
 			// If the file is an audio file, provide the language for STT.
-			let metadata = null;
+			let metadata = {
-			if (
+				channel_id: channel.id,
-				(file.type.startsWith('audio/') || file.type.startsWith('video/')) &&
+				// If the file is an audio file, provide the language for STT.
+				...((file.type.startsWith('audio/') || file.type.startsWith('video/')) &&
 				$settings?.audio?.stt?.language
-			) {
+					? {
-				metadata = {
+							language: $settings?.audio?.stt?.language
-					language: $settings?.audio?.stt?.language
+						}
-				};
+					: {})
-			}
+			};
 
 			const uploadedFile = await uploadFile(localStorage.token, file, metadata, process);
 

src/lib/components/chat/Chat.svelte

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@
 
 	import { config, user, tools as _tools, mobile, settings, toolServers } from '$lib/stores';
 
-	import { getOAuthClientAuthorizationUrl } from '$lib/apis/configs';
+	import { getOAuthClientAuthorizationUrl, getToolServerConnections } from '$lib/apis/configs';
 	import { getTools } from '$lib/apis/tools';
 
 	import Knobs from '$lib/components/icons/Knobs.svelte';
@@ -21,6 +21,8 @@
 	import Terminal from '$lib/components/icons/Terminal.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import PencilSolid from '$lib/components/icons/PencilSolid.svelte';
+	import PlaceholderConfigModal from './PlaceholderConfigModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -48,6 +50,10 @@
 	let tab = '';
 
 	let tools = null;
+	let toolServerPlaceholders = {};
+
+	let showPlaceholderModal = false;
+	let selectedServerForPlaceholder = null;
 
 	$: if (show) {
 		init();
@@ -88,6 +94,25 @@
 			}
 		}
 
+		try {
+			const res = await getToolServerConnections(localStorage.token);
+			const adminServers = res.TOOL_SERVER_CONNECTIONS || [];
+
+			toolServerPlaceholders = {};
+			for (const server of adminServers) {
+				if (server.placeholders && server.placeholders.length > 0) {
+					const serverId = server.info?.id || server.url;
+					toolServerPlaceholders[serverId] = {
+						name: server.info?.name || server.url,
+						placeholders: server.placeholders,
+						serverId: serverId
+					};
+				}
+			}
+		} catch (err) {
+			console.error('Failed to fetch admin tool servers:', err);
+		}
+
 		selectedToolIds = selectedToolIds.filter((id) => Object.keys(tools).includes(id));
 	};
 </script>
@@ -392,6 +417,28 @@
 								</div>
 							{/if}
 
+							{#if Object.keys(toolServerPlaceholders).find((serverId) => toolId.includes(serverId))}
+								{@const serverData = toolServerPlaceholders[
+									Object.keys(toolServerPlaceholders).find((serverId) => toolId.includes(serverId))
+								]}
+								<div class=" shrink-0">
+									<Tooltip content={$i18n.t('Configure Placeholders')}>
+										<button
+											class="self-center w-fit text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition rounded-full"
+											type="button"
+											on:click={(e) => {
+												e.stopPropagation();
+												e.preventDefault();
+												selectedServerForPlaceholder = serverData;
+												showPlaceholderModal = true;
+											}}
+										>
+											<PencilSolid />
+										</button>
+									</Tooltip>
+								</div>
+							{/if}
+
 							<div class=" shrink-0">
 								<Switch state={tools[toolId].enabled} />
 							</div>
@@ -402,3 +449,10 @@
 		</DropdownMenu.Content>
 	</div>
 </Dropdown>
+
+<PlaceholderConfigModal
+	bind:show={showPlaceholderModal}
+	serverName={selectedServerForPlaceholder?.name || ''}
+	serverId={selectedServerForPlaceholder?.serverId || ''}
+	placeholders={selectedServerForPlaceholder?.placeholders || []}
+/>

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

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { toast } from 'svelte-sonner';
+	import Modal from '$lib/components/common/Modal.svelte';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import { updateUserSettings } from '$lib/apis/users';
+	import { settings } from '$lib/stores';
+
+	const i18n = getContext('i18n');
+
+	export let show = false;
+	export let serverName: string = '';
+	export let serverId: string = '';
+	export let placeholders: string[] = [];
+
+	let placeholderValues: { [key: string]: string } = {};
+
+	$: if (show && placeholders) {
+		// Initialize values from settings
+		const savedValues = $settings?.tool_server_placeholders?.[serverId] || {};
+		placeholderValues = placeholders.reduce((acc, placeholder) => {
+			acc[placeholder] = savedValues[placeholder] || '';
+			return acc;
+		}, {} as { [key: string]: string });
+	}
+
+	const saveHandler = async () => {
+		try {
+			const currentPlaceholders = $settings?.tool_server_placeholders || {};
+			const updatedPlaceholders = {
+				...currentPlaceholders,
+				[serverId]: placeholderValues
+			};
+
+			await updateUserSettings(localStorage.token, {
+				tool_server_placeholders: updatedPlaceholders
+			});
+
+			// Update local settings
+			settings.set({
+				...$settings,
+				tool_server_placeholders: updatedPlaceholders
+			});
+
+			toast.success($i18n.t('Placeholder values saved'));
+			show = false;
+		} catch (error) {
+			toast.error($i18n.t('Failed to save placeholder values'));
+			console.error('Error saving placeholder values:', error);
+		}
+	};
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
+			<h1 class="text-lg font-medium self-center font-primary">
+				{$i18n.t('Configure Placeholders')}
+			</h1>
+		</div>
+
+		<div class="flex flex-col px-5 pb-4">
+			<div class="mb-3">
+				<div class="text-sm font-medium mb-1">{serverName}</div>
+				<div class="text-xs text-gray-500">
+					{$i18n.t(
+						'These values will be used to replace placeholders in the server headers. Your values are private and only visible to you.'
+					)}
+				</div>
+			</div>
+
+			<form
+				on:submit|preventDefault={saveHandler}
+				class="flex flex-col gap-3"
+			>
+				{#each placeholders as placeholder}
+					<div class="flex flex-col gap-1">
+						<label
+							for={`placeholder-${placeholder}`}
+							class="text-xs font-medium text-gray-600 dark:text-gray-400"
+						>
+							{placeholder}
+						</label>
+						<SensitiveInput
+							id={`placeholder-${placeholder}`}
+							bind:value={placeholderValues[placeholder]}
+							placeholder={$i18n.t(`Enter value for {{placeholder}}`, { placeholder })}
+							required={false}
+						/>
+						<div class="text-xs text-gray-500">
+							{$i18n.t('Used in headers as')} <code class="text-xs">{'{{' + placeholder + '}}'}</code>
+						</div>
+					</div>
+				{/each}
+
+				<div class="flex justify-end pt-3 gap-2">
+					<button
+						class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full"
+						type="button"
+						on:click={() => {
+							show = false;
+						}}
+					>
+						{$i18n.t('Cancel')}
+					</button>
+					<button
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+						type="submit"
+					>
+						{$i18n.t('Save')}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</Modal>

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

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

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

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

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

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

src/lib/components/chat/Settings/Tools/PlaceholderValues.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let serverName: string = '';
+	export let serverId: string = '';
+	export let placeholders: string[] = [];
+	export let values: { [key: string]: string } = {};
+	export let onChange: (values: { [key: string]: string }) => void = () => {};
+
+	// Initialize values if not set
+	$: if (placeholders && !Object.keys(values).length) {
+		values = placeholders.reduce((acc, placeholder) => {
+			acc[placeholder] = '';
+			return acc;
+		}, {} as { [key: string]: string });
+	}
+
+	const handleValueChange = (placeholder: string, value: string) => {
+		values[placeholder] = value;
+		onChange(values);
+	};
+</script>
+
+{#if placeholders && placeholders.length > 0}
+	<div class="flex flex-col gap-2 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
+		<div class="flex items-center justify-between">
+			<div class="font-medium text-sm">{serverName}</div>
+			{#if serverId}
+				<div class="text-xs text-gray-500">{serverId}</div>
+			{/if}
+		</div>
+
+		<div class="flex flex-col gap-2">
+			{#each placeholders as placeholder}
+				<div class="flex flex-col gap-1">
+					<label for={`${serverId}-${placeholder}`} class="text-xs text-gray-600 dark:text-gray-400">
+						{placeholder}
+					</label>
+					<SensitiveInput
+						id={`${serverId}-${placeholder}`}
+						value={values[placeholder] || ''}
+						on:input={(e) => handleValueChange(placeholder, e.target.value)}
+						placeholder={$i18n.t(`Enter value for {{placeholder}}`, { placeholder })}
+						required={false}
+					/>
+				</div>
+			{/each}
+		</div>
+
+		<div class="text-xs text-gray-500 mt-1">
+			<Tooltip
+				content={$i18n.t(
+					'These values will be used to replace placeholders in the server headers (e.g., {{{{PLACEHOLDER_NAME}}}})'
+				)}
+			>
+				<span class="underline cursor-help">{$i18n.t('What are placeholders?')}</span>
+			</Tooltip>
+		</div>
+	</div>
+{/if}

src/lib/components/common/FullHeightIframe.svelte

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

src/lib/components/layout/ArchivedChatsModal.svelte

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

src/lib/components/layout/ChatsModal.svelte

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

src/lib/components/layout/Sidebar.svelte

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

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

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

src/lib/components/notes/Notes.svelte

@@ -337,7 +337,7 @@
 					>
 						<Plus className="size-3" strokeWidth="2.5" />
 
-						<div class=" md:ml-1 text-xs">{$i18n.t('New Note')}</div>
+						<div class=" ml-1 text-xs">{$i18n.t('New Note')}</div>
 					</button>
 				</div>
 			</div>

src/lib/components/workspace/Knowledge.svelte

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

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

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

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

@@ -27,7 +27,6 @@
 	import {
 		addFileToKnowledgeById,
 		getKnowledgeById,
-		getKnowledgeBases,
 		removeFileFromKnowledgeById,
 		resetKnowledgeById,
 		updateFileFromKnowledgeById,
@@ -206,16 +205,16 @@
 
 		fileItems = [...(fileItems ?? []), fileItem];
 		try {
-			// If the file is an audio file, provide the language for STT.
+			let metadata = {
-			let metadata = null;
+				knowledge_id: knowledge.id,
-			if (
+				// If the file is an audio file, provide the language for STT.
-				(file.type.startsWith('audio/') || file.type.startsWith('video/')) &&
+				...((file.type.startsWith('audio/') || file.type.startsWith('video/')) &&
 				$settings?.audio?.stt?.language
-			) {
+					? {
-				metadata = {
+							language: $settings?.audio?.stt?.language
-					language: $settings?.audio?.stt?.language
+						}
-				};
+					: {})
-			}
+			};
 
 			const uploadedFile = await uploadFile(localStorage.token, file, metadata).catch((e) => {
 				toast.error(`${e}`);
@@ -423,13 +422,13 @@
 
 	// Helper function to maintain file paths within zip
 	const syncDirectoryHandler = async () => {
-		if ((knowledge?.files ?? []).length > 0) {
+		if (fileItems.length > 0) {
 			const res = await resetKnowledgeById(localStorage.token, id).catch((e) => {
 				toast.error(`${e}`);
 			});
 
 			if (res) {
-				knowledge = res;
+				fileItems = [];
 				toast.success($i18n.t('Knowledge reset successfully.'));
 
 				// Upload directory
@@ -441,16 +440,14 @@
 	};
 
 	const addFileHandler = async (fileId) => {
-		const updatedKnowledge = await addFileToKnowledgeById(localStorage.token, id, fileId).catch(
+		const res = await addFileToKnowledgeById(localStorage.token, id, fileId).catch((e) => {
-			(e) => {
+			toast.error(`${e}`);
-				toast.error(`${e}`);
+			return null;
-				return null;
+		});
-			}
-		);
 
-		if (updatedKnowledge) {
+		if (res) {
-			knowledge = updatedKnowledge;
 			toast.success($i18n.t('File added successfully.'));
+			init();
 		} else {
 			toast.error($i18n.t('Failed to add file.'));
 			fileItems = fileItems.filter((file) => file.id !== fileId);
@@ -462,13 +459,12 @@
 			console.log('Starting file deletion process for:', fileId);
 
 			// Remove from knowledge base only
-			const updatedKnowledge = await removeFileFromKnowledgeById(localStorage.token, id, fileId);
+			const res = await removeFileFromKnowledgeById(localStorage.token, id, fileId);
+			console.log('Knowledge base updated:', res);
 
-			console.log('Knowledge base updated:', updatedKnowledge);
+			if (res) {
-
-			if (updatedKnowledge) {
-				knowledge = updatedKnowledge;
 				toast.success($i18n.t('File removed successfully.'));
+				await init();
 			}
 		} catch (e) {
 			console.error('Error in deleteFileHandler:', e);
@@ -537,7 +533,6 @@
 
 			if (res) {
 				toast.success($i18n.t('Knowledge updated successfully'));
-				_knowledge.set(await getKnowledgeBases(localStorage.token));
 			}
 		}, 1000);
 	};
@@ -569,6 +564,11 @@
 		e.preventDefault();
 		dragged = false;
 
+		if (!knowledge?.write_access) {
+			toast.error($i18n.t('You do not have permission to upload files to this knowledge base.'));
+			return;
+		}
+
 		const handleUploadingFileFolder = (items) => {
 			for (const item of items) {
 				if (item.isFile) {
@@ -750,37 +750,44 @@
 								class="text-left w-full font-medium text-lg font-primary bg-transparent outline-hidden flex-1"
 								bind:value={knowledge.name}
 								placeholder={$i18n.t('Knowledge Name')}
+								disabled={!knowledge?.write_access}
 								on:input={() => {
 									changeDebounceHandler();
 								}}
 							/>
 
 							<div class="shrink-0 mr-2.5">
-								{#if (knowledge?.files ?? []).length}
+								{#if fileItemsTotal}
 									<div class="text-xs text-gray-500">
 										{$i18n.t('{{count}} files', {
-											count: (knowledge?.files ?? []).length
+											count: fileItemsTotal
 										})}
 									</div>
 								{/if}
 							</div>
 						</div>
 
-						<div class="self-center shrink-0">
+						{#if knowledge?.write_access}
-							<button
+							<div class="self-center shrink-0">
-								class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
+								<button
-								type="button"
+									class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
-								on:click={() => {
+									type="button"
-									showAccessControlModal = true;
+									on:click={() => {
-								}}
+										showAccessControlModal = true;
-							>
+									}}
-								<LockClosed strokeWidth="2.5" className="size-3.5" />
+								>
+									<LockClosed strokeWidth="2.5" className="size-3.5" />
 
-								<div class="text-sm font-medium shrink-0">
+									<div class="text-sm font-medium shrink-0">
-									{$i18n.t('Access')}
+										{$i18n.t('Access')}
-								</div>
+									</div>
-							</button>
+								</button>
-						</div>
+							</div>
+						{:else}
+							<div class="text-xs shrink-0 text-gray-500">
+								{$i18n.t('Read Only')}
+							</div>
+						{/if}
 					</div>
 
 					<div class="flex w-full">
@@ -789,6 +796,7 @@
 							class="text-left text-xs w-full text-gray-500 bg-transparent outline-hidden"
 							bind:value={knowledge.description}
 							placeholder={$i18n.t('Knowledge Description')}
+							disabled={!knowledge?.write_access}
 							on:input={() => {
 								changeDebounceHandler();
 							}}
@@ -815,22 +823,24 @@
 						}}
 					/>
 
-					<div>
+					{#if knowledge?.write_access}
-						<AddContentMenu
+						<div>
-							on:upload={(e) => {
+							<AddContentMenu
-								if (e.detail.type === 'directory') {
+								on:upload={(e) => {
-									uploadDirectoryHandler();
+									if (e.detail.type === 'directory') {
-								} else if (e.detail.type === 'text') {
+										uploadDirectoryHandler();
-									showAddTextContentModal = true;
+									} else if (e.detail.type === 'text') {
-								} else {
+										showAddTextContentModal = true;
-									document.getElementById('files-input').click();
+									} else {
-								}
+										document.getElementById('files-input').click();
-							}}
+									}
-							on:sync={(e) => {
+								}}
-								showSyncConfirmModal = true;
+								on:sync={(e) => {
-							}}
+									showSyncConfirmModal = true;
-						/>
+								}}
-					</div>
+							/>
+						</div>
+					{/if}
 				</div>
 			</div>
 
@@ -899,6 +909,7 @@
 									<div class=" flex overflow-y-auto h-full w-full scrollbar-hidden text-xs">
 										<Files
 											files={fileItems}
+											{knowledge}
 											{selectedFileId}
 											onClick={(fileId) => {
 												selectedFileId = fileId;
@@ -962,28 +973,31 @@
 											{selectedFile?.meta?.name}
 										</div>
 
-										<div>
+										{#if knowledge?.write_access}
-											<button
+											<div>
-												class="flex self-center w-fit text-sm py-1 px-2.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+												<button
-												disabled={isSaving}
+													class="flex self-center w-fit text-sm py-1 px-2.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
-												on:click={() => {
+													disabled={isSaving}
-													updateFileContentHandler();
+													on:click={() => {
-												}}
+														updateFileContentHandler();
-											>
+													}}
-												{$i18n.t('Save')}
+												>
-												{#if isSaving}
+													{$i18n.t('Save')}
-													<div class="ml-2 self-center">
+													{#if isSaving}
-														<Spinner />
+														<div class="ml-2 self-center">
-													</div>
+															<Spinner />
-												{/if}
+														</div>
-											</button>
+													{/if}
-										</div>
+												</button>
+											</div>
+										{/if}
 									</div>
 
 									{#key selectedFile.id}
 										<textarea
 											class="w-full h-full text-sm outline-none resize-none px-3 py-2"
 											bind:value={selectedFileContent}
+											disabled={!knowledge?.write_access}
 											placeholder={$i18n.t('Add content here')}
 										/>
 									{/key}

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

@@ -16,6 +16,7 @@
 	import XMark from '$lib/components/icons/XMark.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 
+	export let knowledge = null;
 	export let selectedFileId = null;
 	export let files = [];
 
@@ -42,15 +43,17 @@
 					<div class="flex gap-2 items-center line-clamp-1">
 						<div class="shrink-0">
 							{#if file?.status !== 'uploading'}
-								<DocumentPage className="size-3" />
+								<DocumentPage className="size-3.5" />
 							{:else}
-								<Spinner className="size-3" />
+								<Spinner className="size-3.5" />
 							{/if}
 						</div>
 
-						<div class="line-clamp-1">
+						<div class="line-clamp-1 text-sm">
 							{file?.name ?? file?.meta?.name}
-							<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>
+							{#if file?.meta?.size}
+								<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>
+							{/if}
 						</div>
 					</div>
 				</div>
@@ -77,19 +80,21 @@
 				</div>
 			</button>
 
-			<div class="flex items-center">
+			{#if knowledge?.write_access}
-				<Tooltip content={$i18n.t('Delete')}>
+				<div class="flex items-center">
-					<button
+					<Tooltip content={$i18n.t('Delete')}>
-						class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+						<button
-						type="button"
+							class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
-						on:click={() => {
+							type="button"
-							onDelete(file?.id ?? file?.tempId);
+							on:click={() => {
-						}}
+								onDelete(file?.id ?? file?.tempId);
-					>
+							}}
-						<XMark />
+						>
-					</button>
+							<XMark />
-				</Tooltip>
+						</button>
-			</div>
+					</Tooltip>
+				</div>
+			{/if}
 		</div>
 	{/each}
 </div>

src/lib/components/workspace/Models.svelte

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

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

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

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

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

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

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

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

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

src/lib/stores/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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