feat: make chat resizeable

package.json

@@ -64,6 +64,7 @@
     "react-calendar-heatmap": "^1.9.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
+    "react-resizable-panels": "^2.1.7",
     "react-textarea-autosize": "^8.5.7",
     "react-tooltip": "^5.28.0",
     "reactflow": "^11.11.4",

pnpm-lock.yaml

@@ -113,6 +113,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-resizable-panels:
+        specifier: ^2.1.7
+        version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-textarea-autosize:
         specifier: ^8.5.7
         version: 8.5.7(@types/react@18.3.18)(react@18.3.1)
@@ -2988,6 +2991,12 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-resizable-panels@2.1.7:
+    resolution: {integrity: sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   react-textarea-autosize@8.5.7:
     resolution: {integrity: sha512-2MqJ3p0Jh69yt9ktFIaZmORHXw4c4bxSIhCeWiFwmJ9EYKgLmuNII3e9c9b2UO+ijl4StnpZdqpxNIhTdHvqtQ==}
     engines: {node: '>=10'}
@@ -6503,6 +6512,11 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-resizable-panels@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-textarea-autosize@8.5.7(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.9

src/components/GenerateCourse/AICourseContent.tsx

@@ -39,7 +39,7 @@ export function AICourseContent(props: AICourseContentProps) {
 
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);
-  const [isAIChatsOpen, setIsAIChatsOpen] = useState(true);
+  const [isAIChatsOpen, setIsAIChatsOpen] = useState(false);
 
   const [activeModuleIndex, setActiveModuleIndex] = useState(0);
   const [activeLessonIndex, setActiveLessonIndex] = useState(0);
@@ -211,12 +211,6 @@ export function AICourseContent(props: AICourseContentProps) {
 
   const isViewingLesson = viewMode === 'module';
 
-  useEffect(() => {
-    if (window && window?.innerWidth < 1024 && isAIChatsOpen) {
-      setIsAIChatsOpen(false);
-    }
-  }, []);
-
   return (
     <section className="flex h-screen flex-grow flex-col overflow-hidden bg-gray-50">
       {modals}
@@ -257,7 +251,7 @@ export function AICourseContent(props: AICourseContentProps) {
                 )}
               </button>
             )}
-            
+
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
               className="flex items-center justify-center text-gray-400 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"

src/components/GenerateCourse/AICourseLesson.tsx

@@ -31,6 +31,11 @@ import { RegenerateLesson } from './RegenerateLesson';
 import { TestMyKnowledgeAction } from './TestMyKnowledgeAction';
 import { AICourseLessonChat } from './AICourseLessonChat';
 import { AICourseFooter } from './AICourseFooter';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from './Resizeable';
 
 type AICourseLessonProps = {
   courseSlug: string;
@@ -69,10 +74,11 @@ export function AICourseLesson(props: AICourseLessonProps) {
 
     onUpgrade,
 
-    isAIChatsOpen,
+    isAIChatsOpen: isAIChatsMobileOpen,
-    setIsAIChatsOpen,
+    setIsAIChatsOpen: setIsAIChatsMobileOpen,
   } = props;
 
+  const [isAIChatsOpen, setIsAIChatsOpen] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState('');
@@ -218,217 +224,253 @@ export function AICourseLesson(props: AICourseLessonProps) {
     isLoading;
 
   return (
-    <div className="grid h-full grid-cols-5">
+    <div className="h-full">
-      <div
+      <ResizablePanelGroup direction="horizontal">
-        className={cn(
+        <ResizablePanel
-          'relative',
+          defaultSize={isAIChatsOpen ? 60 : 100}
-          isAIChatsOpen ? 'col-span-3 max-lg:col-span-5' : 'col-span-5',
+          minSize={40}
-        )}
+          id="course-text-content"
-      >
+          order={1}
-        <div className="absolute inset-0 overflow-y-auto bg-white p-8 pb-0 max-lg:px-4 max-lg:pt-3">
+        >
-          {(isGenerating || isLoading) && (
+          <div className="relative h-full">
-            <div className="absolute right-6 top-6 flex items-center justify-center">
+            <div className="absolute inset-0 overflow-y-auto bg-white p-8 pb-0 max-lg:px-4 max-lg:pt-3">
-              <Loader2Icon
+              {(isGenerating || isLoading) && (
-                size={18}
+                <div className="absolute right-6 top-6 flex items-center justify-center">
-                strokeWidth={3}
+                  <Loader2Icon
-                className="animate-spin text-gray-400/70"
+                    size={18}
-              />
+                    strokeWidth={3}
-            </div>
+                    className="animate-spin text-gray-400/70"
-          )}
+                  />
+                </div>
+              )}
 
-          <div className="mb-4 flex items-center justify-between">
+              <div className="mb-4 flex items-center justify-between">
-            <div className="text-sm text-gray-500">
+                <div className="text-sm text-gray-500">
-              Lesson {activeLessonIndex + 1} of {totalLessons}
+                  Lesson {activeLessonIndex + 1} of {totalLessons}
-            </div>
+                </div>
 
-            {!isGenerating && !isLoading && (
+                {!isGenerating && !isLoading && (
-              <div className="absolute right-6 top-6 flex items-center justify-between gap-2">
+                  <div className="absolute right-6 top-6 flex items-center justify-between gap-2">
-                <button
+                    <button
-                  onClick={() => setIsAIChatsOpen(!isAIChatsOpen)}
+                      onClick={() => setIsAIChatsOpen(!isAIChatsOpen)}
-                  className="rounded-full p-1 text-gray-400 hover:text-black max-lg:hidden"
+                      className="rounded-full p-1 text-gray-400 hover:text-black max-lg:hidden"
-                >
+                    >
-                  {!isAIChatsOpen ? (
+                      {!isAIChatsOpen ? (
-                    <MessageCircleIcon className="size-4 stroke-[2.5]" />
+                        <MessageCircleIcon className="size-4 stroke-[2.5]" />
-                  ) : (
+                      ) : (
-                    <MessageCircleOffIcon className="size-4 stroke-[2.5]" />
+                        <MessageCircleOffIcon className="size-4 stroke-[2.5]" />
-                  )}
+                      )}
-                </button>
+                    </button>
 
-                <RegenerateLesson
+                    <RegenerateLesson
-                  onRegenerateLesson={(prompt) => {
+                      onRegenerateLesson={(prompt) => {
-                    generateAiCourseContent(true, prompt);
+                        generateAiCourseContent(true, prompt);
-                  }}
+                      }}
-                />
+                    />
-                <button
+                    <button
-                  disabled={isLoading || isTogglingDone}
+                      disabled={isLoading || isTogglingDone}
-                  className={cn(
+                      className={cn(
-                    'flex items-center gap-1.5 rounded-full bg-black py-1 pl-2 pr-3 text-sm text-white hover:bg-gray-800 disabled:opacity-50 max-lg:text-xs',
+                        'flex items-center gap-1.5 rounded-full bg-black py-1 pl-2 pr-3 text-sm text-white hover:bg-gray-800 disabled:opacity-50 max-lg:text-xs',
-                    isLessonDone
+                        isLessonDone
-                      ? 'bg-red-500 hover:bg-red-600'
+                          ? 'bg-red-500 hover:bg-red-600'
-                      : 'bg-green-500 hover:bg-green-600',
+                          : 'bg-green-500 hover:bg-green-600',
-                  )}
+                      )}
-                  onClick={() => toggleDone()}
+                      onClick={() => toggleDone()}
-                >
+                    >
-                  {isTogglingDone ? (
+                      {isTogglingDone ? (
-                    <>
-                      <Loader2Icon
-                        size={16}
-                        strokeWidth={3}
-                        className="animate-spin text-white"
-                      />
-                      Please wait ...
-                    </>
-                  ) : (
-                    <>
-                      {isLessonDone ? (
                         <>
-                          <XIcon size={16} />
+                          <Loader2Icon
-                          Mark as Undone
+                            size={16}
+                            strokeWidth={3}
+                            className="animate-spin text-white"
+                          />
+                          Please wait ...
                         </>
                       ) : (
                         <>
-                          <CheckIcon size={16} />
+                          {isLessonDone ? (
-                          Mark as Done
+                            <>
+                              <XIcon size={16} />
+                              Mark as Undone
+                            </>
+                          ) : (
+                            <>
+                              <CheckIcon size={16} />
+                              Mark as Done
+                            </>
+                          )}
                         </>
                       )}
-                    </>
-                  )}
-                </button>
-              </div>
-            )}
-          </div>
-
-          <h1 className="mb-6 text-balance text-3xl font-semibold max-lg:mb-3 max-lg:text-xl">
-            {currentLessonTitle?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
-          </h1>
-
-          {!error && isLoggedIn() && (
-            <div
-              className="course-content prose prose-lg mt-8 max-w-full text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800 max-lg:mt-4 max-lg:text-base max-lg:prose-h2:mt-3 max-lg:prose-h2:text-lg max-lg:prose-h3:text-base max-lg:prose-pre:px-3 max-lg:prose-pre:text-sm"
-              dangerouslySetInnerHTML={{ __html: lessonHtml }}
-            />
-          )}
-
-          {error && isLoggedIn() && (
-            <div className="mt-8 flex min-h-[300px] items-center justify-center rounded-xl bg-red-50/80">
-              {error.includes('reached the limit') ? (
-                <div className="flex max-w-sm flex-col items-center text-center">
-                  <h2 className="text-xl font-semibold text-red-600">
-                    Limit reached
-                  </h2>
-                  <p className="my-3 text-red-600">
-                    You have reached the AI usage limit for today.
-                    {!isPaidUser && (
-                      <>Please upgrade your account to continue.</>
-                    )}
-                    {isPaidUser && (
-                      <>&nbsp;Please wait until tomorrow to continue.</>
-                    )}
-                  </p>
-
-                  {!isPaidUser && (
-                    <button
-                      onClick={() => {
-                        onUpgrade();
-                      }}
-                      className="rounded-full bg-red-600 px-4 py-1 text-white hover:bg-red-700"
-                    >
-                      Upgrade Account
                     </button>
+                  </div>
+                )}
+              </div>
+
+              <h1 className="mb-6 text-balance text-3xl font-semibold max-lg:mb-3 max-lg:text-xl">
+                {currentLessonTitle?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
+              </h1>
+
+              {!error && isLoggedIn() && (
+                <div
+                  className="course-content prose prose-lg mt-8 max-w-full text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800 max-lg:mt-4 max-lg:text-base max-lg:prose-h2:mt-3 max-lg:prose-h2:text-lg max-lg:prose-h3:text-base max-lg:prose-pre:px-3 max-lg:prose-pre:text-sm"
+                  dangerouslySetInnerHTML={{ __html: lessonHtml }}
+                />
+              )}
+
+              {error && isLoggedIn() && (
+                <div className="mt-8 flex min-h-[300px] items-center justify-center rounded-xl bg-red-50/80">
+                  {error.includes('reached the limit') ? (
+                    <div className="flex max-w-sm flex-col items-center text-center">
+                      <h2 className="text-xl font-semibold text-red-600">
+                        Limit reached
+                      </h2>
+                      <p className="my-3 text-red-600">
+                        You have reached the AI usage limit for today.
+                        {!isPaidUser && (
+                          <>Please upgrade your account to continue.</>
+                        )}
+                        {isPaidUser && (
+                          <>&nbsp;Please wait until tomorrow to continue.</>
+                        )}
+                      </p>
+
+                      {!isPaidUser && (
+                        <button
+                          onClick={() => {
+                            onUpgrade();
+                          }}
+                          className="rounded-full bg-red-600 px-4 py-1 text-white hover:bg-red-700"
+                        >
+                          Upgrade Account
+                        </button>
+                      )}
+                    </div>
+                  ) : (
+                    <p className="text-red-600">{error}</p>
                   )}
                 </div>
-              ) : (
-                <p className="text-red-600">{error}</p>
               )}
-            </div>
-          )}
 
-          {!isLoggedIn() && (
+              {!isLoggedIn() && (
-            <div className="mt-8 flex min-h-[152px] flex-col items-center justify-center gap-3 rounded-lg border border-gray-200 p-8">
+                <div className="mt-8 flex min-h-[152px] flex-col items-center justify-center gap-3 rounded-lg border border-gray-200 p-8">
-              <LockIcon className="size-7 stroke-[2] text-gray-400/90" />
+                  <LockIcon className="size-7 stroke-[2] text-gray-400/90" />
-              <p className="text-sm text-gray-500">
+                  <p className="text-sm text-gray-500">
-                Please login to generate course content
+                    Please login to generate course content
-              </p>
+                  </p>
-            </div>
+                </div>
-          )}
-
-          {!isLoading && !isGenerating && !error && (
-            <TestMyKnowledgeAction
-              courseSlug={courseSlug}
-              activeModuleIndex={activeModuleIndex}
-              activeLessonIndex={activeLessonIndex}
-            />
-          )}
-
-          <div className="mt-8 flex items-center justify-between">
-            <button
-              onClick={onGoToPrevLesson}
-              disabled={cantGoBack}
-              className={cn(
-                'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
-                cantGoBack
-                  ? 'cursor-not-allowed text-gray-400'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
               )}
-            >
-              <ChevronLeft size={16} className="mr-2" />
-              Previous <span className="hidden lg:inline">&nbsp;Lesson</span>
-            </button>
 
-            <div>
+              {!isLoading && !isGenerating && !error && (
-              <button
+                <TestMyKnowledgeAction
-                onClick={() => {
+                  courseSlug={courseSlug}
-                  if (!isLessonDone) {
+                  activeModuleIndex={activeModuleIndex}
-                    toggleDone(undefined, {
+                  activeLessonIndex={activeLessonIndex}
-                      onSuccess: () => {
+                />
+              )}
+
+              <div className="mt-8 flex items-center justify-between">
+                <button
+                  onClick={onGoToPrevLesson}
+                  disabled={cantGoBack}
+                  className={cn(
+                    'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
+                    cantGoBack
+                      ? 'cursor-not-allowed text-gray-400'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
+                  )}
+                >
+                  <ChevronLeft size={16} className="mr-2" />
+                  Previous{' '}
+                  <span className="hidden lg:inline">&nbsp;Lesson</span>
+                </button>
+
+                <div>
+                  <button
+                    onClick={() => {
+                      if (!isLessonDone) {
+                        toggleDone(undefined, {
+                          onSuccess: () => {
+                            onGoToNextLesson();
+                          },
+                        });
+                      } else {
                         onGoToNextLesson();
-                      },
+                      }
-                    });
+                    }}
-                  } else {
+                    disabled={cantGoForward || isTogglingDone}
-                    onGoToNextLesson();
+                    className={cn(
-                  }
+                      'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
-                }}
+                      cantGoForward
-                disabled={cantGoForward || isTogglingDone}
+                        ? 'cursor-not-allowed text-gray-400'
-                className={cn(
+                        : 'bg-gray-800 text-white hover:bg-gray-700',
-                  'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
+                    )}
-                  cantGoForward
+                  >
-                    ? 'cursor-not-allowed text-gray-400'
+                    {isTogglingDone ? (
-                    : 'bg-gray-800 text-white hover:bg-gray-700',
+                      <>
-                )}
+                        <Loader2Icon
-              >
+                          size={16}
-                {isTogglingDone ? (
+                          strokeWidth={3}
-                  <>
+                          className="animate-spin text-white"
-                    <Loader2Icon
+                        />
-                      size={16}
+                        Please wait ...
-                      strokeWidth={3}
+                      </>
-                      className="animate-spin text-white"
+                    ) : (
-                    />
+                      <>
-                    Please wait ...
+                        Next{' '}
-                  </>
+                        <span className="hidden lg:inline">&nbsp;Lesson</span>
-                ) : (
+                        <ChevronRight size={16} className="ml-2" />
-                  <>
+                      </>
-                    Next <span className="hidden lg:inline">&nbsp;Lesson</span>
+                    )}
-                    <ChevronRight size={16} className="ml-2" />
+                  </button>
-                  </>
+                </div>
-                )}
+              </div>
-              </button>
+
+              <AICourseFooter />
             </div>
           </div>
+        </ResizablePanel>
+        {isAIChatsOpen && (
+          <>
+            <ResizableHandle withHandle={false} className="max-lg:hidden" />
+            <ResizablePanel
+              defaultSize={40}
+              minSize={20}
+              id="course-chat-content"
+              order={2}
+              className="max-lg:hidden"
+            >
+              <AICourseLessonChat
+                courseSlug={courseSlug}
+                moduleTitle={currentModuleTitle}
+                lessonTitle={currentLessonTitle}
+                onUpgradeClick={onUpgrade}
+                isDisabled={isGenerating || isLoading || isTogglingDone}
+              />
+            </ResizablePanel>
+          </>
+        )}
 
-          <AICourseFooter />
+        <div
+          className="fixed inset-0 hidden data-[state=open]:block lg:hidden data-[state=open]:lg:hidden"
+          data-state={isAIChatsMobileOpen ? 'open' : 'closed'}
+        >
+          <div className="absolute inset-0 bg-black/50" />
+          <AICourseLessonChat
+            courseSlug={courseSlug}
+            moduleTitle={currentModuleTitle}
+            lessonTitle={currentLessonTitle}
+            onUpgradeClick={onUpgrade}
+            isDisabled={isGenerating || isLoading || isTogglingDone}
+          />
+
+          <button
+            onClick={() => setIsAIChatsMobileOpen(false)}
+            className="absolute right-2 top-2 z-20 rounded-full p-1 text-gray-400 hover:text-black"
+          >
+            <XIcon className="size-4 stroke-[2.5]" />
+          </button>
         </div>
-      </div>
+      </ResizablePanelGroup>
-
-      <AICourseLessonChat
-        courseSlug={courseSlug}
-        moduleTitle={currentModuleTitle}
-        lessonTitle={currentLessonTitle}
-        onUpgradeClick={onUpgrade}
-        isDisabled={isGenerating || isLoading || isTogglingDone}
-        onClose={() => setIsAIChatsOpen(false)}
-        isAIChatsOpen={isAIChatsOpen}
-        setIsAIChatsOpen={setIsAIChatsOpen}
-      />
     </div>
   );
 }

src/components/GenerateCourse/AICourseLessonChat.tsx

@@ -46,25 +46,11 @@ type AICourseLessonChatProps = {
   lessonTitle: string;
   onUpgradeClick: () => void;
   isDisabled?: boolean;
-
-  onClose: () => void;
-
-  isAIChatsOpen: boolean;
-  setIsAIChatsOpen: (isAIChatsOpen: boolean) => void;
 };
 
 export function AICourseLessonChat(props: AICourseLessonChatProps) {
-  const {
+  const { courseSlug, moduleTitle, lessonTitle, onUpgradeClick, isDisabled } =
-    courseSlug,
+    props;
-    moduleTitle,
-    lessonTitle,
-    onUpgradeClick,
-    isDisabled,
-    onClose,
-
-    isAIChatsOpen,
-    setIsAIChatsOpen,
-  } = props;
 
   const toast = useToast();
   const scrollareaRef = useRef<HTMLDivElement | null>(null);
@@ -211,24 +197,8 @@ export function AICourseLessonChat(props: AICourseLessonChatProps) {
 
   return (
     <>
-      {isAIChatsOpen && (
+      <div className="relative h-full border-l border-gray-200">
-        <div
-          className="fixed inset-0 z-10 bg-black/50 lg:hidden"
-          onClick={onClose}
-        />
-      )}
-      <div
-        className="relative col-span-2 h-full border-l border-gray-200 transition-all data-[state=closed]:hidden max-lg:fixed max-lg:inset-y-0 max-lg:right-0 max-lg:z-10 max-lg:w-[420px] max-lg:border-none max-lg:data-[state=closed]:translate-x-full max-lg:data-[state=open]:translate-x-0"
-        data-state={isAIChatsOpen ? 'open' : 'closed'}
-      >
         <div className="absolute inset-y-0 right-0 z-20 flex w-full flex-col overflow-hidden bg-white">
-          <button
-            onClick={onClose}
-            className="absolute right-2 top-2 hidden rounded-full p-1 text-gray-400 hover:text-black max-lg:block"
-          >
-            <XIcon className="size-4 stroke-[2.5]" />
-          </button>
-
           <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 text-sm">
             <h4 className="text-base font-medium">Course AI</h4>
           </div>

src/components/GenerateCourse/Resizeable.tsx

@@ -0,0 +1,42 @@
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cn } from '../../lib/classname';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-gray-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-[30px] w-3 items-center justify-center rounded-sm bg-gray-200 text-black hover:bg-gray-300">
+        <GripVertical className="size-5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };