diff --git a/apps/web/src/app/components/ChatPanel.tsx b/apps/web/src/app/components/ChatPanel.tsx index 9194bcb..a99647b 100644 --- a/apps/web/src/app/components/ChatPanel.tsx +++ b/apps/web/src/app/components/ChatPanel.tsx @@ -135,6 +135,7 @@ function ChatPanel({ }: ChatPanelProps) { const messagesEndRef = useRef(null); const scrollContainerRef = useRef(null); + const inputRef = useRef(null); const shouldAutoScrollRef = useRef(true); const sendAnimationTimeoutRef = useRef(null); const prevMessageIdsRef = useRef>(new Set()); @@ -211,6 +212,16 @@ function ChatPanel({ setActiveMentionIndex(0); }, [chatInput]); + useEffect(() => { + const input = inputRef.current; + if (!input) return; + + input.style.height = "auto"; + input.style.height = `${input.scrollHeight}px`; + input.style.overflowY = + input.scrollHeight > input.clientHeight ? "auto" : "hidden"; + }, [chatInput]); + useEffect(() => { const previousCount = previousMessageCountRef.current; const addedMessages = messages.length - previousCount; @@ -312,7 +323,7 @@ function ChatPanel({ ); return; } - if (e.key === "Tab" || e.key === "Enter") { + if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) { e.preventDefault(); applyMentionSuggestion(activeMentionIndex); return; @@ -334,12 +345,17 @@ function ChatPanel({ ); return; } - if (isPickingCommand && (e.key === "Tab" || e.key === "Enter")) { + if ( + isPickingCommand && + (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) + ) { const command = commandSuggestions[activeCommandIndex]; const isExactMatch = command && chatInput.trim().toLowerCase() === `/${command.label}`; if (e.key === "Enter" && isExactMatch) { + e.preventDefault(); + handleSubmit(e); return; } e.preventDefault(); @@ -514,7 +530,7 @@ function ChatPanel({ {directMessageLabel}

) : null} -

+

{renderMessageContent(msg.content)}

@@ -604,9 +620,10 @@ function ChatPanel({ })} )} -
- +