From 6fd3afd25a0df7fbfa01a2a9fd6847a68acd7c90 Mon Sep 17 00:00:00 2001 From: Bohdan Triapitsyn Date: Thu, 21 May 2026 20:00:35 +0300 Subject: [PATCH] feat: replace prompt templates with snippets Replace the prompt-template workflow with snippet support that is compatible with opencode snippet conventions. Snippets are now stored and loaded from global and project snippet directories, including legacy pluralized paths, with frontmatter metadata for aliases and descriptions. Snippet expansion supports recursive references plus prepend and append sections, while inject sections are treated as unsupported no-ops so OpenChamber remains compatible without requiring an external plugin. Add the snippets settings experience and remove the old prompt-template settings surface. The new settings page and sidebar support creating, editing, deleting, selecting, and describing snippets, with localized copy across every supported locale. The settings navigation now exposes Snippets with a dedicated icon and metadata. Wire snippets into all prompt-entry surfaces that need them. Chat, multi-run groups, and scheduled task prompts now offer hash-trigger snippet autocomplete and expand snippets before sending work to OpenCode. Chat also uses an adaptive compact placeholder on mobile or narrow composer widths so helper trigger guidance stays readable in constrained layouts. Keep multi-run aligned with grouped prompts. Multi-run sessions now use a shared title builder that handles both legacy titles and the newer g1, g2 prompt-group title format. Fusion parsing now recognizes grouped multi-run titles, scopes fusion sources to the same prompt group, and creates fusion sessions under the matching group so outputs from different prompts are not mixed accidentally. Harden the icon sprite pipeline. The sprite generator now discovers icon names used through typed icon maps, JSX icon props, IconName returns, and generated-value flows without scanning unrelated string literals or the generated sprite itself. The generated sprite is strictly typed so invalid icon names are caught by type checking, and existing invalid or unsafe icon references were cleaned up across settings, provider, Git identity, scheduled task, voice, header, and sidebar surfaces. Update backend configuration routes and documentation for snippets. The OpenCode config route layer now exposes snippet CRUD and expansion endpoints, accepts JSON bodies for snippet writes, and removes the old prompt-template provider. Scheduled task runtime expansion now uses snippets before dispatching messages. Add regression coverage for snippet storage and expansion, config-route JSON handling, and multi-run title parsing. Validated with full type checking, full linting, targeted multi-run title tests, and targeted OpenCode snippet/config route tests. --- packages/ui/src/components/chat/ChatInput.tsx | 120 ++++++- .../components/chat/SnippetAutocomplete.tsx | 159 +++++++++ packages/ui/src/components/icon/sprite.ts | 5 +- packages/ui/src/components/layout/Header.tsx | 3 +- .../multirun/MultiRunFusionDialog.tsx | 3 +- .../components/multirun/MultiRunLauncher.tsx | 288 +++++++++++++--- .../GitIdentityEditorDialog.tsx | 3 +- .../sections/git-identities/GitPage.tsx | 3 +- .../prompt-templates/PromptTemplatesPage.tsx | 181 ---------- .../PromptTemplatesSidebar.tsx | 316 ------------------ .../sections/providers/ProvidersPage.tsx | 3 +- .../sections/shared/SettingsSidebarItem.tsx | 3 +- .../sections/snippets/SnippetsPage.tsx | 169 ++++++++++ .../sections/snippets/SnippetsSidebar.tsx | 115 +++++++ .../session/ScheduledTaskEditorDialog.tsx | 71 +++- .../session/ScheduledTasksDialog.tsx | 3 +- .../ui/src/components/views/SettingsView.tsx | 30 +- .../components/voice/VoiceStatusIndicator.tsx | 3 +- packages/ui/src/constants/sidebar.ts | 2 +- .../ui/src/lib/i18n/messages/en.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/en.ts | 8 +- .../ui/src/lib/i18n/messages/es.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/es.ts | 8 +- .../ui/src/lib/i18n/messages/ko.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/ko.ts | 8 +- .../ui/src/lib/i18n/messages/pl.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/pl.ts | 8 +- .../src/lib/i18n/messages/pt-BR.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/pt-BR.ts | 8 +- .../ui/src/lib/i18n/messages/uk.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/uk.ts | 8 +- .../src/lib/i18n/messages/zh-CN.settings.ts | 23 ++ packages/ui/src/lib/i18n/messages/zh-CN.ts | 8 +- packages/ui/src/lib/multirun/title.test.ts | 65 ++++ packages/ui/src/lib/multirun/title.ts | 71 +++- packages/ui/src/lib/settings/metadata.ts | 6 +- packages/ui/src/stores/useMultiRunStore.ts | 24 +- .../ui/src/stores/usePromptTemplatesStore.ts | 138 -------- packages/ui/src/stores/useSnippetsStore.ts | 173 ++++++++++ packages/ui/src/types/multirun.ts | 1 - packages/ui/src/types/prompt-template.ts | 6 - packages/ui/src/types/snippet.ts | 8 + .../web/server/lib/opencode/DOCUMENTATION.md | 2 + .../lib/opencode/config-entity-routes.js | 101 +++--- .../web/server/lib/opencode/core-routes.js | 1 + .../server/lib/opencode/core-routes.test.js | 18 +- .../lib/opencode/feature-routes-runtime.js | 22 +- packages/web/server/lib/opencode/index.js | 14 +- .../server/lib/opencode/prompt-templates.js | 159 --------- packages/web/server/lib/opencode/snippets.js | 233 +++++++++++++ .../web/server/lib/opencode/snippets.test.js | 68 ++++ .../web/server/lib/scheduled-tasks/runtime.js | 7 +- scripts/generate-icon-sprite.mjs | 277 ++++++++++----- 53 files changed, 2037 insertions(+), 1054 deletions(-) create mode 100644 packages/ui/src/components/chat/SnippetAutocomplete.tsx delete mode 100644 packages/ui/src/components/sections/prompt-templates/PromptTemplatesPage.tsx delete mode 100644 packages/ui/src/components/sections/prompt-templates/PromptTemplatesSidebar.tsx create mode 100644 packages/ui/src/components/sections/snippets/SnippetsPage.tsx create mode 100644 packages/ui/src/components/sections/snippets/SnippetsSidebar.tsx create mode 100644 packages/ui/src/lib/multirun/title.test.ts delete mode 100644 packages/ui/src/stores/usePromptTemplatesStore.ts create mode 100644 packages/ui/src/stores/useSnippetsStore.ts delete mode 100644 packages/ui/src/types/prompt-template.ts create mode 100644 packages/ui/src/types/snippet.ts delete mode 100644 packages/web/server/lib/opencode/prompt-templates.js create mode 100644 packages/web/server/lib/opencode/snippets.js create mode 100644 packages/web/server/lib/opencode/snippets.test.js diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx index e06f9c46..10fd41ed 100644 --- a/packages/ui/src/components/chat/ChatInput.tsx +++ b/packages/ui/src/components/chat/ChatInput.tsx @@ -12,6 +12,7 @@ import type { AttachedFile } from '@/stores/types/sessionTypes'; import * as sessionActions from '@/sync/session-actions'; import { useDirectorySync, useUserMessageHistory } from '@/sync/sync-context'; import { useInlineCommentDraftStore, type InlineCommentDraft } from '@/stores/useInlineCommentDraftStore'; +import { useSnippetsStore } from '@/stores/useSnippetsStore'; import { appendInlineComments } from '@/lib/messages/inlineComments'; import { renderMagicPrompt } from '@/lib/magicPrompts'; import { AttachedFilesList, AttachedVSCodeFileChips, ActiveEditorFileSuggestion } from './FileAttachment'; @@ -19,6 +20,7 @@ import { QueuedMessageChips } from './QueuedMessageChips'; import { FileMentionAutocomplete, type FileMentionHandle } from './FileMentionAutocomplete'; import { CommandAutocomplete, type CommandAutocompleteHandle, type CommandInfo } from './CommandAutocomplete'; import { SkillAutocomplete, type SkillAutocompleteHandle } from './SkillAutocomplete'; +import { SnippetAutocomplete, type SnippetAutocompleteHandle } from './SnippetAutocomplete'; import { cn, formatDirectoryName, isMacOS } from '@/lib/utils'; import { ModelControls } from './ModelControls'; import { parseAgentMentions } from '@/lib/messages/agentMentions'; @@ -74,6 +76,7 @@ const EMPTY_MESSAGES: Message[] = []; const FILE_MENTION_TOKEN = /^@[^\s]+$/; const INLINE_SKILL_TOKEN_PATTERN = /(^|\s)\/([a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?)/g; const CHAT_DRAFT_PERSIST_DEBOUNCE_MS = 500; +const COMPACT_CHAT_PLACEHOLDER_MAX_WIDTH = 560; const VS_CODE_DROP_DATA_TYPES = [ 'CodeFiles', 'codefiles', @@ -906,6 +909,8 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo const [autocompleteTab, setAutocompleteTab] = React.useState<'commands' | 'agents' | 'files'>('commands'); const [showSkillAutocomplete, setShowSkillAutocomplete] = React.useState(false); const [skillQuery, setSkillQuery] = React.useState(''); + const [showSnippetAutocomplete, setShowSnippetAutocomplete] = React.useState(false); + const [snippetQuery, setSnippetQuery] = React.useState(''); const [textareaSize, setTextareaSize] = React.useState<{ height: number; maxHeight: number } | null>(null); const [mobileControlsPanel, setMobileControlsPanel] = React.useState(null); // Message history navigation state (up/down arrow to recall previous messages) @@ -924,6 +929,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo const mentionRef = React.useRef(null); const commandRef = React.useRef(null); const skillRef = React.useRef(null); + const snippetRef = React.useRef(null); // Ref to track current message value without triggering re-renders in effects const messageRef = React.useRef(message); const draftPersistTimerRef = React.useRef | null>(null); @@ -993,9 +999,35 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo const [showAbortStatus, setShowAbortStatus] = React.useState(false); const setSessionAutoAccept = usePermissionStore((state) => state.setSessionAutoAccept); const composerHighlightRef = React.useRef(null); + const [isNarrowComposer, setIsNarrowComposer] = React.useState(false); const isDesktopExpanded = isExpandedInput && !isMobile; const chatInputRadius = 'var(--radius-xl)'; + const useCompactChatPlaceholder = isMobile || isNarrowComposer; + + React.useEffect(() => { + const element = dropZoneRef.current; + if (!element) return; + + const updateWidth = (width: number) => { + const next = width > 0 && width < COMPACT_CHAT_PLACEHOLDER_MAX_WIDTH; + setIsNarrowComposer((prev) => (prev === next ? prev : next)); + }; + + updateWidth(element.clientWidth); + + if (typeof ResizeObserver === 'undefined') { + const handleResize = () => updateWidth(element.clientWidth); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + } + + const observer = new ResizeObserver((entries) => { + updateWidth(entries[0]?.contentRect.width ?? element.clientWidth); + }); + observer.observe(element); + return () => observer.disconnect(); + }, []); const sendableAttachedFiles = attachedFiles; @@ -1782,6 +1814,16 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo } } + try { + const expandText = useSnippetsStore.getState().expandText; + primaryText = await expandText(primaryText); + for (const part of additionalParts) { + if (!part.synthetic) part.text = await expandText(part.text); + } + } catch (error) { + console.warn('[ChatInput] Failed to expand snippets, sending original text:', error); + } + // Collect all attachments for error recovery const allAttachments = [ ...primaryAttachments, @@ -1957,6 +1999,14 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo } } + if (showSnippetAutocomplete && snippetRef.current) { + if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') { + e.preventDefault(); + snippetRef.current.handleKeyDown(e.key); + return; + } + } + if (showFileMention && mentionRef.current) { if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') { e.preventDefault(); @@ -1980,7 +2030,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo ? 1 : 0; - if (cycleAgentDirection !== 0 && !showCommandAutocomplete && !showSkillAutocomplete && !showFileMention) { + if (cycleAgentDirection !== 0 && !showCommandAutocomplete && !showSkillAutocomplete && !showSnippetAutocomplete && !showFileMention) { e.preventDefault(); e.stopPropagation(); handleCycleAgent(cycleAgentDirection); @@ -1990,7 +2040,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo // Handle ArrowUp/ArrowDown for message history navigation // ArrowUp: only when cursor at start (position 0) or input is empty // ArrowDown: also works when cursor at end (to cycle forward through history) - const isAnyAutocompleteOpen = showCommandAutocomplete || showSkillAutocomplete || showFileMention; + const isAnyAutocompleteOpen = showCommandAutocomplete || showSkillAutocomplete || showSnippetAutocomplete || showFileMention; const cursorAtStart = textareaRef.current?.selectionStart === 0 && textareaRef.current?.selectionEnd === 0; const cursorAtEnd = textareaRef.current?.selectionStart === message.length && textareaRef.current?.selectionEnd === message.length; const canNavigateHistoryUp = !isAnyAutocompleteOpen && (message.length === 0 || cursorAtStart); @@ -2118,7 +2168,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo return; } - if (!showCommandAutocomplete && !showSkillAutocomplete && !showFileMention) { + if (!showCommandAutocomplete && !showSkillAutocomplete && !showSnippetAutocomplete && !showFileMention) { setAutocompleteOverlayPosition(null); return; } @@ -2143,7 +2193,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo const spaceBelow = containerRect.height - caretY - popupMargin; const place: 'above' | 'below' = spaceBelow >= estimatedPopupHeight || spaceBelow >= spaceAbove ? 'below' : 'above'; - const desiredWidth = showFileMention ? 520 : showCommandAutocomplete ? 450 : 360; + const desiredWidth = showFileMention ? 520 : showCommandAutocomplete || showSnippetAutocomplete ? 450 : 360; const clampedLeft = Math.max( popupMargin, Math.min(caretX - 24, containerRect.width - desiredWidth - popupMargin) @@ -2163,6 +2213,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo message.length, showCommandAutocomplete, showFileMention, + showSnippetAutocomplete, showSkillAutocomplete, ]); @@ -2173,6 +2224,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo message, showCommandAutocomplete, showSkillAutocomplete, + showSnippetAutocomplete, showFileMention, isDesktopExpanded, ]); @@ -2280,6 +2332,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo setShowCommandAutocomplete(false); setShowFileMention(false); setShowSkillAutocomplete(false); + setShowSnippetAutocomplete(false); return; } @@ -2298,6 +2351,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo setShowCommandAutocomplete(true); setShowFileMention(false); setShowSkillAutocomplete(false); + setShowSnippetAutocomplete(false); return; } } @@ -2324,6 +2378,21 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo setShowSkillAutocomplete(false); setSkillQuery(''); + const lastHashSymbol = textBeforeCursor.lastIndexOf('#'); + if (lastHashSymbol !== -1) { + const charBefore = lastHashSymbol > 0 ? textBeforeCursor[lastHashSymbol - 1] : null; + const textAfterHash = textBeforeCursor.substring(lastHashSymbol + 1); + const isWordBoundary = !charBefore || /\s/.test(charBefore); + if (isWordBoundary && !textAfterHash.includes(' ') && !textAfterHash.includes('\n')) { + setSnippetQuery(textAfterHash); + setShowSnippetAutocomplete(true); + setShowFileMention(false); + return; + } + } + + setShowSnippetAutocomplete(false); + const lastAtSymbol = textBeforeCursor.lastIndexOf('@'); if (lastAtSymbol !== -1) { const charBefore = lastAtSymbol > 0 ? textBeforeCursor[lastAtSymbol - 1] : null; @@ -2703,6 +2772,28 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo textareaRef.current?.focus(); }; + const handleSnippetSelect = (_snippet: unknown, trigger: string) => { + const textarea = textareaRef.current; + const cursorPosition = textarea?.selectionStart ?? message.length; + const textBeforeCursor = message.substring(0, cursorPosition); + const lastHashSymbol = textBeforeCursor.lastIndexOf('#'); + const startIndex = lastHashSymbol !== -1 ? lastHashSymbol : cursorPosition; + const newMessage = `${message.substring(0, startIndex)}#${trigger} ${message.substring(cursorPosition)}`; + setMessage(newMessage); + const nextCursor = startIndex + trigger.length + 2; + requestAnimationFrame(() => { + if (textareaRef.current) { + textareaRef.current.selectionStart = nextCursor; + textareaRef.current.selectionEnd = nextCursor; + } + adjustTextareaHeight(); + updateAutocompleteState(newMessage, nextCursor); + }); + setShowSnippetAutocomplete(false); + setSnippetQuery(''); + textareaRef.current?.focus(); + }; + const handleCommandSelect = (command: CommandInfo) => { setMessage(`/${command.name} `); @@ -3896,6 +3987,25 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo /> )} + {showSnippetAutocomplete && ( + setShowSnippetAutocomplete(false)} + style={isDesktopExpanded && autocompleteOverlayPosition + ? { + left: `${autocompleteOverlayPosition.left}px`, + top: `${autocompleteOverlayPosition.top}px`, + bottom: 'auto', + width: `min(450px, calc(100% - ${autocompleteOverlayPosition.left + 8}px))`, + maxHeight: `${autocompleteOverlayPosition.maxHeight}px`, + transform: autocompleteOverlayPosition.place === 'above' ? 'translateY(-100%)' : undefined, + } + : undefined} + /> + )} + {showFileMention && ( = ({ onOpenSettings, scrollTo placeholder={currentSessionId || newSessionDraftOpen ? inputMode === 'shell' ? t('chat.chatInput.placeholder.shell') - : t('chat.chatInput.placeholder.chat') + : t(useCompactChatPlaceholder ? 'chat.chatInput.placeholder.chatCompact' : 'chat.chatInput.placeholder.chat') : t('chat.chatInput.placeholder.selectSession')} disabled={!currentSessionId && !newSessionDraftOpen} autoCorrect={isMobile ? "on" : "off"} diff --git a/packages/ui/src/components/chat/SnippetAutocomplete.tsx b/packages/ui/src/components/chat/SnippetAutocomplete.tsx new file mode 100644 index 00000000..b85165db --- /dev/null +++ b/packages/ui/src/components/chat/SnippetAutocomplete.tsx @@ -0,0 +1,159 @@ +import React from 'react'; +import { cn, fuzzyMatch } from '@/lib/utils'; +import { useSnippetsStore } from '@/stores/useSnippetsStore'; +import { useUIStore } from '@/stores/useUIStore'; +import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay'; +import { Icon } from '@/components/icon/Icon'; +import { useI18n } from '@/lib/i18n'; +import type { Snippet } from '@/types/snippet'; + +export interface SnippetAutocompleteHandle { + handleKeyDown: (key: string) => void; +} + +interface SnippetAutocompleteProps { + searchQuery: string; + onSnippetSelect: (snippet: Snippet, trigger: string) => void; + onClose: () => void; + style?: React.CSSProperties; +} + +function snippetPreview(snippet: Snippet): string { + return (snippet.description || snippet.content).replace(/\s+/g, ' ').trim().slice(0, 120); +} + +export const SnippetAutocomplete = React.forwardRef(({ + searchQuery, + onSnippetSelect, + onClose, + style, +}, ref) => { + const { t } = useI18n(); + const containerRef = React.useRef(null); + const [selectedIndex, setSelectedIndex] = React.useState(0); + const selectedIndexRef = React.useRef(0); + const [filteredSnippets, setFilteredSnippets] = React.useState([]); + const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]); + const snippets = useSnippetsStore((s) => s.snippets); + const loadSnippets = useSnippetsStore((s) => s.loadSnippets); + const setSnippetDraft = useSnippetsStore((s) => s.setSnippetDraft); + const setSelectedSnippet = useSnippetsStore((s) => s.setSelectedSnippet); + const setSettingsDialogOpen = useUIStore((s) => s.setSettingsDialogOpen); + const setSettingsPage = useUIStore((s) => s.setSettingsPage); + + React.useEffect(() => { + void loadSnippets(); + }, [loadSnippets]); + + React.useEffect(() => { + const query = searchQuery.trim(); + const matches = query.length + ? snippets.filter((snippet) => fuzzyMatch(snippet.name, query) || snippet.aliases.some((alias) => fuzzyMatch(alias, query))) + : snippets; + const sortedMatches = [...matches].sort((a, b) => { + if (a.source === 'project' && b.source !== 'project') return -1; + if (a.source !== 'project' && b.source === 'project') return 1; + return a.name.localeCompare(b.name); + }); + setFilteredSnippets(sortedMatches); + setSelectedIndex(sortedMatches.length ? 1 : 0); + }, [searchQuery, snippets]); + + React.useEffect(() => { + selectedIndexRef.current = selectedIndex; + itemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' }); + }, [selectedIndex]); + + React.useEffect(() => { + const handlePointerDown = (event: MouseEvent | TouchEvent) => { + const target = event.target as Node | null; + if (target && containerRef.current && !containerRef.current.contains(target)) onClose(); + }; + document.addEventListener('pointerdown', handlePointerDown, true); + return () => document.removeEventListener('pointerdown', handlePointerDown, true); + }, [onClose]); + + const chooseSnippet = React.useCallback((snippet: Snippet) => { + const query = searchQuery.trim(); + const trigger = snippet.aliases.includes(query) ? query : snippet.name; + onSnippetSelect(snippet, trigger); + }, [onSnippetSelect, searchQuery]); + + const openNewSnippetSettings = React.useCallback(() => { + const existing = new Set(snippets.map((snippet) => snippet.name)); + let name = 'new-snippet'; + let counter = 1; + while (existing.has(name)) { + name = `new-snippet-${counter++}`; + } + setSnippetDraft({ name, scope: 'global' }); + setSelectedSnippet(name); + setSettingsPage('snippets'); + setSettingsDialogOpen(true); + onClose(); + }, [onClose, setSelectedSnippet, setSettingsDialogOpen, setSettingsPage, setSnippetDraft, snippets]); + + React.useImperativeHandle(ref, () => ({ + handleKeyDown: (key: string) => { + if (key === 'Escape') { + onClose(); + return; + } + const itemCount = filteredSnippets.length + 1; + if (key === 'ArrowDown') { + setSelectedIndex((prev) => (prev + 1) % itemCount); + return; + } + if (key === 'ArrowUp') { + setSelectedIndex((prev) => (prev - 1 + itemCount) % itemCount); + return; + } + if (key === 'Enter' || key === 'Tab') { + if (selectedIndexRef.current === 0) { + openNewSnippetSettings(); + return; + } + const snippet = filteredSnippets[selectedIndexRef.current - 1]; + if (snippet) chooseSnippet(snippet); + } + }, + }), [chooseSnippet, filteredSnippets, onClose, openNewSnippetSettings]); + + return ( +
+ +
{ itemRefs.current[0] = el; }} + className={cn('flex items-center gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label', selectedIndex === 0 && 'bg-interactive-selection')} + onClick={openNewSnippetSettings} + onMouseMove={() => setSelectedIndex(0)} + > + + {t('chat.snippetAutocomplete.action.addNew')} +
+ {filteredSnippets.length ? filteredSnippets.map((snippet, index) => ( +
{ itemRefs.current[index + 1] = el; }} + className={cn('flex items-start gap-2 px-3 py-1.5 cursor-pointer rounded-lg typography-ui-label', index + 1 === selectedIndex && 'bg-interactive-selection')} + onClick={() => chooseSnippet(snippet)} + onMouseMove={() => setSelectedIndex(index + 1)} + > +
+
+ #{snippet.name} + {t(`snippets.source.${snippet.source}`)} +
+
{snippetPreview(snippet)}
+
+
+ )) : ( +
{t('chat.snippetAutocomplete.empty')}
+ )} + +
{t('chat.snippetAutocomplete.footer')}
+
+ ); +}); + +SnippetAutocomplete.displayName = 'SnippetAutocomplete'; diff --git a/packages/ui/src/components/icon/sprite.ts b/packages/ui/src/components/icon/sprite.ts index 862e545f..23387a55 100644 --- a/packages/ui/src/components/icon/sprite.ts +++ b/packages/ui/src/components/icon/sprite.ts @@ -1,7 +1,7 @@ // This file is auto-generated by scripts/generate-icon-sprite.mjs // Do not edit manually. Run the script to update. -export const iconSpriteData: Record = { +export const iconSpriteData = { "add-circle": ``, "add": ``, "ai-agent-fill": ``, @@ -44,6 +44,7 @@ export const iconSpriteData: Record = { "chat-ai-3": ``, "chat-history": ``, "chat-new": ``, + "chat-thread": ``, "check": ``, "checkbox-blank-circle-fill": ``, "checkbox-blank": ``, @@ -225,4 +226,4 @@ export const iconSpriteData: Record = { "voice-recognition": ``, "volume-up": ``, "window": ``, -}; +} as const satisfies Record; diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx index 23263c0e..f98a461e 100644 --- a/packages/ui/src/components/layout/Header.tsx +++ b/packages/ui/src/components/layout/Header.tsx @@ -35,7 +35,6 @@ import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay'; import { useDeviceInfo, useTabletStandalonePwaRuntime } from '@/lib/device'; import { cn, hasModifier } from '@/lib/utils'; import { McpDropdownContent } from '@/components/mcp/McpDropdown'; -import { McpIcon } from '@/components/icons/McpIcon'; import { ProviderLogo } from '@/components/ui/ProviderLogo'; import { formatQuotaValueLabel, formatQuotaResetLabel, formatWindowLabel, QUOTA_PROVIDERS, calculatePace, calculateExpectedUsagePercent } from '@/lib/quota'; import { UsageProgressBar } from '@/components/sections/usage/UsageProgressBar'; @@ -1533,7 +1532,7 @@ export const Header: React.FC = ({ } base.push( { value: 'usage', label: t('layout.services.usage'), icon: "timer" }, - { value: 'mcp', label: 'MCP', icon: McpIcon as unknown as IconName } + { value: 'mcp', label: 'MCP', icon: "plug-2" } ); return base; }, [isDesktopApp, t]); diff --git a/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx b/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx index f4802fab..b0e98355 100644 --- a/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx +++ b/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx @@ -113,6 +113,7 @@ export function MultiRunFusionDialog({ .map((candidate): FusionSource | null => { const candidateParsed = parseMultiRunSessionTitle(candidate.title); if (!candidateParsed || candidateParsed.groupSlug !== parsed.groupSlug || candidateParsed.fusion) return null; + if ((candidateParsed.runGroup ?? null) !== (parsed.runGroup ?? null)) return null; const directory = useSessionUIStore.getState().getDirectoryForSession(candidate.id) ?? resolveGlobalSessionDirectory(candidate); const projectDirectory = getSessionProjectDirectory(candidate.id, directory); @@ -154,7 +155,7 @@ export function MultiRunFusionDialog({ } const directory = sources[0]?.projectDirectory ?? sources[0]?.directory ?? null; - const fusionTitle = getFusionSessionTitle(parsed.groupSlug, providerID, modelID); + const fusionTitle = getFusionSessionTitle(parsed.groupSlug, providerID, modelID, parsed.runGroup); const [visiblePrompt, instructionsPrompt] = await Promise.all([ renderMagicPrompt('session.fusion.visible'), renderMagicPrompt('session.fusion.instructions'), diff --git a/packages/ui/src/components/multirun/MultiRunLauncher.tsx b/packages/ui/src/components/multirun/MultiRunLauncher.tsx index 776f339c..8a5ddefc 100644 --- a/packages/ui/src/components/multirun/MultiRunLauncher.tsx +++ b/packages/ui/src/components/multirun/MultiRunLauncher.tsx @@ -13,13 +13,15 @@ import { useDirectoryStore } from '@/stores/useDirectoryStore'; import { useMultiRunStore } from '@/stores/useMultiRunStore'; import { useSessionUIStore } from '@/sync/session-ui-store'; import { useProjectsStore } from '@/stores/useProjectsStore'; -import { usePromptTemplatesStore } from '@/stores/usePromptTemplatesStore'; import { getWorktreeSetupCommands } from '@/lib/openchamberConfig'; import type { ProjectRef } from '@/lib/openchamberConfig'; import type { CreateMultiRunParams, MultiRunGroup } from '@/types/multirun'; import { ModelMultiSelect, generateInstanceId, type ModelSelectionWithId } from './ModelMultiSelect'; import { BranchSelector, useBranchOptions } from './BranchSelector'; import { AgentSelector } from './AgentSelector'; +import { CommandAutocomplete, type CommandAutocompleteHandle, type CommandInfo } from '@/components/chat/CommandAutocomplete'; +import { FileMentionAutocomplete, type FileMentionHandle } from '@/components/chat/FileMentionAutocomplete'; +import { SnippetAutocomplete, type SnippetAutocompleteHandle } from '@/components/chat/SnippetAutocomplete'; import { Icon } from "@/components/icon/Icon"; import { isDesktopShell } from '@/lib/desktop'; import { useTabletStandalonePwaRuntime } from '@/lib/device'; @@ -42,7 +44,6 @@ interface MultiRunAttachedFile { interface RunGroupState { id: string; - templateId: string; prompt: string; models: ModelSelectionWithId[]; } @@ -91,7 +92,7 @@ export const MultiRunLauncher: React.FC = ({ const { t } = useI18n(); const [name, setName] = React.useState(''); const [runGroups, setRunGroups] = React.useState(() => [ - { id: generateInstanceId(), templateId: '', prompt: '', models: [] }, + { id: generateInstanceId(), prompt: '', models: [] }, ]); const [selectedAgent, setSelectedAgent] = React.useState(''); const [attachedFiles, setAttachedFiles] = React.useState([]); @@ -102,12 +103,6 @@ export const MultiRunLauncher: React.FC = ({ const [isolateRuns, setIsolateRuns] = React.useState(true); const fileInputRef = React.useRef(null); - const templates = usePromptTemplatesStore((s) => s.templates); - - React.useEffect(() => { - usePromptTemplatesStore.getState().loadTemplates(); - }, []); - const currentDirectory = useDirectoryStore((state) => state.currentDirectory ?? null); const homeDirectory = useDirectoryStore((state) => state.homeDirectory ?? null); @@ -304,17 +299,9 @@ export const MultiRunLauncher: React.FC = ({ }, []); const addGroup = React.useCallback(() => { - setRunGroups((prev) => [...prev, { id: generateInstanceId(), templateId: '', prompt: '', models: [] }]); + setRunGroups((prev) => [...prev, { id: generateInstanceId(), prompt: '', models: [] }]); }, []); - const handleTemplateChange = React.useCallback((groupId: string, templateId: string) => { - const template = templateId ? templates.find((t) => t.id === templateId) : null; - updateGroup(groupId, { - templateId, - prompt: template ? template.body : '', - }); - }, [templates, updateGroup]); - const handleFileSelect = async (e: React.ChangeEvent) => { const files = e.target.files; if (!files) return; @@ -390,7 +377,6 @@ export const MultiRunLauncher: React.FC = ({ const groups: MultiRunGroup[] = validGroups.map((g) => ({ prompt: g.prompt.trim(), models: g.models.map((m) => ({ providerID: m.providerID, modelID: m.modelID, displayName: m.displayName, variant: m.variant })), - templateId: g.templateId || undefined, })); const params: CreateMultiRunParams = { @@ -646,11 +632,9 @@ export const MultiRunLauncher: React.FC = ({ key={group.id} group={group} groupIndex={groupIndex} - templates={templates} canRemove={runGroups.length > 1} onUpdate={updateGroup} onRemove={removeGroup} - onTemplateChange={handleTemplateChange} /> ))} @@ -712,23 +696,29 @@ export const MultiRunLauncher: React.FC = ({ interface RunGroupCardProps { group: RunGroupState; groupIndex: number; - templates: { id: string; name: string; body: string; isDefault: boolean }[]; canRemove: boolean; onUpdate: (groupId: string, updates: Partial) => void; onRemove: (groupId: string) => void; - onTemplateChange: (groupId: string, templateId: string) => void; } const RunGroupCard: React.FC = ({ group, groupIndex, - templates, canRemove, onUpdate, onRemove, - onTemplateChange, }) => { const { t } = useI18n(); + const [showFileMention, setShowFileMention] = React.useState(false); + const [mentionQuery, setMentionQuery] = React.useState(''); + const [showCommandAutocomplete, setShowCommandAutocomplete] = React.useState(false); + const [commandQuery, setCommandQuery] = React.useState(''); + const [showSnippetAutocomplete, setShowSnippetAutocomplete] = React.useState(false); + const [snippetQuery, setSnippetQuery] = React.useState(''); + const promptTextareaRef = React.useRef(null); + const mentionRef = React.useRef(null); + const commandRef = React.useRef(null); + const snippetRef = React.useRef(null); const handleAddModel = React.useCallback((model: ModelSelectionWithId) => { if (group.models.length >= MAX_MODELS_PER_GROUP) return; @@ -743,6 +733,182 @@ const RunGroupCard: React.FC = ({ onUpdate(group.id, { models: group.models.map((item, i) => (i === index ? model : item)) }); }, [group.id, group.models, onUpdate]); + const updateAutocompleteState = React.useCallback((value: string, cursorPosition: number) => { + if (value.startsWith('/')) { + const firstSpace = value.indexOf(' '); + const firstNewline = value.indexOf('\n'); + const commandEnd = Math.min( + firstSpace === -1 ? value.length : firstSpace, + firstNewline === -1 ? value.length : firstNewline, + ); + + if (cursorPosition <= commandEnd && firstSpace === -1) { + setCommandQuery(value.substring(1, commandEnd)); + setShowCommandAutocomplete(true); + setShowFileMention(false); + setShowSnippetAutocomplete(false); + return; + } + } + + setShowCommandAutocomplete(false); + + const textBeforeCursor = value.substring(0, cursorPosition); + const lastHashSymbol = textBeforeCursor.lastIndexOf('#'); + if (lastHashSymbol !== -1) { + const charBefore = lastHashSymbol > 0 ? textBeforeCursor[lastHashSymbol - 1] : null; + const textAfterHash = textBeforeCursor.substring(lastHashSymbol + 1); + const isWordBoundary = !charBefore || /\s/.test(charBefore); + if (isWordBoundary && !textAfterHash.includes(' ') && !textAfterHash.includes('\n')) { + setSnippetQuery(textAfterHash); + setShowSnippetAutocomplete(true); + setShowFileMention(false); + return; + } + } + + setShowSnippetAutocomplete(false); + + const lastAtSymbol = textBeforeCursor.lastIndexOf('@'); + if (lastAtSymbol !== -1) { + const charBefore = lastAtSymbol > 0 ? textBeforeCursor[lastAtSymbol - 1] : null; + const textAfterAt = textBeforeCursor.substring(lastAtSymbol + 1); + const isWordBoundary = !charBefore || /\s/.test(charBefore); + if (isWordBoundary && !textAfterAt.includes(' ') && !textAfterAt.includes('\n')) { + setMentionQuery(textAfterAt); + setShowFileMention(true); + } else { + setShowFileMention(false); + } + return; + } + + setShowFileMention(false); + }, []); + + const setPrompt = React.useCallback((value: string) => { + onUpdate(group.id, { prompt: value }); + }, [group.id, onUpdate]); + + const handleFileSelect = React.useCallback((file: { name: string; path: string; relativePath?: string }) => { + const prompt = group.prompt; + const textarea = promptTextareaRef.current; + const cursorPosition = textarea?.selectionStart ?? prompt.length; + const textBeforeCursor = prompt.substring(0, cursorPosition); + const lastAtSymbol = textBeforeCursor.lastIndexOf('@'); + const mentionPath = (file.relativePath && file.relativePath.trim().length > 0) + ? file.relativePath.trim() + : (file.path || file.name); + + const startIndex = lastAtSymbol !== -1 ? lastAtSymbol : cursorPosition; + const nextPrompt = `${prompt.substring(0, startIndex)}@${mentionPath} ${prompt.substring(cursorPosition)}`; + const nextCursor = startIndex + mentionPath.length + 2; + + setPrompt(nextPrompt); + setShowFileMention(false); + setMentionQuery(''); + + requestAnimationFrame(() => { + const currentTextarea = promptTextareaRef.current; + if (currentTextarea) { + currentTextarea.selectionStart = nextCursor; + currentTextarea.selectionEnd = nextCursor; + currentTextarea.focus(); + } + updateAutocompleteState(nextPrompt, nextCursor); + }); + }, [group.prompt, setPrompt, updateAutocompleteState]); + + const handleAgentSelect = React.useCallback((agentName: string) => { + const prompt = group.prompt; + const textarea = promptTextareaRef.current; + const cursorPosition = textarea?.selectionStart ?? prompt.length; + const textBeforeCursor = prompt.substring(0, cursorPosition); + const lastAtSymbol = textBeforeCursor.lastIndexOf('@'); + const startIndex = lastAtSymbol !== -1 ? lastAtSymbol : cursorPosition; + const nextPrompt = `${prompt.substring(0, startIndex)}@${agentName} ${prompt.substring(cursorPosition)}`; + const nextCursor = startIndex + agentName.length + 2; + + setPrompt(nextPrompt); + setShowFileMention(false); + setMentionQuery(''); + + requestAnimationFrame(() => { + const currentTextarea = promptTextareaRef.current; + if (currentTextarea) { + currentTextarea.selectionStart = nextCursor; + currentTextarea.selectionEnd = nextCursor; + currentTextarea.focus(); + } + updateAutocompleteState(nextPrompt, nextCursor); + }); + }, [group.prompt, setPrompt, updateAutocompleteState]); + + const handleCommandSelect = React.useCallback((command: CommandInfo) => { + const nextPrompt = `/${command.name} `; + setPrompt(nextPrompt); + setShowCommandAutocomplete(false); + setCommandQuery(''); + setShowSnippetAutocomplete(false); + + requestAnimationFrame(() => { + const currentTextarea = promptTextareaRef.current; + if (currentTextarea) { + currentTextarea.focus(); + currentTextarea.selectionStart = currentTextarea.value.length; + currentTextarea.selectionEnd = currentTextarea.value.length; + } + updateAutocompleteState(nextPrompt, nextPrompt.length); + }); + }, [setPrompt, updateAutocompleteState]); + + const handleSnippetSelect = React.useCallback((_snippet: unknown, trigger: string) => { + const prompt = group.prompt; + const textarea = promptTextareaRef.current; + const cursorPosition = textarea?.selectionStart ?? prompt.length; + const textBeforeCursor = prompt.substring(0, cursorPosition); + const lastHashSymbol = textBeforeCursor.lastIndexOf('#'); + const startIndex = lastHashSymbol !== -1 ? lastHashSymbol : cursorPosition; + const nextPrompt = `${prompt.substring(0, startIndex)}#${trigger} ${prompt.substring(cursorPosition)}`; + const nextCursor = startIndex + trigger.length + 2; + setPrompt(nextPrompt); + setShowSnippetAutocomplete(false); + setSnippetQuery(''); + requestAnimationFrame(() => { + const currentTextarea = promptTextareaRef.current; + if (currentTextarea) { + currentTextarea.selectionStart = nextCursor; + currentTextarea.selectionEnd = nextCursor; + currentTextarea.focus(); + } + updateAutocompleteState(nextPrompt, nextCursor); + }); + }, [group.prompt, setPrompt, updateAutocompleteState]); + + const handlePromptKeyDown = React.useCallback((event: React.KeyboardEvent) => { + if (showCommandAutocomplete && commandRef.current) { + if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Escape' || event.key === 'Tab') { + event.preventDefault(); + commandRef.current.handleKeyDown(event.key); + return; + } + } + + if (showFileMention && mentionRef.current) { + if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Escape' || event.key === 'Tab') { + event.preventDefault(); + mentionRef.current.handleKeyDown(event.key); + } + } + + if (showSnippetAutocomplete && snippetRef.current) { + if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Escape' || event.key === 'Tab') { + event.preventDefault(); + snippetRef.current.handleKeyDown(event.key); + } + } + }, [showCommandAutocomplete, showFileMention, showSnippetAutocomplete]); + return (
@@ -761,33 +927,55 @@ const RunGroupCard: React.FC = ({ )}
-
- {t('multirun.launcher.groups.template.label')} - -
-
{t('multirun.launcher.groups.prompt.label')} -