Merge pull request #74 from CS3219-AY2425S1/d6/ui-fixes

Minor ui fixes

Author: SeeuSim

backend/collaboration/src/service/get/collab-get-service.ts

@@ -18,7 +18,8 @@ export async function getCollabRoomService(
     };
   }
 
-  const combinedString = `uid1=${userid1}|uid2=${userid2}|qid=${questionid}`;
+  const randomString = crypto.randomBytes(4).toString('hex');
+  const combinedString = `uid1=${userid1}|uid2=${userid2}|qid=${questionid}|rand=${randomString}`;
   const hash = crypto.createHash('sha256');
   const uniqueRoomName = hash.update(combinedString).digest('hex');
   return {

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

@@ -19,7 +19,7 @@ interface AIChatProps {
 }
 
 interface StoredChat {
-  messages: ChatMessageType[];
+  messages: Array<ChatMessageType>;
   questionDetails: string;
 }
 
@@ -35,7 +35,7 @@ export const AIChat: React.FC<AIChatProps> = ({
   language = 'python',
   questionDetails = '',
 }) => {
-  const [messages, setMessages] = useState<ChatMessageType[]>([]);
+  const [messages, setMessages] = useState<Array<ChatMessageType>>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
   const streamingTextRef = useRef<string>('');
@@ -179,7 +179,7 @@ export const AIChat: React.FC<AIChatProps> = ({
       title='AI Assistant'
       onClearHistory={handleClearHistory}
       CustomPlaceHolderElem={({ onSend }) => (
-        <div className='flex flex-col gap-6 text-center'>
+        <div className='flex w-full flex-col gap-6 text-center'>
           <MessageSquareIcon className='mx-auto size-12 opacity-50' />
           <p>No messages yet. Start a conversation, or use one of these prompts:</p>
           <div className='flex flex-wrap gap-4'>
@@ -188,7 +188,7 @@ export const AIChat: React.FC<AIChatProps> = ({
                 key={index}
                 variant='outline'
                 size='sm'
-                className='rounded-xl'
+                className='max-w-full whitespace-normal break-words rounded-xl '
                 onClick={() => onSend(value)}
               >
                 <span>{value}</span>

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

@@ -26,7 +26,8 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
           className={cn(
             'prose prose-neutral text-sm text-primary',
             'prose-a:text-blue-500 prose-code:text-secondary-foreground prose-pre:ml-2 prose-pre:bg-transparent prose-pre:p-0',
-            'prose-headings:text-primary prose-strong:text-primary prose-p:text-primary'
+            'prose-headings:text-primary prose-strong:text-primary prose-p:text-primary',
+            'break-words'
           )}
         >
           {message.text}

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

@@ -22,7 +22,7 @@ import { CompleteDialog } from './room/complete-dialog';
 import { OtherUserCompletingDialog } from './room/other-user-completing-dialog';
 
 const EXTENSION_HEIGHT = 250;
-const MIN_EDITOR_HEIGHT = 350;
+const MIN_EDITOR_HEIGHT = 150;
 
 type EditorProps = {
   questionId: number;

frontend/src/components/blocks/interview/question-attempts/table.tsx

@@ -171,7 +171,8 @@ export function QuestionAttemptsTable<TValue>({
                       </Button>
                     </PaginationItem>
                     <PaginationItem className='text-sm'>
-                      {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+                      {table.getState().pagination.pageIndex + 1} of{' '}
+                      {Math.max(1, table.getPageCount())}
                     </PaginationItem>
                     <PaginationItem className='ml-1'>
                       <Button

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

@@ -59,8 +59,8 @@ export const InterviewRoom = () => {
   ) : (
     <WithNavBlocker>
       <WithNavBanner crumbs={crumbs}>
-        <div className='flex flex-1 overflow-hidden'>
-          <Card className='border-border m-4 flex w-[500px] overflow-hidden p-4 md:w-2/5'>
+        <div className='scrollbar-track-transparent scrollbar-thin flex flex-1 overflow-hidden sm:overflow-x-auto sm:overflow-y-hidden'>
+          <Card className='border-border m-4 flex w-[500px] overflow-hidden p-4 md:w-2/5 md:min-w-[292px]'>
             <Tabs defaultValue='details' className='size-full'>
               <TabsList className=''>
                 <TabsTrigger value='details'>Question Details</TabsTrigger>
@@ -85,7 +85,7 @@ export const InterviewRoom = () => {
             />
           </div>
           {(isAIChatOpen || isPartnerChatOpen) && (
-            <Card className='border-border m-4 w-[500px] overflow-hidden md:w-1/3'>
+            <Card className='border-border m-4 w-[500px] overflow-hidden md:w-1/3 md:min-w-[376px]'>
               {isAIChatOpen && (
                 <AIChat
                   isOpen={isAIChatOpen}

frontend/src/routes/match/match-form.tsx

@@ -85,9 +85,9 @@ export const MatchForm = ({ topics, difficulties }: MatchFormProps) => {
                             })}
                           </MultiSelectorList>
                         </MultiSelectorContent>
+                        <FormMessage />
                       </MultiSelector>
                     </FormControl>
-                    <FormMessage />
                   </FormItem>
                 )}
               />