[PR #18421] [CLOSED] UPD:FEAT: Notes and Collections to folders with drag and drop #63642

New Issue

GiteaMirror · 2026-05-06T08:33:08-05:00

GiteaMirror commented

2026-05-06 08:33:08 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/18421
Author: @rgaricano
Created: 10/19/2025
Status: ❌ Closed

Base: dev ← Head: dev-FEAT-impro_Folders_Notes_Chat_Collections

📝 Commits (1)

fa576b6 UPD:FEAT: Notes and Collections to folders with drag and drop

📊 Changes

21 files changed (+1117 additions, -43 deletions)

View changed files

📝 backend/open_webui/models/notes.py (+9 -0)
📝 backend/open_webui/routers/folders.py (+17 -1)
📝 src/lib/components/chat/MessageInput.svelte (+187 -7)
📝 src/lib/components/chat/MessageInput/FilesOverlay.svelte (+48 -0)
📝 src/lib/components/chat/MessageInput/InputMenu.svelte (+22 -10)
📝 src/lib/components/chat/MessageInput/InputMenu/Notes.svelte (+14 -0)
📝 src/lib/components/chat/Placeholder/ChatList.svelte (+1 -0)
📝 src/lib/components/chat/Placeholder/FolderPlaceholder.svelte (+123 -10)
📝 src/lib/components/common/RichTextInput.svelte (+1 -1)
📝 src/lib/components/layout/Sidebar.svelte (+6 -0)
📝 src/lib/components/layout/Sidebar/ChatItem.svelte (+27 -1)
➕ src/lib/components/layout/Sidebar/CollectionItem.svelte (+105 -0)
➕ src/lib/components/layout/Sidebar/CollectionMenu.svelte (+49 -0)
📝 src/lib/components/layout/Sidebar/Folders/FolderModal.svelte (+5 -2)
➕ src/lib/components/layout/Sidebar/NoteItem.svelte (+129 -0)
➕ src/lib/components/layout/Sidebar/NoteMenu.svelte (+49 -0)
📝 src/lib/components/layout/Sidebar/RecursiveFolder.svelte (+213 -10)
📝 src/lib/components/notes/Notes.svelte (+29 -0)
📝 src/lib/components/workspace/Knowledge.svelte (+61 -1)
📝 src/lib/components/workspace/Knowledge/KnowledgeBase.svelte (+21 -0)

...and 1 more files

📄 Description

Update of folders feature

Added drag and drop for notes and collections to folders and from folders items to message input. Enabled the FolderPlaceHolder for those items.

https://github.com/user-attachments/assets/cd738447-065d-4d88-9bf5-83607d27f17e

Here’s a grouped summary of the changes.

Backend

backend/open_webui/models/notes.py
- Added Notes.check_access_by_user_id(id, user_id, permission="write") -> bool:
  - Fetches note by id and returns True if the note exists and user_id matches the note owner; otherwise returns False. (Placeholder for more access logic.)

API / Routers

backend/open_webui/routers/folders.py
- Import Notes model.
- When building folder responses, filter folder.data["notes"] to only include notes the current user has read access to:
  - Calls Notes.get_notes_by_permission(user.id, "read") to get accessible notes and rewrites folder.data["notes"] to only the accessible ones.
  - Persists the filtered folder data back to the DB via folder update.

Frontend — major features and components

Added support for dragging/dropping and attaching Notes, Chats, and Knowledge collections into chats and folders, plus UI to view/manage notes and collections in folders.

Message input and attaching files

src/lib/components/chat/MessageInput.svelte
- Imports: getNoteById, getChatById, getKnowledgeById.
- Prevent duplicate file attachments.
- Improve drag-over detection to detect files and plain text, reduce blinking.
- Add attachNoteToChat(noteId), attachChatToChat(chatId), attachKnowledgeToChat(knowledgeId):
  - Fetch the resource via API, create a file-like entry in the chat input’s files list, show toast notifications.
- onDrop: parse dataTransfer text/plain JSON to handle note/chat/collection drops (calls corresponding attach handlers); fall back to file drops.
- Prevent the text input from swallowing note/chat drops (block drop on text input if it’s note/chat type).
- Pass new handlers down into FilesOverlay and InputMenu. Update modal logic to include notes and chats as modal types.
src/lib/components/chat/MessageInput/FilesOverlay.svelte
- New props: attachNoteToChat, attachChatToChat, attachKnowledgeToChat, inputFilesHandler.
- handleOverlayDrop: parse JSON payloads and call appropriate handlers; fallback to handling dropped files.
- Added dragover handler to prevent default.
src/lib/components/chat/MessageInput/InputMenu.svelte
- New props: attachNoteToChat, attachChatToChat, attachKnowledgeToChat.
- onSelect now routes note/chat/collection selections to attach handlers (instead of only adding file objects).
src/lib/components/chat/MessageInput/InputMenu/Notes.svelte
- When mapping notes into selectable items, include content/file.data.content and data metadata so notes have a snippet and proper URL.
src/lib/components/chat/MessageInput/FilesOverlay.svelte and InputMenu usage updated in MessageInput.svelte.

Notes UI and draggable notes

src/lib/components/notes/Notes.svelte
- Make notes draggable:
  - Add drag start/end handlers that set dataTransfer JSON (type: 'note', id).
  - Add drag attributes on each note item.

Folder, Sidebar and folder UI

src/lib/stores/index.ts
- Added chatListRefresh = writable({ timestamp: Date.now(), folderId: null }) to allow cross-component refresh triggers.
Sidebar and folder-related components:
- src/lib/components/layout/Sidebar.svelte
  - Import and react to chatListRefresh (calls initChatList on change).
- New components (added):
  - src/lib/components/layout/Sidebar/CollectionItem.svelte
  - src/lib/components/layout/Sidebar/CollectionMenu.svelte
  - src/lib/components/layout/Sidebar/NoteItem.svelte
  - src/lib/components/layout/Sidebar/NoteMenu.svelte
    - Used to display draggable collection & note items in sidebar folders and to provide per-item menus (e.g., Remove from Folder).
- src/lib/components/layout/Sidebar/ChatItem.svelte
  - Now updates chatListRefresh when chats are moved/archived to refresh folder context (folder-scoped refresh).
- src/lib/components/layout/Sidebar/Folders/FolderModal.svelte
  - Folder data structure initialized/cleared to include notes and collections arrays.
- src/lib/components/layout/Sidebar/RecursiveFolder.svelte
  - Import getNoteById and getKnowledgeById.
  - Add NoteItem and CollectionItem to folder child lists and UI.
  - React to chatListRefresh to refresh folder contents.
  - Implement drop handling for items of type 'note' and 'collection':
    - On drop: add item to target folder, optionally remove from source folder if sourceFolderId provided, update via updateFolderById API, refresh folder displays and show toasts.
  - setFolderItems now fetches and populates full note and collection metadata for the folder (calls APIs to get detailed items) and sets selectedFolder.
  - UI changes to show notes and collections under a folder and allow removing them (with API calls & toasts).
  - Adjusted many conditional checks to consider notes/collections existence (loading spinners when null).

Folder placeholder and folder content listing

src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
- Add fetching and display of:
  - notes (via getNoteById)
  - collections (via getKnowledgeById)
- Add tabs to switch between Knowledge / Notes / Chats and display spinner while loading. Added dayjs plugins for duration/relative time.

Chat list placeholder

src/lib/components/chat/Placeholder/ChatList.svelte
- Add exported prop show = false (minor).

Workspace Knowledge and KnowledgeBase

src/lib/components/workspace/Knowledge.svelte
- Make knowledge items draggable (dragstart/dragend handlers) and attach event listeners on mount/destroy.
src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
- Added reactive logic to watch $page.params.id:
  - When route id changes, loadKnowledge(collectionId) via getKnowledgeById; if not found, redirect to /workspace/knowledge.

Misc frontend tweaks and fixes

src/lib/components/common/RichTextInput.svelte
- Fix the template selection guard to ensure editor.view exists before using it (if (value !== '' && editor?.view)).
MessageInput.svelte: prevent duplicates for files.
FilesOverlay usage updated in MessageInput.svelte to pass drop handlers and inputFilesHandler.

General behavior introduced

Drag-and-drop support for notes, chats, and collections across UI:
- Notes can be dragged from the Notes list or Sidebar into folders and chats.
- Collections (knowledge bases) can be dragged into folders and chats.
- Chats can be attached to chats and folders.
Folder data now supports notes and collections in addition to files:
- New UI to list, add, remove, and move notes & collections inside folders.
Cross-component refresh mechanism via chatListRefresh store to propagate folder/chat list updates.

New files added (components)

CollectionItem.svelte
CollectionMenu.svelte
NoteItem.svelte
NoteMenu.svelte

Summary of intent

These changes primarily add first-class support for notes and knowledge collections: viewing them in folders, dragging/dropping them, attaching them to chats, preventing duplicate attachments, and ensuring folder displays only include notes the current user can access. Also includes UI/UX polish around drag overlays and selection behavior and a small backend helper for checking note access.

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/18421 **Author:** [@rgaricano](https://github.com/rgaricano) **Created:** 10/19/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `dev-FEAT-impro_Folders_Notes_Chat_Collections` --- ### 📝 Commits (1) - [`fa576b6`](https://github.com/open-webui/open-webui/commit/fa576b63fd0d76ed6532f0a4e6285f16c2514e8b) UPD:FEAT: Notes and Collections to folders with drag and drop ### 📊 Changes **21 files changed** (+1117 additions, -43 deletions) <details> <summary>View changed files</summary> 📝 `backend/open_webui/models/notes.py` (+9 -0) 📝 `backend/open_webui/routers/folders.py` (+17 -1) 📝 `src/lib/components/chat/MessageInput.svelte` (+187 -7) 📝 `src/lib/components/chat/MessageInput/FilesOverlay.svelte` (+48 -0) 📝 `src/lib/components/chat/MessageInput/InputMenu.svelte` (+22 -10) 📝 `src/lib/components/chat/MessageInput/InputMenu/Notes.svelte` (+14 -0) 📝 `src/lib/components/chat/Placeholder/ChatList.svelte` (+1 -0) 📝 `src/lib/components/chat/Placeholder/FolderPlaceholder.svelte` (+123 -10) 📝 `src/lib/components/common/RichTextInput.svelte` (+1 -1) 📝 `src/lib/components/layout/Sidebar.svelte` (+6 -0) 📝 `src/lib/components/layout/Sidebar/ChatItem.svelte` (+27 -1) ➕ `src/lib/components/layout/Sidebar/CollectionItem.svelte` (+105 -0) ➕ `src/lib/components/layout/Sidebar/CollectionMenu.svelte` (+49 -0) 📝 `src/lib/components/layout/Sidebar/Folders/FolderModal.svelte` (+5 -2) ➕ `src/lib/components/layout/Sidebar/NoteItem.svelte` (+129 -0) ➕ `src/lib/components/layout/Sidebar/NoteMenu.svelte` (+49 -0) 📝 `src/lib/components/layout/Sidebar/RecursiveFolder.svelte` (+213 -10) 📝 `src/lib/components/notes/Notes.svelte` (+29 -0) 📝 `src/lib/components/workspace/Knowledge.svelte` (+61 -1) 📝 `src/lib/components/workspace/Knowledge/KnowledgeBase.svelte` (+21 -0) _...and 1 more files_ </details> ### 📄 Description ### Update of folders feature Added drag and drop for notes and collections to folders and from folders items to message input. Enabled the FolderPlaceHolder for those items. https://github.com/user-attachments/assets/cd738447-065d-4d88-9bf5-83607d27f17e Here’s a grouped summary of the changes. Backend - backend/open_webui/models/notes.py - Added Notes.check_access_by_user_id(id, user_id, permission="write") -> bool: - Fetches note by id and returns True if the note exists and user_id matches the note owner; otherwise returns False. (Placeholder for more access logic.) API / Routers - backend/open_webui/routers/folders.py - Import Notes model. - When building folder responses, filter folder.data["notes"] to only include notes the current user has read access to: - Calls Notes.get_notes_by_permission(user.id, "read") to get accessible notes and rewrites folder.data["notes"] to only the accessible ones. - Persists the filtered folder data back to the DB via folder update. Frontend — major features and components - Added support for dragging/dropping and attaching Notes, Chats, and Knowledge collections into chats and folders, plus UI to view/manage notes and collections in folders. Message input and attaching files - src/lib/components/chat/MessageInput.svelte - Imports: getNoteById, getChatById, getKnowledgeById. - Prevent duplicate file attachments. - Improve drag-over detection to detect files and plain text, reduce blinking. - Add attachNoteToChat(noteId), attachChatToChat(chatId), attachKnowledgeToChat(knowledgeId): - Fetch the resource via API, create a file-like entry in the chat input’s files list, show toast notifications. - onDrop: parse dataTransfer text/plain JSON to handle note/chat/collection drops (calls corresponding attach handlers); fall back to file drops. - Prevent the text input from swallowing note/chat drops (block drop on text input if it’s note/chat type). - Pass new handlers down into FilesOverlay and InputMenu. Update modal logic to include notes and chats as modal types. - src/lib/components/chat/MessageInput/FilesOverlay.svelte - New props: attachNoteToChat, attachChatToChat, attachKnowledgeToChat, inputFilesHandler. - handleOverlayDrop: parse JSON payloads and call appropriate handlers; fallback to handling dropped files. - Added dragover handler to prevent default. - src/lib/components/chat/MessageInput/InputMenu.svelte - New props: attachNoteToChat, attachChatToChat, attachKnowledgeToChat. - onSelect now routes note/chat/collection selections to attach handlers (instead of only adding file objects). - src/lib/components/chat/MessageInput/InputMenu/Notes.svelte - When mapping notes into selectable items, include content/file.data.content and data metadata so notes have a snippet and proper URL. - src/lib/components/chat/MessageInput/FilesOverlay.svelte and InputMenu usage updated in MessageInput.svelte. Notes UI and draggable notes - src/lib/components/notes/Notes.svelte - Make notes draggable: - Add drag start/end handlers that set dataTransfer JSON (type: 'note', id). - Add drag attributes on each note item. Folder, Sidebar and folder UI - src/lib/stores/index.ts - Added chatListRefresh = writable({ timestamp: Date.now(), folderId: null }) to allow cross-component refresh triggers. - Sidebar and folder-related components: - src/lib/components/layout/Sidebar.svelte - Import and react to chatListRefresh (calls initChatList on change). - New components (added): - src/lib/components/layout/Sidebar/CollectionItem.svelte - src/lib/components/layout/Sidebar/CollectionMenu.svelte - src/lib/components/layout/Sidebar/NoteItem.svelte - src/lib/components/layout/Sidebar/NoteMenu.svelte - Used to display draggable collection & note items in sidebar folders and to provide per-item menus (e.g., Remove from Folder). - src/lib/components/layout/Sidebar/ChatItem.svelte - Now updates chatListRefresh when chats are moved/archived to refresh folder context (folder-scoped refresh). - src/lib/components/layout/Sidebar/Folders/FolderModal.svelte - Folder data structure initialized/cleared to include notes and collections arrays. - src/lib/components/layout/Sidebar/RecursiveFolder.svelte - Import getNoteById and getKnowledgeById. - Add NoteItem and CollectionItem to folder child lists and UI. - React to chatListRefresh to refresh folder contents. - Implement drop handling for items of type 'note' and 'collection': - On drop: add item to target folder, optionally remove from source folder if sourceFolderId provided, update via updateFolderById API, refresh folder displays and show toasts. - setFolderItems now fetches and populates full note and collection metadata for the folder (calls APIs to get detailed items) and sets selectedFolder. - UI changes to show notes and collections under a folder and allow removing them (with API calls & toasts). - Adjusted many conditional checks to consider notes/collections existence (loading spinners when null). Folder placeholder and folder content listing - src/lib/components/chat/Placeholder/FolderPlaceholder.svelte - Add fetching and display of: - notes (via getNoteById) - collections (via getKnowledgeById) - Add tabs to switch between Knowledge / Notes / Chats and display spinner while loading. Added dayjs plugins for duration/relative time. Chat list placeholder - src/lib/components/chat/Placeholder/ChatList.svelte - Add exported prop show = false (minor). Workspace Knowledge and KnowledgeBase - src/lib/components/workspace/Knowledge.svelte - Make knowledge items draggable (dragstart/dragend handlers) and attach event listeners on mount/destroy. - src/lib/components/workspace/Knowledge/KnowledgeBase.svelte - Added reactive logic to watch $page.params.id: - When route id changes, loadKnowledge(collectionId) via getKnowledgeById; if not found, redirect to /workspace/knowledge. Misc frontend tweaks and fixes - src/lib/components/common/RichTextInput.svelte - Fix the template selection guard to ensure editor.view exists before using it (if (value !== '' && editor?.view)). - MessageInput.svelte: prevent duplicates for files. - FilesOverlay usage updated in MessageInput.svelte to pass drop handlers and inputFilesHandler. General behavior introduced - Drag-and-drop support for notes, chats, and collections across UI: - Notes can be dragged from the Notes list or Sidebar into folders and chats. - Collections (knowledge bases) can be dragged into folders and chats. - Chats can be attached to chats and folders. - Folder data now supports notes and collections in addition to files: - New UI to list, add, remove, and move notes & collections inside folders. - Cross-component refresh mechanism via chatListRefresh store to propagate folder/chat list updates. New files added (components) - CollectionItem.svelte - CollectionMenu.svelte - NoteItem.svelte - NoteMenu.svelte Summary of intent - These changes primarily add first-class support for notes and knowledge collections: viewing them in folders, dragging/dropping them, attaching them to chats, preventing duplicate attachments, and ensuring folder displays only include notes the current user can access. Also includes UI/UX polish around drag overlays and selection behavior and a small backend helper for checking note access. ___ ### Contributor License Agreement By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-06 08:33:08 -05:00

GiteaMirror closed this issue

2026-05-06 08:33:10 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#63642