Feat: Add ModelManagement page #3221 (#3638)

### What problem does this PR solve?

Feat: Add ModelManagement page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/button.tsx

@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border border-colors-outline-sentiment-primary bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

web/src/pages/profile-setting/model/index.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  AddModelCard,
+  ModelLibraryCard,
+  SystemModelSetting,
+} from './model-card';
+
+const addedModelList = new Array(4).fill(1);
+
+const modelLibraryList = new Array(4).fill(1);
+
+export default function ModelManagement() {
+  return (
+    <section className="p-8 space-y-8">
+      <div className="flex justify-between items-center ">
+        <h1 className="text-4xl font-bold">Team management</h1>
+        <Button className="hover:bg-[#6B4FD8] text-white bg-colors-background-core-standard">
+          Unfinished
+        </Button>
+      </div>
+      <SystemModelSetting></SystemModelSetting>
+      <section>
+        <h2 className="text-2xl font-semibold mb-3">Added model</h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
+          {addedModelList.map((x, idx) => (
+            <AddModelCard key={idx}></AddModelCard>
+          ))}
+        </div>
+      </section>
+      <section>
+        <div className="flex justify-between items-center mb-3">
+          <h2 className="text-2xl font-semibold ">Model library</h2>
+          <Input
+            placeholder="search"
+            className="bg-colors-background-inverse-weak w-1/5"
+          ></Input>
+        </div>
+        <div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
+          {modelLibraryList.map((x, idx) => (
+            <ModelLibraryCard key={idx}></ModelLibraryCard>
+          ))}
+        </div>
+      </section>
+    </section>
+  );
+}

web/src/pages/profile-setting/model/model-card.tsx

@@ -0,0 +1,136 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Key, MoreVertical, Plus, Trash2 } from 'lucide-react';
+import { PropsWithChildren } from 'react';
+
+const settings = [
+  {
+    title: 'GPT Model',
+    description:
+      'The default chat LLM all the newly created knowledgebase will use.',
+    model: 'DeepseekChat',
+  },
+  {
+    title: 'Embedding Model',
+    description:
+      'The default embedding model all the newly created knowledgebase will use.',
+    model: 'DeepseekChat',
+  },
+  {
+    title: 'Image Model',
+    description:
+      'The default multi-capable model all the newly created knowledgebase will use. It can generate a picture or video.',
+    model: 'DeepseekChat',
+  },
+  {
+    title: 'Speech2TXT Model',
+    description:
+      'The default ASR model all the newly created knowledgebase will use. Use this model to translate voices to text something text.',
+    model: 'DeepseekChat',
+  },
+  {
+    title: 'TTS Model',
+    description:
+      'The default text to speech model all the newly created knowledgebase will use.',
+    model: 'DeepseekChat',
+  },
+];
+
+function Title({ children }: PropsWithChildren) {
+  return <span className="font-bold text-xl">{children}</span>;
+}
+
+export function SystemModelSetting() {
+  return (
+    <Card>
+      <CardContent className="p-4 space-y-6">
+        {settings.map((x, idx) => (
+          <div key={idx} className="flex items-center">
+            <div className="flex-1 flex flex-col">
+              <span className="font-semibold text-base">{x.title}</span>
+              <span className="text-colors-text-neutral-standard">
+                {x.description}
+              </span>
+            </div>
+            <div className="flex-1">
+              <Select defaultValue="english">
+                <SelectTrigger className="bg-colors-background-inverse-weak">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="english">English</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function AddModelCard() {
+  return (
+    <Card className="pt-4">
+      <CardContent className="space-y-4">
+        <div className="flex justify-between space-y-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Button variant={'outline'}>Sub models</Button>
+        </div>
+        <Title>Deep seek</Title>
+        <p>LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION</p>
+        <Card>
+          <CardContent className="p-3 flex gap-2">
+            <Button variant={'secondary'}>
+              deepseek-chat <Trash2 />
+            </Button>
+            <Button variant={'secondary'}>
+              deepseek-code <Trash2 />
+            </Button>
+          </CardContent>
+        </Card>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" size="icon">
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+          <Button variant={'tertiary'}>
+            <Key /> API
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ModelLibraryCard() {
+  return (
+    <Card className="pt-4">
+      <CardContent className="space-y-4">
+        <Avatar className="mb-4">
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+
+        <Title>Deep seek</Title>
+        <p>LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION</p>
+
+        <div className="text-right">
+          <Button variant={'tertiary'}>
+            <Plus /> Add
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/pages/profile-setting/team/index.tsx

@@ -28,11 +28,11 @@ const TeamManagement = () => {
   };
 
   return (
-    <div className="min-h-screen text-white p-8 ">
-      <div className="max-w-6xl mx-auto">
+    <div className="p-8 ">
+      <div className=" mx-auto">
         <div className="flex justify-between items-center mb-8">
           <h1 className="text-4xl font-bold">Team management</h1>
-          <Button className="hover:bg-[#6B4FD8] text-white bg-colors-background-core-standard">
+          <Button variant={'tertiary'} size={'sm'}>
             <Plus className="mr-2 h-4 w-4" />
             Create team
           </Button>

web/src/routes.ts

@@ -149,6 +149,10 @@ const routes = [
         path: '/profile-setting/plan',
         component: '@/pages/profile-setting/plan',
       },
+      {
+        path: '/profile-setting/model',
+        component: '@/pages/profile-setting/model',
+      },
     ],
   },
 ];