diff --git a/packages/kilo-docs/components/SideNav.tsx b/packages/kilo-docs/components/SideNav.tsx index ca3b7cef086..3fc56c31de7 100644 --- a/packages/kilo-docs/components/SideNav.tsx +++ b/packages/kilo-docs/components/SideNav.tsx @@ -51,6 +51,12 @@ const ChevronRight = () => ( ) +const ChevronDown = () => ( + + + +) + const ChevronLeft = () => ( (currentSection) + // Track which nav items are expanded (for nested navigation) + const [expandedItems, setExpandedItems] = useState>(new Set()) + // Update view when route changes useEffect(() => { const newSection = getCurrentSection(router.pathname) @@ -89,6 +98,26 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) { } }, [router.pathname]) + // Auto-expand parent items when their child is active or when the parent itself is active + useEffect(() => { + const sectionItems = viewedSection ? sectionNavItems[viewedSection] || [] : [] + const newExpandedItems = new Set() + + sectionItems.forEach((group) => { + group.links.forEach((link) => { + if (link.subLinks) { + const hasActiveChild = link.subLinks.some((subLink) => router.pathname === subLink.href) + const isParentActive = router.pathname === link.href + if (hasActiveChild || isParentActive) { + newExpandedItems.add(link.href) + } + } + }) + }) + + setExpandedItems(newExpandedItems) + }, [router.pathname, viewedSection]) + const handleLinkClick = () => { if (onMobileClose) { onMobileClose() @@ -106,6 +135,18 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) { setActiveView("main") } + const toggleExpanded = (href: string) => { + setExpandedItems((prev) => { + const newSet = new Set(prev) + if (newSet.has(href)) { + newSet.delete(href) + } else { + newSet.add(href) + } + return newSet + }) + } + const sectionItems = viewedSection ? sectionNavItems[viewedSection] || [] : [] const sectionLabel = viewedSection ? getSectionLabel(viewedSection) : "" @@ -119,6 +160,7 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) { if (hasSubItems) { return (
- +
+ {isExpanded && ( + + )} + + ) : ( + + {link.children} + + )} ) })} @@ -315,7 +403,82 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) { color: var(--text-color); } - .nav-links li.active :global(a) { + .nav-links li.active > :global(a), + .nav-links li.active > :global(.nav-item-with-toggle) > :global(a) { + background-color: var(--bg-secondary); + color: var(--accent-color); + font-weight: 500; + } + + /* Nested navigation styles */ + .nav-links li.has-children { + margin: 0; + } + + .nav-links :global(.nav-item-with-toggle) { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.25rem; + } + + .nav-links :global(.nav-item-with-toggle a) { + flex: 1; + padding-right: 0.25rem; + } + + .nav-links :global(.toggle-button) { + display: flex; + align-items: center; + justify-content: center; + padding: 0.375rem; + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + border-radius: 0.25rem; + transition: + background-color 0.15s ease, + color 0.15s ease; + flex-shrink: 0; + } + + .nav-links :global(.toggle-button:hover) { + background-color: var(--bg-secondary); + color: var(--text-color); + } + + .nav-links :global(.sub-links) { + padding: 0; + margin: 0.25rem 0 0.5rem 0; + border-left: 2px solid var(--accent-color); + margin-left: 0.75rem; + } + + .nav-links :global(.sub-links li) { + list-style: none; + margin: 0; + } + + .nav-links :global(.sub-links a) { + display: block; + padding: 0.375rem 0.75rem; + padding-left: 1rem; + font-size: 0.8125rem; + text-decoration: none; + color: var(--text-secondary); + border-radius: 0 0.375rem 0.375rem 0; + transition: + background-color 0.15s ease, + color 0.15s ease; + } + + .nav-links :global(.sub-links a:hover) { + background-color: var(--bg-secondary); + color: var(--text-color); + } + + .nav-links :global(.sub-links li.active a) { background-color: var(--bg-secondary); color: var(--accent-color); font-weight: 500; diff --git a/packages/kilo-docs/lib/nav/code-with-ai.ts b/packages/kilo-docs/lib/nav/code-with-ai.ts index 20b7ad9fe84..d1e22870036 100644 --- a/packages/kilo-docs/lib/nav/code-with-ai.ts +++ b/packages/kilo-docs/lib/nav/code-with-ai.ts @@ -46,7 +46,11 @@ export const CodeWithAiNav: NavSection[] = [ { title: "Features", links: [ - { href: "/code-with-ai/features/autocomplete", children: "Autocomplete" }, + { + href: "/code-with-ai/features/autocomplete", + children: "Autocomplete", + subLinks: [{ href: "/code-with-ai/features/autocomplete/mistral-setup", children: "Mistral Setup" }], + }, { href: "/code-with-ai/features/code-actions", children: "Code Actions" }, { href: "/code-with-ai/features/browser-use", children: "Browser Use" }, { @@ -63,6 +67,7 @@ export const CodeWithAiNav: NavSection[] = [ href: "/code-with-ai/features/task-todo-list", children: "Task Todo List", }, + { href: "/code-with-ai/features/speech-to-text", children: "Voice Transcription" }, ], }, ] diff --git a/packages/kilo-docs/lib/types.ts b/packages/kilo-docs/lib/types.ts index 505e26caca8..fdcb0bd27d8 100644 --- a/packages/kilo-docs/lib/types.ts +++ b/packages/kilo-docs/lib/types.ts @@ -1,6 +1,7 @@ export interface NavLink { href: string children: string + subLinks?: NavLink[] // Optional nested links for second-level navigation } export interface NavSection { diff --git a/packages/kilo-docs/mappingplan.md b/packages/kilo-docs/mappingplan.md index 45ada725e6c..8ab5f745aaf 100644 --- a/packages/kilo-docs/mappingplan.md +++ b/packages/kilo-docs/mappingplan.md @@ -163,18 +163,17 @@ ## Pages to Remove from Nav / Condense -| Page | Recommendation | -| --------------------------------------------- | -------------------------------------------------------- | -| `features/system-notifications` | Fold into Settings or remove | -| `features/more-features` | This is a red flag - break out or remove | -| `features/suggested-responses` | Fold into Chat Interface | -| `features/auto-approving-actions` | Fold into Settings | -| `advanced-usage/auto-cleanup` | Fold into Settings | -| `features/model-temperature` | Fold into Model Selection | -| `advanced-usage/rate-limits-costs` | Fold into Adding Credits or AI Providers | -| `features/footgun-prompting` | Remove | -| `tips-and-tricks` | Could become a blog post or fold relevant bits elsewhere | -| `features/experimental/experimental-features` | Keep but maybe as a single page, not a section | +| Page | Recommendation | +| ---------------------------------- | -------------------------------------------------------- | +| `features/system-notifications` | Fold into Settings or remove | +| `features/more-features` | This is a red flag - break out or remove | +| `features/suggested-responses` | Fold into Chat Interface | +| `features/auto-approving-actions` | Fold into Settings | +| `advanced-usage/auto-cleanup` | Fold into Settings | +| `features/model-temperature` | Fold into Model Selection | +| `advanced-usage/rate-limits-costs` | Fold into Adding Credits or AI Providers | +| `features/footgun-prompting` | Remove | +| `tips-and-tricks` | Could become a blog post or fold relevant bits elsewhere | --- diff --git a/packages/kilo-docs/pages/code-with-ai/features/speech-to-text.md b/packages/kilo-docs/pages/code-with-ai/features/speech-to-text.md new file mode 100644 index 00000000000..0f82886d335 --- /dev/null +++ b/packages/kilo-docs/pages/code-with-ai/features/speech-to-text.md @@ -0,0 +1,90 @@ +--- +title: Voice Transcription +description: Kilo Code now includes experimental support for voice input in the chat interface. +--- + +# Voice Transcription + +{% callout type="warning" title="đŸ§ª Experimental Feature" %} +Voice Transcription / speech-to-text (STT) is currently in experimental status. Expect potential issues and changes as the feature matures. +{% /callout %} + +Kilo Code now includes experimental support for voice input in the chat interface. This feature allows you to dictate your messages using speech-to-text (STT) technology powered by OpenAI's Whisper API. + +## Prerequisites + +Voice transcription requires two components to be set up: + +### 1. FFmpeg Installation + +FFmpeg is required for audio capture and processing. Install it for your platform: + +**macOS:** + +```bash +brew install ffmpeg +``` + +**Linux (Ubuntu/Debian):** + +```bash +sudo apt update +sudo apt install ffmpeg +``` + +**Windows:** +Download from [ffmpeg.org/download.html](https://ffmpeg.org/download.html) and add to your system PATH. + +### 2. OpenAI API Key + +Voice transcription uses OpenAI's Whisper API for speech recognition. You need an OpenAI API configuration in Kilo Code: + +1. Configure an OpenAI provider profile in Kilo Code settings +2. Add your OpenAI API key to the profile +3. Either **OpenAI** or **OpenAI Native** provider types will work + +## Enabling Voice Transcription + +Voice transcription is an experimental feature that must be enabled: + +1. Open Kilo Code settings +2. Navigate to **Experimental Features** +3. Enable the **Speech to Text** experiment + +## Using Voice Input + +Once configured and enabled, a microphone button will appear in the chat input area: + +1. Click the microphone button to start recording +2. Speak your message clearly +3. Click again to stop recording +4. Your speech will be automatically transcribed into text + +The feature includes real-time audio level visualization and voice activity detection to automatically detect when you're speaking. + +## Technical Details + +- **Audio Processing**: Uses FFmpeg for system audio capture +- **Voice Recognition**: OpenAI Whisper API for transcription + +## Troubleshooting + +**Microphone button not appearing:** + +- Ensure the Speech to Text experiment is enabled +- Verify FFmpeg is installed and in your PATH +- Check that you have an OpenAI provider configured with a valid API key + +**Transcription errors:** + +- Verify your OpenAI API key is valid and has available credits +- Check your internet connection +- Try speaking more clearly or adjusting your microphone settings + +## Limitations + +This feature is currently experimental and may have limitations: + +- Requires active internet connection +- Uses OpenAI API credits based on audio duration +- Transcription accuracy depends on audio quality and speech clarity diff --git a/packages/kilo-docs/pages/customize/custom-modes.md b/packages/kilo-docs/pages/customize/custom-modes.md index 4e3aeb0fa7e..97d8211985a 100644 --- a/packages/kilo-docs/pages/customize/custom-modes.md +++ b/packages/kilo-docs/pages/customize/custom-modes.md @@ -36,6 +36,12 @@ Custom modes are defined by several key properties. Understanding these concepts | **When to Use** (`whenToUse`) | _(Optional)_ Provides guidance for Kilo's automated decision-making, particularly for mode selection and task orchestration. Used by the Orchestrator mode for task coordination. | | **Custom Instructions** (`customInstructions`) | _(Optional)_ Specific behavioral guidelines or rules for the mode. Added near the end of the system prompt to further refine Kilo's behavior. | +{% callout type="tip" %} +**Power Steering for Better Mode Adherence** + +If you find that models aren't following your custom mode's role definition or instructions closely enough, enable the [Power Steering](/docs/getting-started/settings#power-steering) experimental feature. This reminds the model about mode details more frequently, leading to stronger adherence to your custom configurations at the cost of increased token usage. +{% /callout %} + ## Import/Export Modes Easily share, back up, and template your custom modes. This feature lets you export any mode—and its associated rules—into a single, portable YAML file that you can import into any project. diff --git a/packages/kilo-docs/pages/getting-started/settings.md b/packages/kilo-docs/pages/getting-started/settings.md index 5a621fc0366..50e72356364 100644 --- a/packages/kilo-docs/pages/getting-started/settings.md +++ b/packages/kilo-docs/pages/getting-started/settings.md @@ -59,3 +59,37 @@ Clicking the **Reset** button completely clears all Kilo Code configuration data - **Result:** Kilo Code returns to its initial state, as if freshly installed, with default settings and no user configurations. Use this option only if you are certain you want to remove all Kilo Code data or if instructed during troubleshooting. Consider exporting your settings first if you might want to restore them later. + +## Experimental Features + +{% callout type="info" %} +These features are experimental and may change in future releases. They provide advanced control over Kilo Code's behavior for specific use cases. +{% /callout %} + +### Concurrent File Edits + +When enabled, Kilo Code can edit multiple files in a single request. When disabled, Kilo Code must edit one file at a time. + +**When to disable:** + +- Working with less capable models that struggle with complex multi-file operations +- You want more granular control over file modifications +- Debugging issues with file editing behavior + +**Default:** Enabled + +### Power Steering + +When enabled, Kilo Code will remind the model about the details of its current mode definition more frequently. This leads to stronger adherence to role definitions and custom instructions, but will use more tokens per message. + +**When to enable:** + +- Working with custom modes that have specific role definitions +- You need stricter adherence to custom instructions +- The model is deviating from the intended mode behavior + +**Trade-off:** Increased token usage per message in exchange for better mode adherence. + +**Default:** Disabled + +Learn more about [Custom Modes](/docs/customize/custom-modes) and how Power Steering can improve mode behavior.