feat(tour): use icon descriptions matching actual UI elements

Update input area tour step to describe each icon with visual hints that
match the actual Lucide icons used in the input area. Also update
TourStep component to properly render newlines as line breaks so the
bulleted list of icons displays correctly.

Icons now described:
- Pencil (✎) for expanded prompt editor
- Image (🖼) for file attachments
- History (⏱) for session history toggle
- Eye (👁) for read-only mode
- Brain (🧠) for extended thinking
- Keyboard (⌨) for submit hotkey toggle
This commit is contained in:
Pedram Amini
2026-02-01 14:12:48 -05:00
parent 02f86bcff4
commit 9028120a2e
2 changed files with 9 additions and 4 deletions

View File

@@ -328,9 +328,14 @@ export function TourStep({
{step.title}
</h3>
{/* Description */}
{/* Description - render newlines as line breaks */}
<p className="text-sm leading-relaxed mb-5" style={{ color: theme.colors.textDim }}>
{description}
{description.split('\n').map((line, i, arr) => (
<span key={i}>
{line}
{i < arr.length - 1 && <br />}
</span>
))}
</p>
{/* Navigation buttons */}

View File

@@ -127,9 +127,9 @@ export const tourSteps: TourStepConfig[] = [
id: 'input-area',
title: 'Input Area',
description:
'Type your messages here to communicate with the AI. During Auto Run, this area may be locked while tasks execute. You can queue messages to send after the current task completes.\n\n**Features:** Use the ✏️ pencil icon for an expanded prompt editor, paste images or click the 🖼️ image icon to attach files, and toggle ⏱️ History, 👁️ Read-Only, and 🧠 Thinking modes per-message. You can also change the submission hotkey (Enter vs Shift+Enter). Defaults for these toggles can be changed in Settings → General.\n\nPress {{focusInput}} to quickly jump here.',
'Type your messages here to communicate with the AI. During Auto Run, this area may be locked while tasks execute. You can queue messages to send after the current task completes.\n\nLook for these icons in the input area:\n• Pencil (✎) - Open expanded prompt editor\n• Image (🖼) - Attach files or paste images\n• History (⏱) - Toggle saving to session history\n• Eye (👁) - Toggle read-only mode\n• Brain (🧠) - Toggle extended thinking\n• Keyboard (⌨) - Switch submit hotkey (Enter/⌘Enter)\n\nDefaults for these toggles can be changed in Settings → General.\n\nPress {{focusInput}} to quickly jump here.',
descriptionGeneric:
'Type your messages here to communicate with the AI. You can also use slash commands and @ mentions for files.\n\n**Features:** Use the ✏️ pencil icon for an expanded prompt editor, paste images or click the 🖼️ image icon to attach files, and toggle ⏱️ History, 👁️ Read-Only, and 🧠 Thinking modes per-message. You can also change the submission hotkey (Enter vs Shift+Enter). Defaults for these toggles can be changed in Settings → General.\n\nPress {{focusInput}} to quickly jump here.',
'Type your messages here to communicate with the AI. You can also use slash commands and @ mentions for files.\n\nLook for these icons in the input area:\n• Pencil (✎) - Open expanded prompt editor\n• Image (🖼) - Attach files or paste images\n• History (⏱) - Toggle saving to session history\n• Eye (👁) - Toggle read-only mode\n• Brain (🧠) - Toggle extended thinking\n• Keyboard (⌨) - Switch submit hotkey (Enter/⌘Enter)\n\nDefaults for these toggles can be changed in Settings → General.\n\nPress {{focusInput}} to quickly jump here.',
selector: '[data-tour="input-area"]',
position: 'top',
uiActions: [],