diff --git a/frontend/package.json b/frontend/package.json
index 4aaea961..85845aa0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,18 +23,18 @@
"@langchain/core": "^0.3.3",
"@nestjs/common": "^10.4.6",
"@radix-ui/react-avatar": "^1.1.0",
- "@radix-ui/react-dialog": "^1.1.1",
+ "@radix-ui/react-dialog": "^1.1.4",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
- "@radix-ui/react-separator": "^1.1.0",
- "@radix-ui/react-slot": "^1.1.0",
- "@radix-ui/react-tooltip": "^1.1.2",
+ "@radix-ui/react-separator": "^1.1.1",
+ "@radix-ui/react-slot": "^1.1.1",
+ "@radix-ui/react-tooltip": "^1.1.6",
"@types/dom-speech-recognition": "^0.0.4",
- "class-variance-authority": "^0.7.0",
+ "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"emoji-mart": "^5.6.0",
"framer-motion": "^11.5.6",
diff --git a/frontend/src/app/(main)/MainLayout.tsx b/frontend/src/app/(main)/MainLayout.tsx
index 63a69798..c69fefff 100644
--- a/frontend/src/app/(main)/MainLayout.tsx
+++ b/frontend/src/app/(main)/MainLayout.tsx
@@ -1,15 +1,12 @@
'use client';
import React, { useEffect, useState } from 'react';
-import {
- ResizableHandle,
- ResizablePanel,
- ResizablePanelGroup,
-} from '@/components/ui/resizable';
import { cn } from '@/lib/utils';
import { usePathname } from 'next/navigation';
-import Sidebar from '@/components/sidebar';
import { useChatList } from '../hooks/useChatList';
+import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import CustomSidebar from '@/components/sidebar';
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
export default function MainLayout({
children,
@@ -20,10 +17,6 @@ export default function MainLayout({
const [isMobile, setIsMobile] = useState(false);
const defaultLayout = [30, 160];
const navCollapsedSize = 10;
-
- const pathname = usePathname();
- const currentChatId = pathname.split('/')[1] || '';
-
const {
chats,
loading,
@@ -33,6 +26,10 @@ export default function MainLayout({
refetchChats,
} = useChatList();
+ useEffect(() => {
+ document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(isCollapsed)}; path=/; max-age=604800`;
+ }, [isCollapsed]);
+
useEffect(() => {
const checkScreenWidth = () => {
setIsMobile(window.innerWidth <= 1023);
@@ -44,54 +41,66 @@ export default function MainLayout({
};
}, []);
+ console.log(`${isCollapsed}, ${isMobile}`);
+
return (
{
- document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+ document.cookie = `react-resizable-panels:layout=${JSON.stringify(
+ sizes
+ )}; path=/; max-age=604800`;
}}
className="h-screen items-stretch"
>
- {
- setIsCollapsed(true);
- document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`;
- }}
- onExpand={() => {
- setIsCollapsed(false);
- document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`;
- }}
- className={cn(
- isCollapsed
- ? 'min-w-[50px] md:min-w-[70px] transition-all duration-300 ease-in-out'
- : 'hidden md:block'
- )}
- >
-
-
-
-
- {children}
-
+
+ {
+ console.log(`setting collapse to T`);
+ setIsCollapsed(true);
+ }}
+ onExpand={() => {
+ console.log(`setting collapse to F`);
+ setIsCollapsed(false);
+ }}
+ className={cn(
+ 'transition-all duration-300 ease-in-out',
+ isCollapsed ? 'min-w-[50px] md:min-w-[70px]' : 'md:min-w-[200px]'
+ )}
+ >
+ {loading ? (
+ Loading...
+ ) : error ? (
+
+ Error: {error.message}
+
+ ) : (
+
+ )}
+
+
+
+ {children}
+
+
);
diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx
index 8e9ec238..179c2625 100644
--- a/frontend/src/app/(main)/layout.tsx
+++ b/frontend/src/app/(main)/layout.tsx
@@ -1,6 +1,7 @@
import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import MainLayout from './MainLayout';
+import { SidebarProvider } from '@/components/ui/sidebar';
const inter = Inter({ subsets: ['latin'] });
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 9b38f36f..4f880d5c 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -24,6 +24,14 @@
--input: 240 5.9% 90%;
--ring: 8 100% 60%;
--radius: 1rem;
+ --sidebar-background: 0 0% 98%;
+ --sidebar-foreground: 240 5.3% 26.1%;
+ --sidebar-primary: 240 5.9% 10%;
+ --sidebar-primary-foreground: 0 0% 98%;
+ --sidebar-accent: 240 4.8% 95.9%;
+ --sidebar-accent-foreground: 240 5.9% 10%;
+ --sidebar-border: 220 13% 91%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
@@ -46,6 +54,14 @@
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 8 90% 55%;
+ --sidebar-background: 240 5.9% 10%;
+ --sidebar-foreground: 240 4.8% 95.9%;
+ --sidebar-primary: 224.3 76.3% 48%;
+ --sidebar-primary-foreground: 0 0% 100%;
+ --sidebar-accent: 240 3.7% 15.9%;
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
+ --sidebar-border: 240 3.7% 15.9%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
}
}
diff --git a/frontend/src/components/detail-settings.tsx b/frontend/src/components/detail-settings.tsx
new file mode 100644
index 00000000..3814aeda
--- /dev/null
+++ b/frontend/src/components/detail-settings.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { Button } from './ui/button';
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from './ui/dialog';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+
+import { DownloadIcon, GearIcon } from '@radix-ui/react-icons';
+import PullModelForm from './pull-model-form';
+import EditUsernameForm from './edit-username-form';
+
+export default function DetailSettings() {
+ const [isOpen, setIsOpen] = React.useState(false);
+ return (
+
+ );
+}
diff --git a/frontend/src/components/pull-model-form.tsx b/frontend/src/components/pull-model-form.tsx
index 30d9d14a..b114b913 100644
--- a/frontend/src/components/pull-model-form.tsx
+++ b/frontend/src/components/pull-model-form.tsx
@@ -135,6 +135,7 @@ export default function PullModelForm() {
setName(e.currentTarget.value);
};
+ console.log('enter model');
return (