PEER-236: Fix chat component styles

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

backend/chat/drizzle/0000_violet_micromacro.sql

@@ -6,7 +6,7 @@
       "idx": 0,
       "version": "7",
       "when": 1729871791234,
-      "tag": "0000_violet_micromacro",
+      "tag": "0000_initial_schema",
       "breakpoints": true
     }
   ]

backend/chat/drizzle/meta/_journal.json

@@ -52,6 +52,7 @@
     "remark-math": "^6.0.0",
     "socket.io-client": "^4.8.0",
     "tailwind-merge": "^2.5.2",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "ws": "^8.18.0",
     "y-codemirror.next": "^0.3.5",

frontend/package.json

@@ -3,8 +3,8 @@ import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from '
 
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Textarea } from '@/components/ui/textarea';
 
 import { ChatMessage, ChatMessageType } from './chat-message';
 
@@ -28,32 +28,44 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
   title,
 }) => {
   const [input, setInput] = useState<string>('');
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
+  // Focus and scroll to bottom on window open
   useEffect(() => {
     if (isOpen) {
       inputRef.current?.focus();
       scrollToBottom();
     }
   }, [isOpen]);
 
+  // Scroll to bottom on reception of messages
   useEffect(() => {
     scrollToBottom();
   }, [messages, isLoading]);
 
+  // Resize textarea on input, up to a maximum height
+  useEffect(() => {
+    const textAreaEl = inputRef.current;
+
+    if (textAreaEl) {
+      textAreaEl.style.height = 'auto';
+      textAreaEl.style.height = `${Math.min(textAreaEl.scrollHeight, 100)}px`;
+    }
+  }, [input]);
+
   const handleSend = () => {
     if (input.trim()) {
       onSend(input.trim());
       setInput('');
     }
   };
 
-  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyPress = (e: KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
@@ -62,7 +74,10 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
 
   return (
     <div className='flex size-full flex-col'>
-      <div className='bg-secondary/50 border-border flex items-center justify-between border-b px-4 py-3'>
+      <div
+        id='chat-header'
+        className='bg-secondary/50 border-border flex items-center justify-between border-b py-1 pl-3 pr-1'
+      >
         <div className='flex items-center gap-2'>
           <h2 className='font-semibold'>{title}</h2>
         </div>
@@ -78,7 +93,7 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
         </div>
       </div>
 
-      <ScrollArea className='h-full flex-1 overflow-y-auto p-4'>
+      <ScrollArea id='chat-messages' className='h-full flex-1 overflow-y-auto p-4'>
         {messages.length === 0 && (
           <div className='flex h-full flex-col items-center justify-center text-gray-500'>
             <MessageSquare className='mb-4 size-12 opacity-50' />
@@ -103,18 +118,24 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
         <div ref={messagesEndRef} />
       </ScrollArea>
 
-      <div className='bg-secondary/50 border-border border-t p-4'>
-        <div className='flex gap-2'>
-          <Input
+      <div className='bg-secondary/50 border-border border-t p-3'>
+        <div className='flex w-full items-center justify-between gap-3'>
+          <Textarea
+            rows={1}
             ref={inputRef}
             value={input}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
+            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setInput(e.target.value)}
             placeholder='Type your message...'
-            onKeyPress={handleKeyPress}
+            onKeyDown={handleKeyPress}
             disabled={isLoading}
-            className='bg-primary-foreground flex-1'
+            className='bg-primary-foreground scrollbar-thin scrollbar-track-black h-10 min-h-10 flex-1 resize-none overflow-y-auto p-2'
           />
-          <Button variant='outline' onClick={handleSend} disabled={isLoading || !input.trim()}>
+          <Button
+            variant='outline'
+            onClick={handleSend}
+            disabled={isLoading || !input.trim()}
+            className='min-h-10 px-3 py-2'
+          >
             {isLoading ? <Loader2 className='size-4 animate-spin' /> : <Send className='size-4' />}
           </Button>
         </div>

frontend/src/components/blocks/interview/chat/chat-layout.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+/* eslint-enable @typescript-eslint/no-empty-object-type */
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

frontend/src/components/ui/textarea.tsx

@@ -49,7 +49,7 @@ export const InterviewRoom = () => {
     <WithNavBlocker>
       <WithNavBanner crumbs={crumbs}>
         <div className='flex flex-1 overflow-hidden'>
-          <Card className='border-border m-4 w-1/3 overflow-hidden p-4 md:w-2/5'>
+          <Card className='border-border m-4 flex w-[500px] overflow-hidden p-4 md:w-2/5'>
             <QuestionDetails {...{ questionDetails }} />
           </Card>
           <div className='flex w-full'>
@@ -60,7 +60,7 @@ export const InterviewRoom = () => {
             />
           </div>
           {(isAIChatOpen || isPartnerChatOpen) && (
-            <Card className='border-border m-4 w-1/3 overflow-hidden'>
+            <Card className='border-border m-4 w-[500px] overflow-hidden'>
               {isAIChatOpen && (
                 <AIChat isOpen={isAIChatOpen} onClose={() => setIsAIChatOpen(false)} />
               )}

frontend/src/routes/interview/[room]/main.tsx

@@ -71,7 +71,7 @@ const config = {
       }
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography'), require('tailwind-scrollbar'),],
 };
 
 export default config;