PEER-236: UI Fixes

Author: cyiting

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

@@ -21,7 +21,6 @@ export const AIChat: React.FC<AIChatProps> = ({ isOpen, onClose }) => {
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   const callOpenAI = async (userMessage: string): Promise<string> => {
     if (!API_KEY) {
@@ -91,8 +90,6 @@ export const AIChat: React.FC<AIChatProps> = ({ isOpen, onClose }) => {
       isLoading={isLoading}
       error={error}
       title='AI Assistant'
-      isExpanded={isExpanded}
-      setIsExpanded={setIsExpanded}
     />
   );
 };

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

@@ -16,8 +16,6 @@ interface ChatLayoutProps {
   isLoading: boolean;
   error: string | null;
   title: string;
-  isExpanded?: boolean;
-  setIsExpanded?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const ChatLayout: React.FC<ChatLayoutProps> = ({
@@ -28,10 +26,9 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
   isLoading,
   error,
   title,
-  isExpanded = false,
-  setIsExpanded,
 }) => {
   const [input, setInput] = useState<string>('');
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -68,7 +65,7 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
     <div
       className={`fixed right-0 top-14 h-[calc(100%-3.5rem)] bg-white shadow-xl transition-all duration-300 ease-in-out ${
         isOpen ? 'translate-x-0' : 'translate-x-full'
-      } ${isExpanded ? 'w-3/4' : 'w-96'}`}
+      } ${isExpanded ? 'w-3/4' : 'w-1/5'}`}
     >
       <div className='flex h-full flex-col'>
         <div className='flex items-center justify-between border-b bg-white px-4 py-3'>
@@ -77,16 +74,14 @@ export const ChatLayout: React.FC<ChatLayoutProps> = ({
             <h2 className='text-base font-semibold'>{title}</h2>
           </div>
           <div className='flex items-center gap-2'>
-            {setIsExpanded && (
-              <Button
-                variant='ghost'
-                size='icon'
-                onClick={() => setIsExpanded(!isExpanded)}
-                className='rounded-full hover:bg-gray-100'
-              >
-                {isExpanded ? <Minimize2 className='size-5' /> : <Maximize2 className='size-5' />}
-              </Button>
-            )}
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={() => setIsExpanded(!isExpanded)}
+              className='rounded-full hover:bg-gray-100'
+            >
+              {isExpanded ? <Minimize2 className='size-5' /> : <Maximize2 className='size-5' />}
+            </Button>
             <Button
               variant='ghost'
               size='icon'

frontend/src/components/blocks/interview/editor.tsx

@@ -43,7 +43,7 @@ export const Editor = ({ room }: EditorProps) => {
   }, [theme]);
 
   return (
-    <div className='flex flex-col gap-4 p-4'>
+    <div className='flex w-full flex-col gap-4 p-4'>
       {isLoading ? (
         <div className='flex h-[60px] w-full flex-row justify-between pt-3'>
           <div className='flex h-10 flex-row gap-4'>

frontend/src/components/blocks/interview/floating-chat-button.tsx

@@ -9,14 +9,27 @@ import { PartnerChat } from './partner-chat';
 
 type FloatingChatButtonProps = {
   room: string;
+  onChatOpenChange: (isOpen: boolean) => void;
 };
 
-export const FloatingChatButton = ({ room }: FloatingChatButtonProps) => {
+export const FloatingChatButton = ({ room, onChatOpenChange }: FloatingChatButtonProps) => {
   const [isAIChatOpen, setIsAIChatOpen] = useState<boolean>(false);
   const [isPartnerChatOpen, setIsPartnerChatOpen] = useState<boolean>(false);
 
+  const toggleAIChat = () => {
+    const newStatus = !isAIChatOpen;
+    setIsAIChatOpen(newStatus);
+    onChatOpenChange(newStatus || isPartnerChatOpen);
+  };
+
+  const togglePartnerChat = () => {
+    const newStatus = !isPartnerChatOpen;
+    setIsPartnerChatOpen(newStatus);
+    onChatOpenChange(newStatus || isAIChatOpen);
+  };
+
   return (
-    <div className='fixed bottom-6 right-6'>
+    <div className='fixed bottom-3 right-3'>
       <div className='group relative'>
         <Button className='size-12 rounded-full bg-blue-500 shadow-lg transition-transform hover:scale-105 hover:bg-blue-600'>
           <MessageSquare className='size-6' />
@@ -29,7 +42,7 @@ export const FloatingChatButton = ({ room }: FloatingChatButtonProps) => {
                 <TooltipTrigger asChild>
                   <Button
                     className='size-12 rounded-full bg-blue-500 hover:bg-blue-600'
-                    onClick={() => setIsAIChatOpen(true)}
+                    onClick={toggleAIChat}
                   >
                     <Bot className='size-10' />
                   </Button>
@@ -46,7 +59,7 @@ export const FloatingChatButton = ({ room }: FloatingChatButtonProps) => {
                 <TooltipTrigger asChild>
                   <Button
                     className='size-12 rounded-full bg-blue-500 hover:bg-blue-600'
-                    onClick={() => setIsPartnerChatOpen(true)}
+                    onClick={togglePartnerChat}
                   >
                     <User className='size-10' />
                   </Button>
@@ -60,13 +73,9 @@ export const FloatingChatButton = ({ room }: FloatingChatButtonProps) => {
         </div>
       </div>
 
-      {isAIChatOpen && <AIChat isOpen={isAIChatOpen} onClose={() => setIsAIChatOpen(false)} />}
+      {isAIChatOpen && <AIChat isOpen={isAIChatOpen} onClose={() => toggleAIChat()} />}
       {isPartnerChatOpen && (
-        <PartnerChat
-          roomId={room}
-          isOpen={isPartnerChatOpen}
-          onClose={() => setIsPartnerChatOpen(false)}
-        />
+        <PartnerChat roomId={room} isOpen={isPartnerChatOpen} onClose={() => togglePartnerChat()} />
       )}
     </div>
   );

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

@@ -1,5 +1,5 @@
 import { QueryClient, useSuspenseQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { type LoaderFunctionArgs, Navigate, useLoaderData } from 'react-router-dom';
 
 import { WithNavBanner, WithNavBlocker } from '@/components/blocks/authed';
@@ -28,24 +28,26 @@ export const InterviewRoom = () => {
   const { questionId, roomId } = useLoaderData() as Awaited<ReturnType<ReturnType<typeof loader>>>;
   const { crumbs } = useCrumbs();
   const { data: details } = useSuspenseQuery(questionDetailsQuery(questionId));
-  const questionDetails = useMemo(() => {
-    return details.question;
-  }, [details]);
+  const questionDetails = useMemo(() => details.question, [details]);
+  const [isChatOpen, setIsChatOpen] = useState(false);
+
   return !questionId || !roomId ? (
     <Navigate to={ROUTES.HOME} />
   ) : (
     <WithNavBlocker>
       <WithNavBanner crumbs={crumbs}>
         <div className='flex'>
-          <div className='flex flex-1 overflow-hidden'>
+          <div className={`flex ${isChatOpen ? 'w-4/5' : 'w-full'} transition-all duration-300`}>
             <Card className='border-border m-4 w-1/3 max-w-[500px] overflow-hidden p-4 md:w-2/5'>
               <QuestionDetails {...{ questionDetails }} />
             </Card>
-            <div className='flex flex-1 flex-col overflow-hidden'>
+            <div
+              className={`flex flex-1 ${isChatOpen ? 'w-2/3' : 'w-full'} transition-all duration-300`}
+            >
               <Editor room={roomId as string} />
             </div>
-            <FloatingChatButton room={roomId as string} />
           </div>
+          <FloatingChatButton room={roomId as string} onChatOpenChange={setIsChatOpen} />
         </div>
       </WithNavBanner>
     </WithNavBlocker>