ui: Custom Prompts library + improvements for System Message, MCP Prompts & Resources UI/UX#25034
ui: Custom Prompts library + improvements for System Message, MCP Prompts & Resources UI/UX#25034allozaur wants to merge 27 commits into
Conversation
fa43e12 to
6c1629a
Compare
|
I actually vibed an MCP to achieve such functionality. MCP would scan folder and list mark down files as prompts and through MCP they will be available as assistant prompts. |
| @@ -134,6 +181,21 @@ | |||
| get rawEditContent() { | |||
| return rawEditContent; | |||
| }, | |||
| get isSystemMessage() { | |||
| return isSystemMessage; | |||
| }, | |||
| get isSystemPlaceholder() { | |||
| return isSystemPlaceholder; | |||
| }, | |||
| get canAddToLibrary() { | |||
| return canAddToLibrary; | |||
| }, | |||
| get canUpdateLibraryPrompt() { | |||
| return canUpdateLibraryPrompt; | |||
| }, | |||
| get libraryPromptTitle() { | |||
| return referencedPrompt?.title; | |||
| }, | |||
| setContent: (content: string) => { | |||
| editedContent = content; | |||
| }, | |||
| @@ -148,19 +210,50 @@ | |||
| }, | |||
| save: handleSaveEdit, | |||
| saveOnly: handleSaveEditOnly, | |||
| saveAsLibrary: handleSaveAsLibrary, | |||
| updateLibraryPrompt: handleUpdateLibraryPrompt, | |||
| cancel: handleCancelEdit, | |||
| startEdit: handleEdit | |||
| }); | |||
|
|
|||
| let mcpPromptExtra = $derived.by(() => { | |||
| if (message.role !== MessageRole.USER) return null; | |||
| if (message.content.trim()) return null; | |||
| if (!message.extra || message.extra.length !== 1) return null; | |||
| let mcpPromptExtra = $derived.by((): DatabaseMessageExtraMcpPrompt | null => { | |||
| if (message.role === MessageRole.USER) { | |||
| if (message.content.trim()) return null; | |||
| if (!message.extra || message.extra.length !== 1) return null; | |||
|
|
|||
| const extra = message.extra[0]; | |||
|
|
|||
| if (extra.type === AttachmentType.MCP_PROMPT) { | |||
| return extra as DatabaseMessageExtraMcpPrompt; | |||
| } | |||
|
|
|||
| return null; | |||
| } | |||
|
|
|||
| if (message.role === MessageRole.SYSTEM) { | |||
| // System messages created from an MCP prompt carry the server/prompt | |||
| // identity through their synthetic `mcp:<server>:<prompt>` promptId. | |||
| // Treat them as MCP-prompt messages so they render with the same styled | |||
| // surface instead of a plain system textarea. | |||
| const custom = customPromptExtra; | |||
|
|
|||
| if (!custom?.promptId.startsWith('mcp:')) return null; | |||
|
|
|||
| const extra = message.extra[0]; | |||
| const stripped = custom.promptId.slice('mcp:'.length); | |||
| const sepIndex = stripped.indexOf(':'); | |||
|
|
|||
| if (extra.type === AttachmentType.MCP_PROMPT) { | |||
| return extra as DatabaseMessageExtraMcpPrompt; | |||
| if (sepIndex <= 0) return null; | |||
|
|
|||
| const serverName = stripped.slice(0, sepIndex); | |||
| const promptName = stripped.slice(sepIndex + 1); | |||
|
|
|||
| return { | |||
| type: AttachmentType.MCP_PROMPT, | |||
| name: promptName, | |||
| serverName, | |||
| promptName, | |||
| content: message.content | |||
| }; | |||
There was a problem hiding this comment.
if possible, we should move this logic and related markup to somehow manage from ChatMessageCustomPrompt.svelte
|
Very cool! I think Importing/Exporting Prompts (or Prompt-collections), comparable to how chats can be imported/exported would be a nice feature for sharing prompts with other users. "Copying" prompts for A/B-tests might also be useful. |
we will develop this further to support skills in a similiar way. this PR is a beginning of this type of functionality |
yeah, this one i can still squash in this PR |
6c1629a to
f9d2eba
Compare
Overview
Demo
prompts-demo-h264.mp4
Prompts library (
/prompts)DialogPromptAddNew(title, content, optional category)CodeDiffpreview before applying (DialogPromptSync)System messages
ChatMessageEditForm) for user, assistant, and system messages;variant="system"wraps it in the dashed bubble so the read view matches the edit viewpromptIdextra), so the editor and the chat display can always look the referenced prompt upMCP
UI primitives (new building blocks for future features)
Command(cmdk) paletteInputGroup(with addon / button / input / text / textarea parts)Toggle,ToggleGroupRequirements
Qwen3.6-35B-A3B/Qwen3.6-27Blocally