feat: new UI part 3

frontend/src/app/globals.css

@@ -124,4 +124,54 @@
 
 p {
   margin: 0;
-}
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-4px);
+    visibility: hidden;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-4px);
+    visibility: hidden;
+  }
+}
+
+.collapsible-content[data-state='open'] {
+  animation: collapsible-down 300ms ease-out;
+  visibility: visible;
+}
+
+.collapsible-content[data-state='closed'] {
+  animation: collapsible-up 300ms ease-out;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsible-content {
+    animation: none !important;
+  }
+}

frontend/src/app/launch-model/[modelType]/page.tsx

@@ -1,13 +1,24 @@
 import LaunchModel from '@/components/pages/launch-model';
-import { getLaunchModelRouteType } from '@/components/pages/launch-model/utils';
+import { getLaunchModelRouteType, getInitialCustomType } from '@/components/pages/launch-model/utils';
 
 interface LaunchModelPageProps {
   params: Promise<{
     modelType: string;
   }>;
+
+  searchParams: Promise<{
+    activeType?: string;
+  }>;
 }
 
-export default async function LaunchModelPage({ params }: LaunchModelPageProps) {
+export default async function LaunchModelPage({ params, searchParams }: LaunchModelPageProps) {
   const { modelType } = await params;
-  return <LaunchModel routeType={getLaunchModelRouteType(modelType)} />;
+  const { activeType } = await searchParams;
+
+  return (
+    <LaunchModel
+      routeType={getLaunchModelRouteType(modelType)}
+      initialCustomType={getInitialCustomType(activeType)}
+    />
+  );
 }

frontend/src/app/register-model/[modelType]/[modelName]/page.tsx

@@ -0,0 +1,14 @@
+import RegisterModel from '@/components/pages/register-model';
+import { getRigisterModelTyps } from '@/components/pages/register-model/utils';
+
+interface RegisterModelPageProps {
+  params: Promise<{
+    modelType: string;
+    modelName: string;
+  }>;
+}
+
+export default async function RegisterModelPage({ params }: RegisterModelPageProps) {
+  const { modelType, modelName } = await params;
+  return <RegisterModel modelType={getRigisterModelTyps(modelType)} modelName={modelName} />;
+}

frontend/src/app/register-model/[modelType]/page.tsx

@@ -0,0 +1,13 @@
+import RegisterModel from '@/components/pages/register-model';
+import { getRigisterModelTyps } from '@/components/pages/register-model/utils';
+
+interface RegisterModelPageProps {
+  params: Promise<{
+    modelType: string;
+  }>;
+}
+
+export default async function RegisterModelPage({ params }: RegisterModelPageProps) {
+  const { modelType } = await params;
+  return <RegisterModel modelType={getRigisterModelTyps(modelType)} />;
+}

frontend/src/app/register-model/page.tsx

@@ -1,5 +1,5 @@
-import RegisterModel from '@/components/pages/register-model';
+import { redirect } from 'next/navigation';
 
-export default function RegisterModelPage() {
-  return <RegisterModel />;
+export default function LaunchModelPage() {
+  redirect('/register-model/LLM');
 }

frontend/src/app/running-model/page.tsx

@@ -1,6 +1,6 @@
-const RunningModel = ()=>{
-  return (
-    <div className="h-[2000px] overflow-y-auto"></div>
-  )
-}
-export default RunningModel;
+import RunningModel from '@/components/pages/running-model';
+
+const RunningModelPages = () => {
+  return <RunningModel />;
+};
+export default RunningModelPages;

frontend/src/app/workbench/page.tsx

@@ -1,3 +1,8 @@
 export default function Page() {
-  return <div>workbench</div>;
-}
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-8 py-8">
+
+    </div>
+  );
+}
+

frontend/src/components/layout/sidebar.tsx

@@ -81,12 +81,12 @@ export function Sidebar() {
       Icon: Rocket,
       Extra: ChevronRight,
     },
