diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx index dd09f42..a1c75f6 100644 --- a/src/components/chat/ChatInput.tsx +++ b/src/components/chat/ChatInput.tsx @@ -166,39 +166,18 @@ export function ChatInput({ const adjustTextareaHeight = useCallback(() => { const textarea = textareaRef.current; if (textarea) { - // Remove previous dynamic height classes - textarea.classList.remove( - "textarea-auto-height", - "textarea-expanded", - ); - - // Temporarily use auto to measure - textarea.classList.add("textarea-auto-height"); + // Reset height to auto to measure content + textarea.style.height = "auto"; const scrollHeight = textarea.scrollHeight; + const minHeight = 80; const maxHeight = 300; - const hasAutoMention = - textarea.classList.contains("has-auto-mention"); - const minHeight = hasAutoMention ? 116 : 80; - // Check if expansion is needed + // Calculate and apply height const calculatedHeight = Math.max( minHeight, Math.min(scrollHeight, maxHeight), ); - - // Apply expanded class if needed - if (calculatedHeight > minHeight) { - textarea.classList.add("textarea-expanded"); - // Set CSS variable for dynamic height - textarea.style.setProperty( - "--textarea-height", - `${calculatedHeight}px`, - ); - } else { - textarea.style.removeProperty("--textarea-height"); - } - - textarea.classList.remove("textarea-auto-height"); + textarea.style.height = `${calculatedHeight}px`; } }, []); @@ -492,16 +471,7 @@ export function ChatInput({ // Update dropdown value when currentModeId changes (separate effect) useEffect(() => { - console.log("[ChatInput] currentModeId changed:", currentModeId); - console.log( - "[ChatInput] modeDropdownInstance.current:", - modeDropdownInstance.current, - ); if (modeDropdownInstance.current && currentModeId) { - console.log( - "[ChatInput] Setting dropdown value to:", - currentModeId, - ); modeDropdownInstance.current.setValue(currentModeId); } }, [currentModeId]); @@ -515,41 +485,34 @@ export function ChatInput({ return (
-
- {/* Mention Dropdown */} - {(() => { - logger.log("[DEBUG] Dropdown render check:", { - isOpen: mentions.isOpen, - suggestionsCount: mentions.suggestions.length, - selectedIndex: mentions.selectedIndex, - }); - return null; - })()} - {mentions.isOpen && ( - - )} + {/* Mention Dropdown */} + {mentions.isOpen && ( + + )} - {/* Slash Command Dropdown */} - {slashCommands.isOpen && ( - - )} + {/* Slash Command Dropdown */} + {slashCommands.isOpen && ( + + )} + {/* Input Box - flexbox container with border */} +
{/* Auto-mention Badge */} {autoMentionEnabled && autoMention.activeNote && (
diff --git a/src/hooks/useAgentSession.ts b/src/hooks/useAgentSession.ts index cfec3e9..bce35ac 100644 --- a/src/hooks/useAgentSession.ts +++ b/src/hooks/useAgentSession.ts @@ -497,17 +497,11 @@ export function useAgentSession( * Called by AcpAdapter when receiving current_mode_update. */ const updateCurrentMode = useCallback((modeId: string) => { - console.log("[useAgentSession] updateCurrentMode called with:", modeId); setSession((prev) => { - console.log("[useAgentSession] prev.modes:", prev.modes); // Only update if modes exist if (!prev.modes) { - console.log( - "[useAgentSession] No modes in session, skipping update", - ); return prev; } - console.log("[useAgentSession] Updating currentModeId to:", modeId); return { ...prev, modes: { diff --git a/styles.css b/styles.css index 5e67e1b..35cbdf9 100644 --- a/styles.css +++ b/styles.css @@ -443,29 +443,33 @@ If your plugin does not need CSS, delete this file. /* Input area */ .chat-input-container { flex-shrink: 0; + position: relative; } -.chat-input-wrapper { - position: relative; +/* Input box - outer container with border and background */ +.chat-input-box { + display: flex; + flex-direction: column; + border: 1px solid var(--background-modifier-border); + border-radius: 8px; + background-color: var(--background-primary); + overflow: hidden; + transition: box-shadow 0.15s ease; +} + +.chat-input-box:focus-within { + box-shadow: 0 0 0 1.5px var(--background-modifier-border); } /* Auto-mention inline display */ .auto-mention-inline { - position: absolute; - top: 0; - left: 0; - right: 0; - pointer-events: none; - z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; - padding: 6px 12px 6px 12px; - border: 1px solid var(--background-modifier-border); - border-bottom-width: 1px; + padding: 6px 12px; + border-bottom: 1px solid var(--background-modifier-border); background-color: var(--background-primary); - border-radius: 8px 8px 0 0; } .mention-badge { @@ -530,13 +534,13 @@ If your plugin does not need CSS, delete this file. .chat-input-textarea { width: 100%; - padding: 12px 12px 32px 12px; - border: 1px solid var(--background-modifier-border); - border-radius: 8px; - background-color: var(--background-primary); + padding: 12px; + border: none; + background-color: transparent; color: var(--text-normal); resize: none; min-height: 80px; + max-height: 300px; font-family: inherit; font-size: var(--font-text-size); line-height: var(--line-height-normal); @@ -547,36 +551,26 @@ If your plugin does not need CSS, delete this file. -ms-overflow-style: none; } -.chat-input-textarea.has-auto-mention { - padding-top: calc(var(--font-text-size) * var(--line-height-normal) + 16px); - min-height: calc( - 80px + var(--font-text-size) * var(--line-height-normal) + 16px - ); -} - .chat-input-textarea::-webkit-scrollbar { display: none; } .chat-input-textarea:hover { - border: 1px solid var(--background-modifier-border) !important; - background-color: var(--background-primary) !important; + border: none !important; + background-color: transparent !important; } -/* Dynamic textarea height management */ -.chat-input-textarea.textarea-auto-height { - height: auto; -} - -.chat-input-textarea.textarea-expanded { - height: var(--textarea-height, auto); +.chat-input-textarea:focus { + border: none !important; + outline: none !important; + box-shadow: none !important; } /* Textarea wrapper for hint overlay */ .textarea-wrapper { position: relative; - display: flex; flex: 1; + min-height: 80px; } /* Hint overlay for slash commands */ @@ -589,9 +583,7 @@ If your plugin does not need CSS, delete this file. bottom: 0; pointer-events: none; /* Match textarea properties exactly */ - padding: 12px 40px 12px 12px; - border: 1px solid transparent; - border-radius: 8px; + padding: 12px; box-sizing: border-box; font-family: inherit; font-size: var(--font-text-size); @@ -602,11 +594,6 @@ If your plugin does not need CSS, delete this file. overflow: hidden; } -/* Adjust hint overlay padding when auto-mention is shown */ -.chat-input-textarea.has-auto-mention ~ .hint-overlay { - padding-top: calc(var(--font-text-size) * var(--line-height-normal) + 16px); -} - .hint-overlay .invisible { visibility: hidden; } @@ -617,14 +604,11 @@ If your plugin does not need CSS, delete this file. /* Input Actions Container */ .chat-input-actions { - position: absolute; - right: 8px; - bottom: 8px; display: flex; align-items: center; + justify-content: flex-end; gap: 8px; - background-color: var(--background-primary); - padding-left: 8px; + padding: 4px 12px 8px 12px; } /* Mode Selector */ @@ -636,6 +620,7 @@ If your plugin does not need CSS, delete this file. cursor: pointer; transition: background-color 0.1s ease; height: 20px; + max-width: 120px; } .mode-selector:hover { @@ -673,6 +658,10 @@ If your plugin does not need CSS, delete this file. -webkit-appearance: none !important; -moz-appearance: none !important; order: 1; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .mode-selector select.dropdown:hover,