522 lines
13 KiB
Markdown
522 lines
13 KiB
Markdown
# Expand Chat Input Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Add an expand/minimize button to the chat input section that allows users to expand the textarea to 50% or 80% of the chat window height with single/double-click, maintaining Gemini-like UX.
|
|
|
|
**Architecture:** Add a new state signal `expandState` to track 3 states (normal/50%/80%), create an `ExpandButton` component positioned alongside history buttons, calculate dynamic heights based on parent container, apply smooth CSS transitions, and add comprehensive hover tooltips explaining both click behaviors.
|
|
|
|
**Tech Stack:** SolidJS (signals/effects), lucide-solid icons (Maximize2/Minimize2), CSS transitions, existing button styling patterns from prompt-input.css
|
|
|
|
---
|
|
|
|
## Task 1: Add expand state signal and types
|
|
|
|
**Files:**
|
|
- Modify: `packages/ui/src/components/prompt-input.tsx:33-52`
|
|
|
|
**Step 1: Understand current state structure**
|
|
|
|
Read lines 33-52 to see how signals like `prompt`, `mode`, `showPicker` are created.
|
|
|
|
Expected: See `createSignal` patterns for boolean and string states.
|
|
|
|
**Step 2: Add expand state signal after line 47**
|
|
|
|
In `packages/ui/src/components/prompt-input.tsx`, after line 47 (`const [mode, setMode] = createSignal<"normal" | "shell">("normal")`), add:
|
|
|
|
```typescript
|
|
const [expandState, setExpandState] = createSignal<"normal" | "fifty" | "eighty">("normal")
|
|
```
|
|
|
|
**Step 3: Add height calculation memos after line 58**
|
|
|
|
Add these utility functions right after the signal definitions (before the createEffect on line 59):
|
|
|
|
```typescript
|
|
const calculateContainerHeight = () => {
|
|
if (!containerRef) return 0
|
|
const rect = containerRef.getBoundingClientRect()
|
|
const root = containerRef.closest(".session-view")
|
|
if (!root) return 0
|
|
const rootRect = root.getBoundingClientRect()
|
|
return rootRect.height - rect.top
|
|
}
|
|
|
|
const getExpandedHeight = (): string => {
|
|
const state = expandState()
|
|
if (state === "normal") return "auto"
|
|
const containerHeight = calculateContainerHeight()
|
|
if (state === "fifty") return `${containerHeight * 0.5}px`
|
|
return `${containerHeight * 0.8}px`
|
|
}
|
|
```
|
|
|
|
**Step 4: Verify no syntax errors**
|
|
|
|
Run in terminal:
|
|
```bash
|
|
cd packages/ui && npm run type-check
|
|
```
|
|
|
|
Expected: No TypeScript errors in prompt-input.tsx.
|
|
|
|
**Step 5: Commit**
|
|
|
|
```bash
|
|
git add packages/ui/src/components/prompt-input.tsx
|
|
git commit -m "feat: add expand state signal and height calculation helpers"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 2: Create ExpandButton component
|
|
|
|
**Files:**
|
|
- Create: `packages/ui/src/components/expand-button.tsx`
|
|
|
|
**Step 1: Create the component file**
|
|
|
|
Create `packages/ui/src/components/expand-button.tsx` with this content:
|
|
|
|
```typescript
|
|
import { createSignal, Show } from "solid-js"
|
|
import { Maximize2, Minimize2 } from "lucide-solid"
|
|
|
|
interface ExpandButtonProps {
|
|
expandState: () => "normal" | "fifty" | "eighty"
|
|
onToggleExpand: (nextState: "normal" | "fifty" | "eighty") => void
|
|
}
|
|
|
|
export default function ExpandButton(props: ExpandButtonProps) {
|
|
const [clickTime, setClickTime] = createSignal<number>(0)
|
|
const DOUBLE_CLICK_THRESHOLD = 300
|
|
|
|
function handleClick() {
|
|
const now = Date.now()
|
|
const lastClick = clickTime()
|
|
const isDoubleClick = now - lastClick < DOUBLE_CLICK_THRESHOLD
|
|
|
|
setClickTime(now)
|
|
|
|
const current = props.expandState()
|
|
|
|
if (isDoubleClick) {
|
|
// Double click behavior
|
|
if (current === "normal") {
|
|
props.onToggleExpand("fifty")
|
|
} else if (current === "fifty") {
|
|
props.onToggleExpand("eighty")
|
|
} else {
|
|
props.onToggleExpand("normal")
|
|
}
|
|
} else {
|
|
// Single click behavior
|
|
if (current === "normal") {
|
|
props.onToggleExpand("fifty")
|
|
} else {
|
|
props.onToggleExpand("normal")
|
|
}
|
|
}
|
|
|
|
// Reset click timer after threshold
|
|
setTimeout(() => setClickTime(0), DOUBLE_CLICK_THRESHOLD)
|
|
}
|
|
|
|
const getTooltip = () => {
|
|
const current = props.expandState()
|
|
if (current === "normal") {
|
|
return "Click to expand (50%) • Double-click to expand further (80%)"
|
|
} else if (current === "fifty") {
|
|
return "Double-click to expand to 80% • Click to minimize"
|
|
} else {
|
|
return "Click to minimize • Double-click to expand to 50%"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
class="prompt-expand-button"
|
|
onClick={handleClick}
|
|
disabled={false}
|
|
aria-label="Toggle chat input height"
|
|
title={getTooltip()}
|
|
>
|
|
<Show
|
|
when={props.expandState() === "normal"}
|
|
fallback={<Minimize2 class="h-5 w-5" aria-hidden="true" />}
|
|
>
|
|
<Maximize2 class="h-5 w-5" aria-hidden="true" />
|
|
</Show>
|
|
</button>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Step 2: Verify component syntax**
|
|
|
|
Run in terminal:
|
|
```bash
|
|
cd packages/ui && npm run type-check
|
|
```
|
|
|
|
Expected: No TypeScript errors in expand-button.tsx.
|
|
|
|
**Step 3: Commit**
|
|
|
|
```bash
|
|
git add packages/ui/src/components/expand-button.tsx
|
|
git commit -m "feat: create ExpandButton component with click/double-click logic"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 3: Integrate ExpandButton into PromptInput
|
|
|
|
**Files:**
|
|
- Modify: `packages/ui/src/components/prompt-input.tsx:1-3, 1040-1250`
|
|
|
|
**Step 1: Add import for ExpandButton**
|
|
|
|
In `packages/ui/src/components/prompt-input.tsx`, at line 1 after the existing imports, add:
|
|
|
|
```typescript
|
|
import ExpandButton from "./expand-button"
|
|
```
|
|
|
|
**Step 2: Add expand handler function**
|
|
|
|
After the `handleAbort` function (around line 703), add:
|
|
|
|
```typescript
|
|
function handleExpandToggle(nextState: "normal" | "fifty" | "eighty") {
|
|
setExpandState(nextState)
|
|
// Keep focus on textarea
|
|
textareaRef?.focus()
|
|
}
|
|
```
|
|
|
|
**Step 3: Render ExpandButton in JSX**
|
|
|
|
Find the section where history buttons are rendered (around line 1188-1211). Right before the closing `</Show>` tag of the history buttons, add the ExpandButton:
|
|
|
|
```typescript
|
|
<Show when={hasHistory()}>
|
|
<div class="prompt-expand-top">
|
|
<ExpandButton
|
|
expandState={expandState}
|
|
onToggleExpand={handleExpandToggle}
|
|
/>
|
|
</div>
|
|
</Show>
|
|
```
|
|
|
|
Wait - actually, the expand button should always show (not conditionally with history). Let me correct:
|
|
|
|
Replace the above with - add this RIGHT AFTER the `</Show>` closing tag for history buttons (after line 1211):
|
|
|
|
```typescript
|
|
<div class="prompt-expand-top">
|
|
<ExpandButton
|
|
expandState={expandState}
|
|
onToggleExpand={handleExpandToggle}
|
|
/>
|
|
</div>
|
|
```
|
|
|
|
**Step 4: Apply dynamic height to textarea**
|
|
|
|
Find the textarea element (around line 1166-1187). Modify the style binding on the textarea to include dynamic height:
|
|
|
|
Change from:
|
|
```typescript
|
|
style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
|
|
```
|
|
|
|
To:
|
|
```typescript
|
|
style={{
|
|
"padding-top": attachments().length > 0 ? "8px" : "0",
|
|
"height": getExpandedHeight(),
|
|
"overflow-y": expandState() !== "normal" ? "auto" : "visible",
|
|
"transition": "height 0.25s ease",
|
|
}}
|
|
```
|
|
|
|
**Step 5: Verify no errors**
|
|
|
|
Run in terminal:
|
|
```bash
|
|
cd packages/ui && npm run type-check
|
|
```
|
|
|
|
Expected: No TypeScript errors.
|
|
|
|
**Step 6: Commit**
|
|
|
|
```bash
|
|
git add packages/ui/src/components/prompt-input.tsx
|
|
git commit -m "feat: integrate ExpandButton and apply dynamic height to textarea"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 4: Add CSS styles for expand button positioning
|
|
|
|
**Files:**
|
|
- Modify: `packages/ui/src/styles/messaging/prompt-input.css:72-107`
|
|
|
|
**Step 1: Add prompt-expand-top styles**
|
|
|
|
After the `.prompt-history-bottom` rule (around line 88), add:
|
|
|
|
```css
|
|
.prompt-expand-top {
|
|
position: absolute;
|
|
top: 0.3rem;
|
|
right: 3.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
|
|
.prompt-expand-button {
|
|
@apply w-9 h-9 flex items-center justify-center rounded-md;
|
|
color: var(--text-muted);
|
|
background-color: rgba(15, 23, 42, 0.04);
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.prompt-expand-button:hover:not(:disabled) {
|
|
background-color: var(--surface-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.prompt-expand-button:active:not(:disabled) {
|
|
background-color: var(--accent-primary);
|
|
color: var(--text-inverted);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.prompt-expand-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
```
|
|
|
|
**Step 2: Adjust prompt-input-field-container for expanded states**
|
|
|
|
After the `.prompt-input-field` rule (around line 37), add:
|
|
|
|
```css
|
|
.prompt-input-field-container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 56px;
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
min-width: 0;
|
|
transition: height 0.25s ease;
|
|
}
|
|
```
|
|
|
|
Actually, the min-height should remain. Let me provide the corrected version - modify the existing `.prompt-input-field-container` rule (lines 23-30) to add the transition:
|
|
|
|
Change line 24 from:
|
|
```css
|
|
.prompt-input-field-container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 56px;
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
min-width: 0;
|
|
}
|
|
```
|
|
|
|
To:
|
|
```css
|
|
.prompt-input-field-container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 56px;
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
min-width: 0;
|
|
transition: height 0.25s ease;
|
|
}
|
|
```
|
|
|
|
**Step 3: Verify CSS syntax**
|
|
|
|
Run in terminal:
|
|
```bash
|
|
npm run build --workspace @neuralnomads/codenomad-ui
|
|
```
|
|
|
|
Expected: Build succeeds with no CSS errors.
|
|
|
|
**Step 4: Commit**
|
|
|
|
```bash
|
|
git add packages/ui/src/styles/messaging/prompt-input.css
|
|
git commit -m "style: add expand button positioning and styles"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 5: Test expand/minimize functionality in dev
|
|
|
|
**Files:**
|
|
- No new files
|
|
|
|
**Step 1: Start dev server**
|
|
|
|
Run in terminal:
|
|
```bash
|
|
npm run dev --workspace @neuralnomads/codenomad-ui
|
|
```
|
|
|
|
Wait for the server to start and print the local URL.
|
|
|
|
**Step 2: Test expand button visibility**
|
|
|
|
- Open the dev app in browser
|
|
- Create/open a session
|
|
- Verify expand button appears in top-right corner of input area, left of arrow buttons
|
|
- Verify button shows Maximize2 icon
|
|
|
|
**Step 3: Test single-click to 50% expand**
|
|
|
|
- Click the expand button once
|
|
- Verify textarea height increases to ~50% of chat window
|
|
- Verify icon changes to Minimize2
|
|
- Verify tooltip text updates
|
|
|
|
**Step 4: Test double-click from normal to 80% expand**
|
|
|
|
- Click expand button twice rapidly (within 300ms)
|
|
- Verify textarea height jumps to ~80% of chat window
|
|
- Verify scrollbar appears if content is long
|
|
- Type some text to verify scrolling works
|
|
|
|
**Step 5: Test minimize from 80%**
|
|
|
|
- Click expand button once
|
|
- Verify textarea collapses back to normal height (56px min-height)
|
|
- Verify icon changes back to Maximize2
|
|
|
|
**Step 6: Test expand button with 50% state**
|
|
|
|
- Single-click expand button → should go to 50%
|
|
- Double-click expand button → should go to 80%
|
|
- Verify tooltip updates to "Double-click to expand to 80% • Click to minimize"
|
|
|
|
**Step 7: Verify arrow buttons unchanged**
|
|
|
|
- Verify up/down arrow buttons still visible and functional
|
|
- Verify Stop/Start buttons position unchanged
|
|
- Verify all buttons maintain original sizes
|
|
|
|
**Step 8: Verify smooth transitions**
|
|
|
|
- Watch height changes - should see smooth 250ms transition
|
|
- No jarring jumps or layout shifts
|
|
|
|
**Expected Results:**
|
|
- All expand/minimize transitions work as specified
|
|
- No overlapping buttons
|
|
- Scrollbar appears correctly when needed
|
|
- Tooltips are comprehensive and helpful
|
|
|
|
If any test fails, return to the task that needs fixing before continuing.
|
|
|
|
**Step 9: Manual testing complete**
|
|
|
|
Once all tests pass, stop the dev server:
|
|
```bash
|
|
Ctrl+C
|
|
```
|
|
|
|
**Step 10: Commit test verification**
|
|
|
|
```bash
|
|
git add -A
|
|
git commit -m "test: verify expand button functionality and UX"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 6: Final cleanup and verification
|
|
|
|
**Files:**
|
|
- Review: `packages/ui/src/components/prompt-input.tsx`
|
|
- Review: `packages/ui/src/components/expand-button.tsx`
|
|
- Review: `packages/ui/src/styles/messaging/prompt-input.css`
|
|
|
|
**Step 1: Verify no console errors**
|
|
|
|
Restart dev server and check browser console:
|
|
```bash
|
|
npm run dev --workspace @neuralnomads/codenomad-ui
|
|
```
|
|
|
|
Open DevTools console - should show no warnings or errors related to expand button.
|
|
|
|
**Step 2: Check responsive behavior**
|
|
|
|
Resize browser window to different sizes - verify button positioning remains correct at all sizes.
|
|
|
|
**Step 3: Verify with attachments**
|
|
|
|
- Add an attachment (paste an image or large text)
|
|
- Expand the input
|
|
- Verify attachment chips display correctly above expanded textarea
|
|
|
|
**Step 4: Test with history buttons**
|
|
|
|
- Navigate through prompt history with arrow buttons while expanded
|
|
- Verify history navigation still works
|
|
- Verify expand button doesn't interfere with history buttons
|
|
|
|
**Step 5: Build for production**
|
|
|
|
```bash
|
|
npm run build --workspace @neuralnomads/codenomad-ui
|
|
```
|
|
|
|
Expected: Build succeeds with no errors.
|
|
|
|
**Step 6: Final commit**
|
|
|
|
```bash
|
|
git add -A
|
|
git commit -m "feat: complete expand chat input feature with full UX"
|
|
```
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
This plan implements the expand chat input feature across 6 tasks:
|
|
|
|
1. ✅ Add expand state signal and height helpers
|
|
2. ✅ Create ExpandButton component with click/double-click logic
|
|
3. ✅ Integrate ExpandButton and apply dynamic heights
|
|
4. ✅ Add CSS styles for button and positioning
|
|
5. ✅ Test all functionality in dev
|
|
6. ✅ Final verification and build
|
|
|
|
**Estimated time:** 45-60 minutes total
|
|
|
|
**Key points:**
|
|
- Expand button positioned top-right, left of arrow buttons
|
|
- 3 states: normal (56px min) → 50% height → 80% height
|
|
- Single-click advances one state, double-click skips to 80%
|
|
- Smooth 250ms transitions with scrollbar support
|
|
- Comprehensive hover tooltips explain all behaviors
|
|
- Maintains all existing button positions and sizes
|