-    // {
-    //   path: '/running-model',
-    //   name: t('menu.runningModels'),
-    //   Icon: Layers,
-    //   Extra: ChevronRight,
-    // },
+    {
+      path: '/running-model',
+      name: t('menu.runningModels'),
+      Icon: Layers,
+      Extra: ChevronRight,
+    },
     {
       path: '/register-model',
       name: t('menu.registerModel'),

frontend/src/components/pages/launch-model/cache-management.dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { FC, PropsWithChildren, useState } from 'react';
-import { Copy, Trash2 } from 'lucide-react';
+import { FC, useState } from 'react';
+import { Box, Copy, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import request from '@/lib/request';
 import { Button } from '@/components/ui/button';
@@ -31,8 +31,7 @@ interface CacheManagementDialogProps {
   onCacheDelete: () => void;
 }
 
-const CacheManagementDialog: FC<PropsWithChildren<CacheManagementDialogProps>> = ({
-  children,
+const CacheManagementDialog: FC<CacheManagementDialogProps> = ({
   modelDetail,
   onCacheDelete,
 }) => {
@@ -86,7 +85,15 @@ const CacheManagementDialog: FC<PropsWithChildren<CacheManagementDialogProps>> =
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex shrink-0 items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 transition-colors hover:bg-emerald-500/20"
+        >
+          <Box className="size-3.5" />
+          {t('launchModel.manageCachedModels')}
+        </button>
+      </DialogTrigger>
       <DialogContent className="!max-w-5xl">
         <DialogHeader>
           <DialogTitle>{modelDetail.model_name}</DialogTitle>

frontend/src/components/pages/launch-model/custom-edit-dialog.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { FC, useState, useMemo } from 'react';
+import { SquarePen, Copy } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useI18n } from '@/contexts/i18n-context';
+import type { CatalogModel, RequestModelType } from './types';
+import { copyText } from '@/lib/utils';
+
+interface EnvManagementDialogProps {
+  model: CatalogModel;
+  modelType: RequestModelType;
+}
+const CustomEditDialog: FC<EnvManagementDialogProps> = ({ model, modelType }) => {
+  const { t } = useI18n();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const value = useMemo(() => JSON.stringify(model, null, 4), [model]);
+  const handleEdit = () => {
+    // set model detail
+    sessionStorage.setItem('customJsonData', JSON.stringify(model));
+    router.push(`/register-model/${modelType}/${model.model_name}`);
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          aria-label="Delete model"
+          className="rounded-full p-1 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <SquarePen className="size-5" />
+        </button>
+      </DialogTrigger>
+      <DialogContent className="!max-w-2xl" showCloseButton={false}>
+        <DialogHeader className="flex !flex-row items-center justify-between">
+          <DialogTitle className="truncate">{model.model_name}</DialogTitle>
+          <button
+            className="shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground"
+            onClick={() => copyText(value)}
+          >
+            <Copy className="size-4" />
+          </button>
+        </DialogHeader>
+        <Textarea value={value} className="min-h-96" disabled />
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleEdit}>{t('common.edit')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+export default CustomEditDialog;

frontend/src/components/pages/launch-model/env-management-dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { FC, PropsWithChildren, useState } from 'react';
-import { Copy, Trash2 } from 'lucide-react';
+import { FC, useState } from 'react';
+import { Settings2, Copy, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import request from '@/lib/request';
 import { Button } from '@/components/ui/button';
@@ -31,11 +31,7 @@ interface EnvManagementDialogProps {
   onEnvDelete: () => void;
 }
 
-const EnvManagementDialog: FC<PropsWithChildren<EnvManagementDialogProps>> = ({
-  children,
-  modelDetail,
-  onEnvDelete,
-}) => {
+const EnvManagementDialog: FC<EnvManagementDialogProps> = ({ modelDetail, onEnvDelete }) => {
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [dataSource, setDataSource] = useState<ModelEnvItem[]>([]);
@@ -55,7 +51,7 @@ const EnvManagementDialog: FC<PropsWithChildren<EnvManagementDialogProps>> = ({
   };
 
   const handleConfirmDelete = async () => {
-    if(!pendingDeleteItem) return;
+    if (!pendingDeleteItem) return;
     setDeletingLoading(true);
 
     try {
@@ -89,7 +85,15 @@ const EnvManagementDialog: FC<PropsWithChildren<EnvManagementDialogProps>> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex shrink-0 items-center gap-1 rounded-full border border-sky-500/30 bg-sky-500/10 px-3 py-1 text-xs font-medium text-sky-700 transition-colors hover:bg-sky-500/20"
+        >
+          <Settings2 className="size-3.5" />
+          {t('launchModel.manageVirtualEnvironments')}
+        </button>
+      </DialogTrigger>
       <DialogContent className="!max-w-5xl">
         <DialogHeader>
           <DialogTitle>{modelDetail.model_name}</DialogTitle>