From 98cf1c2a9db4d24582b6e8f2896c9258a8457284 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:55:44 +0800
Subject: [PATCH] Feat: add PromptManagement page #3221 (#3650)

### What problem does this PR solve?

Feat: add PromptManagement page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/package-lock.json                         |  9 ++++
 web/package.json                              |  1 +
 web/src/pages/profile-setting/components.tsx  |  5 ++
 .../pages/profile-setting/prompt/index.tsx    | 48 +++++++++++++++++++
 web/src/routes.ts                             |  4 ++
 web/tailwind.config.js                        |  2 +-
 6 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 web/src/pages/profile-setting/components.tsx
 create mode 100644 web/src/pages/profile-setting/prompt/index.tsx

diff --git a/web/package-lock.json b/web/package-lock.json
index 99591b633..779be6386 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -27,6 +27,7 @@
         "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-toast": "^1.2.2",
+        "@tailwindcss/line-clamp": "^0.4.4",
         "@tanstack/react-query": "^5.40.0",
         "@tanstack/react-query-devtools": "^5.51.5",
         "@uiw/react-markdown-preview": "^5.1.3",
@@ -5532,6 +5533,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmmirror.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
+      "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tanstack/match-sorter-utils": {
       "version": "8.11.3",
       "resolved": "https://registry.npmmirror.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.11.3.tgz",
diff --git a/web/package.json b/web/package.json
index d4ed83b1a..061b17352 100644
--- a/web/package.json
+++ b/web/package.json
@@ -38,6 +38,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tanstack/react-query": "^5.40.0",
     "@tanstack/react-query-devtools": "^5.51.5",
     "@uiw/react-markdown-preview": "^5.1.3",
diff --git a/web/src/pages/profile-setting/components.tsx b/web/src/pages/profile-setting/components.tsx
new file mode 100644
index 000000000..90bdca802
--- /dev/null
+++ b/web/src/pages/profile-setting/components.tsx
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export function Title({ children }: PropsWithChildren) {
+  return <span className="font-bold text-xl">{children}</span>;
+}
diff --git a/web/src/pages/profile-setting/prompt/index.tsx b/web/src/pages/profile-setting/prompt/index.tsx
new file mode 100644
index 000000000..7ae30ab99
--- /dev/null
+++ b/web/src/pages/profile-setting/prompt/index.tsx
@@ -0,0 +1,48 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Plus, Trash2 } from 'lucide-react';
+import { Title } from '../components';
+
+const text = `You are an intelligent assistant. Please summarize the content of the knowledge base to answer the question. Please list the data in the knowledge base and answer in detail. When all knowledge base content is irrelevant to the question, your answer must include the sentence "The answer you are looking for is not found in the knowledge base!" Answers need to consider chat history.
+      Here is the knowledge base:
+      {knowledge}
+      The above is the knowledge base.`;
+
+const PromptManagement = () => {
+  const modelLibraryList = new Array(8).fill(1);
+
+  return (
+    <div className="p-8 ">
+      <div className="mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-4xl font-bold">Prompt templates</h1>
+          <Button variant={'tertiary'} size={'sm'}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create template
+          </Button>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-4">
+        {modelLibraryList.map((x, idx) => (
+          <Card className="p-0" key={idx}>
+            <CardContent className="space-y-4 p-4">
+              <Title>Prompt name</Title>
+              <p className="line-clamp-3">{text}</p>
+
+              <div className="flex justify-end gap-2">
+                <Button size={'sm'} variant={'secondary'}>
+                  <Trash2 />
+                </Button>
+                <Button variant={'outline'} size={'sm'}>
+                  Edit
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PromptManagement;
diff --git a/web/src/routes.ts b/web/src/routes.ts
index 1a182b648..ed8243e0f 100644
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@@ -153,6 +153,10 @@ const routes = [
         path: '/profile-setting/model',
         component: '@/pages/profile-setting/model',
       },
+      {
+        path: '/profile-setting/prompt',
+        component: '@/pages/profile-setting/prompt',
+      },
     ],
   },
 ];
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index c558d594b..d7641ca00 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -177,5 +177,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/line-clamp')],
 };