Update chat input styling and behavior

miurla · May 5, 2024 · 4a10bd5 · 4a10bd5
1 parent e20e650
commit 4a10bd5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
@@ -96,18 +96,23 @@ export function ChatPanel({ messages }: ChatPanelProps) {
             ref={inputRef}
             name="input"
             rows={1}
+            maxRows={5}
             tabIndex={0}
             placeholder="Ask a question..."
             spellCheck={false}
             value={input}
-            className="leading-5 resize-none pl-8 sm:pl-10 pr-14 h-12 rounded-full bg-muted flex min-h-[70px] w-full border border-input py-6 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            className="resize-none w-full min-h-12 rounded-fill bg-muted border border-input pl-4 pr-10 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'"
             onChange={e => {
               setInput(e.target.value)
               setShowEmptyScreen(e.target.value.length === 0)
             }}
             onKeyDown={e => {
               // Enter should submit the form
-              if (e.key === 'Enter' && !e.shiftKey) {
+              if (
+                e.key === 'Enter' &&
+                !e.shiftKey &&
+                !e.nativeEvent.isComposing
+              ) {
                 // Prevent the default action to avoid adding a new line
                 e.preventDefault()
                 const textarea = e.target as HTMLTextAreaElement