chore/ui: Add fix for copy paste from chat

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

Author: SeeuSim

frontend/src/components/blocks/authed/with-nav-blocker.tsx

@@ -1,8 +1,15 @@
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { FC, PropsWithChildren } from 'react';
 import { useBlocker } from 'react-router-dom';
 
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
 
 export const WithNavBlocker: FC<PropsWithChildren> = ({ children }) => {
   const blocker = useBlocker(
@@ -13,21 +20,32 @@ export const WithNavBlocker: FC<PropsWithChildren> = ({ children }) => {
       {blocker.state === 'blocked' && (
         <Dialog modal open>
           <DialogContent className='text-primary border-secondary-foreground/40 flex flex-col gap-8'>
-            <h1 className='text-lg font-medium'>
+            <DialogTitle className='text-primary text-lg'>
               Are you sure you want to navigate away from this page?
-            </h1>
-            <div className='flex flex-row justify-between'>
-              <Button onClick={blocker.reset}>
-                <span>Cancel</span>
-              </Button>
-              <Button variant='destructive' onClick={blocker.proceed}>
-                <span>Leave Page</span>
-              </Button>
-            </div>
-            <div
-              id='blockDialogClose'
-              className='bg-background absolute right-4 top-4 z-50 size-4'
-            />
+            </DialogTitle>
+            <VisuallyHidden>
+              <DialogDescription />
+            </VisuallyHidden>
+            <DialogFooter>
+              <div className='flex w-full flex-row justify-between'>
+                <Button onClick={blocker.reset}>
+                  <span>Cancel</span>
+                </Button>
+                <Button
+                  variant='destructive'
+                  onClick={() => {
+                    localStorage.removeItem('ai_chat_history');
+                    blocker.proceed();
+                  }}
+                >
+                  <span>Leave Page</span>
+                </Button>
+              </div>
+              <div
+                id='blockDialogClose'
+                className='bg-background absolute right-4 top-4 z-50 size-4'
+              />
+            </DialogFooter>
           </DialogContent>
         </Dialog>
       )}

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

@@ -31,15 +31,22 @@ export const MarkdownComponent = ({
         code({ children, className, ...rest }) {
           const [copyCodeText, setCopyCodeText] = useState('Copy Code');
 
+          const match = /language-(\w+)/.exec(className || '');
+
           const onCopy = (code: string) => {
+            const language = match?.[1];
+
+            if (language) {
+              localStorage.setItem('ai-asst-lang', language);
+            }
+
             navigator.clipboard.writeText(code);
             setCopyCodeText('Copied!');
             setTimeout(() => {
               setCopyCodeText(defaultCopyCodeText);
             }, 3000);
           };
 
-          const match = /language-(\w+)/.exec(className || '');
           return match ? (
             <div className='flex flex-col'>
               <div className='inline-flex translate-y-[10px] items-center justify-between rounded-t-sm bg-gray-700 p-1 text-sm'>

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

@@ -193,6 +193,14 @@ export const Editor = ({
           height={`${Math.max((height as number) - EXTENSION_HEIGHT, MIN_EDITOR_HEIGHT)}px`}
           value={code}
           onChange={handleCodeChange}
+          onPaste={(_event) => {
+            const lang = localStorage.getItem('ai-asst-lang');
+
+            if (lang) {
+              setLanguage(lang as LanguageName);
+              localStorage.removeItem('ai-assist-lang');
+            }
+          }}
           theme={themePreset}
           lang={language}
           basicSetup={{

frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx

@@ -25,7 +25,7 @@ export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
   };
 
   return (
-    <div className='flex size-full flex-col text-clip rounded-md'>
+    <div className='flex size-full flex-col !overflow-clip rounded-lg'>
       <div className='bg-muted-foreground text-muted dark:bg-muted dark:text-muted-foreground flex w-full items-center justify-between px-3 py-2'>
         <span className='text-sm font-medium'>{language}</span>
         <Button
@@ -52,6 +52,7 @@ export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
           PreTag='div'
           style={oneDark}
           language={language}
+          // showLineNumbers
         >
           {code}
         </SyntaxHighlighter>

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

@@ -89,12 +89,6 @@ export function QuestionAttemptsTable<TValue>({
             noOptionsText='None of the available languages match your search'
           />
         </div>
-        {/* <Input
-          placeholder='Search questions...'
-          value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
-          onChange={(event) => table.getColumn('title')?.setFilterValue(event.target.value)}
-          className='max-w-sm'
-        /> */}
       </div>
       <div className='border-border sticky top-0 rounded-t-md border'>
         <Table>

frontend/src/components/blocks/interview/room/complete-dialog.tsx

@@ -1,3 +1,4 @@
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { useMutation } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 import { Dispatch, FC, PropsWithChildren, SetStateAction, useCallback, useState } from 'react';
@@ -7,8 +8,10 @@ import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { addQuestionAttempt } from '@/services/question-service';
@@ -69,6 +72,10 @@ export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
       // Navigate to home page
       setTimeout(() => {
         setCompleting(COMPLETION_STATES.EMPTY, true);
+        setIsOpen(false);
+        // Clear AI chat if moving away
+        localStorage.removeItem('ai-assist-lang');
+        localStorage.removeItem('ai_chat_history');
         navigate('/');
       }, 200);
     },
@@ -81,9 +88,12 @@ export const CompleteDialog: FC<PropsWithChildren<CompleteDialogProps>> = ({
     <Dialog onOpenChange={setIsOpen} open={isOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className='border-border'>
-        <DialogHeader className='text-primary text-lg font-medium'>
-          Are you sure you wish to mark this question as complete?
+        <DialogHeader className='text-primary'>
+          <DialogTitle>Are you sure you wish to mark this question as complete?</DialogTitle>
         </DialogHeader>
+        <VisuallyHidden>
+          <DialogDescription />
+        </VisuallyHidden>
         <DialogFooter>
           <div className='flex w-full justify-between'>
             <Button