mirror of
https://github.com/Kilo-Org/kilocode.git
synced 2026-09-24 16:02:55 +08:00
Add back missing docs (#5573)
* Add native tool calling an speech to text to docs * Add mistral setup to nav * Update apps/kilocode-docs/pages/code-with-ai/features/speech-to-text.md Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com> * Update apps/kilocode-docs/pages/automate/native-function-calling.md Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com> * Update apps/kilocode-docs/pages/automate/native-function-calling.md Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com> * remove experiment notes * Two last experimental features added * RCU for experimental * update mapping plan * Solve for too many sublinks * Delete native tool calling as it is on by default and can't be changed --------- Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
This commit is contained in:
Brendan O'Leary
committed by
GitHub
GitHub
co-authored by
kiloconnect[bot]
kiloconnect[bot]
parent
019721ab6f
commit
5e366abdad
@@ -51,6 +51,12 @@ const ChevronRight = () => (
|
||||
</svg>
|
||||
)
|
||||
|
||||
const ChevronDown = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
|
||||
<path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const ChevronLeft = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
|
||||
<path
|
||||
@@ -78,6 +84,9 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) {
|
||||
// Track which section is being viewed (for animation purposes)
|
||||
const [viewedSection, setViewedSection] = useState<string | null>(currentSection)
|
||||
|
||||
// Track which nav items are expanded (for nested navigation)
|
||||
const [expandedItems, setExpandedItems] = useState<Set<string>>(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<string>()
|
||||
|
||||
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 (
|
||||
<button
|
||||
type="button"
|
||||
key={item.href}
|
||||
onClick={() => handleSectionClick(item.sectionKey)}
|
||||
className={`nav-item nav-item-button ${isActive ? "active" : ""}`}>
|
||||
@@ -200,7 +242,7 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) {
|
||||
// Section navigation panel
|
||||
const sectionNavPanel = (
|
||||
<div className="nav-panel section-panel">
|
||||
<button className="back-button mobile-only" onClick={handleBackClick}>
|
||||
<button type="button" className="back-button mobile-only" onClick={handleBackClick}>
|
||||
<span className="back-arrow">
|
||||
<ChevronLeft />
|
||||
</span>
|
||||
@@ -213,12 +255,58 @@ export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) {
|
||||
<span className="nav-group-title">{group.title}</span>
|
||||
<ul className="nav-links">
|
||||
{group.links.map((link) => {
|
||||
const active = router.pathname === link.href
|
||||
const hasSubLinks = link.subLinks && link.subLinks.length > 0
|
||||
const isExpanded = expandedItems.has(link.href)
|
||||
const hasActiveChild = link.subLinks?.some(
|
||||
(subLink) => router.pathname === subLink.href,
|
||||
)
|
||||
// Parent should only be active if it's the current page AND it has no active children
|
||||
const active = router.pathname === link.href && !hasActiveChild
|
||||
|
||||
return (
|
||||
<li key={link.href} className={active ? "active" : ""}>
|
||||
<Link href={link.href} onClick={handleLinkClick}>
|
||||
{link.children}
|
||||
</Link>
|
||||
<li
|
||||
key={link.href}
|
||||
className={`${active ? "active" : ""} ${hasSubLinks ? "has-children" : ""}`}>
|
||||
{hasSubLinks ? (
|
||||
<>
|
||||
<div className="nav-item-with-toggle">
|
||||
<Link href={link.href} onClick={handleLinkClick}>
|
||||
{link.children}
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="toggle-button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
toggleExpanded(link.href)
|
||||
}}
|
||||
aria-label={isExpanded ? "Collapse" : "Expand"}>
|
||||
{isExpanded ? <ChevronDown /> : <ChevronRight />}
|
||||
</button>
|
||||
</div>
|
||||
{isExpanded && (
|
||||
<ul className="sub-links">
|
||||
{link.subLinks.map((subLink) => {
|
||||
// Only mark sublink as active if it's an exact match
|
||||
const subActive = router.pathname === subLink.href
|
||||
return (
|
||||
<li
|
||||
key={subLink.href}
|
||||
className={subActive ? "active" : ""}>
|
||||
<Link href={subLink.href} onClick={handleLinkClick}>
|
||||
{subLink.children}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Link href={link.href} onClick={handleLinkClick}>
|
||||
{link.children}
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
@@ -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;
|
||||
|
||||
@@ -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" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export interface NavLink {
|
||||
href: string
|
||||
children: string
|
||||
subLinks?: NavLink[] // Optional nested links for second-level navigation
|
||||
}
|
||||
|
||||
export interface NavSection {
|
||||
|
||||
@@ -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 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user