mirror of
https://github.com/rait-09/obsidian-agent-client.git
synced 2026-07-22 06:43:37 +00:00
Refactor chat input UI and cleanup debug logs
Refactored the chat input area to use a new .chat-input-box container for improved layout and styling. Simplified textarea height adjustment logic and removed unused dynamic class management. Cleaned up debug and console logging from ChatInput and useAgentSession hooks. Updated styles for input area, textarea, and related elements to improve appearance and maintainability.
This commit is contained in:
RAIT-09
parent
1f9fe44a09
commit
554fa84bb6
3 changed files with 66 additions and 120 deletions
|
|
@ -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 (
|
||||
<div className="chat-input-container">
|
||||
<div className="chat-input-wrapper">
|
||||
{/* Mention Dropdown */}
|
||||
{(() => {
|
||||
logger.log("[DEBUG] Dropdown render check:", {
|
||||
isOpen: mentions.isOpen,
|
||||
suggestionsCount: mentions.suggestions.length,
|
||||
selectedIndex: mentions.selectedIndex,
|
||||
});
|
||||
return null;
|
||||
})()}
|
||||
{mentions.isOpen && (
|
||||
<SuggestionDropdown
|
||||
type="mention"
|
||||
items={mentions.suggestions}
|
||||
selectedIndex={mentions.selectedIndex}
|
||||
onSelect={selectMention}
|
||||
onClose={mentions.close}
|
||||
plugin={plugin}
|
||||
view={view}
|
||||
/>
|
||||
)}
|
||||
{/* Mention Dropdown */}
|
||||
{mentions.isOpen && (
|
||||
<SuggestionDropdown
|
||||
type="mention"
|
||||
items={mentions.suggestions}
|
||||
selectedIndex={mentions.selectedIndex}
|
||||
onSelect={selectMention}
|
||||
onClose={mentions.close}
|
||||
plugin={plugin}
|
||||
view={view}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Slash Command Dropdown */}
|
||||
{slashCommands.isOpen && (
|
||||
<SuggestionDropdown
|
||||
type="slash-command"
|
||||
items={slashCommands.suggestions}
|
||||
selectedIndex={slashCommands.selectedIndex}
|
||||
onSelect={handleSelectSlashCommand}
|
||||
onClose={slashCommands.close}
|
||||
plugin={plugin}
|
||||
view={view}
|
||||
/>
|
||||
)}
|
||||
{/* Slash Command Dropdown */}
|
||||
{slashCommands.isOpen && (
|
||||
<SuggestionDropdown
|
||||
type="slash-command"
|
||||
items={slashCommands.suggestions}
|
||||
selectedIndex={slashCommands.selectedIndex}
|
||||
onSelect={handleSelectSlashCommand}
|
||||
onClose={slashCommands.close}
|
||||
plugin={plugin}
|
||||
view={view}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Input Box - flexbox container with border */}
|
||||
<div className="chat-input-box">
|
||||
{/* Auto-mention Badge */}
|
||||
{autoMentionEnabled && autoMention.activeNote && (
|
||||
<div className="auto-mention-inline">
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
81
styles.css
81
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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue