feat: Add tag colors for custom and copilot prompts in PromptBody component

src/components/Common/Playground/Message.tsx

@@ -14,6 +14,7 @@ import { EditMessageForm } from "./EditMessageForm"
 import { useTranslation } from "react-i18next"
 import { MessageSource } from "./MessageSource"
 import { useTTS } from "@/hooks/useTTS"
+import { tagColors } from "@/utils/color"
 
 type Props = {
   message: string
@@ -37,14 +38,6 @@ type Props = {
   isTTSEnabled?: boolean
 }
 
-const tagColors = {
-  summary: "blue",
-  explain: "green",
-  translate: "purple",
-  custom: "orange",
-  rephrase: "yellow"
-}
-
 export const PlaygroundMessage = (props: Props) => {
   const [isBtnPressed, setIsBtnPressed] = React.useState(false)
   const [editMode, setEditMode] = React.useState(false)

src/components/Option/Prompt/index.tsx

@@ -8,12 +8,15 @@ import {
   Input,
   Form,
   Switch,
-  Segmented
+  Segmented,
+  Tag
 } from "antd"
 import { Trash2, Pen, Computer, Zap } from "lucide-react"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { deletePromptById, getAllPrompts, savePrompt, updatePrompt } from "@/db"
+import { getAllCopilotPrompts } from "@/services/application"
+import { tagColors } from "@/utils/color"
 
 export const PromptBody = () => {
   const queryClient = useQueryClient()
@@ -22,7 +25,7 @@ export const PromptBody = () => {
   const [editId, setEditId] = useState("")
   const [createForm] = Form.useForm()
   const [editForm] = Form.useForm()
-  const { t } = useTranslation("settings")
+  const { t } = useTranslation(["settings", "common"])
   const [selectedSegment, setSelectedSegment] = useState<"custom" | "copilot">(
     "custom"
   )
@@ -31,6 +34,11 @@ export const PromptBody = () => {
     queryFn: getAllPrompts
   })
 
+  const { data: copilotData, status: copilotStatus } = useQuery({
+    queryKey: ["fetchCopilotPrompts"],
+    queryFn: getAllCopilotPrompts
+  })
+
   const { mutate: deletePrompt } = useMutation({
     mutationFn: deletePromptById,
     onSuccess: () => {
@@ -197,6 +205,63 @@ export const PromptBody = () => {
       </div>
     )
   }
+
+  function copilotPrompts() {
+    return (
+      <div>
+        {copilotStatus === "pending" && <Skeleton paragraph={{ rows: 8 }} />}
+
+        {copilotStatus === "success" && (
+          <Table
+            columns={[
+              {
+                title: t("managePrompts.columns.title"),
+                dataIndex: "key",
+                key: "key",
+                render: (content) => (
+                  <span className="line-clamp-1">
+                    <Tag color={tagColors[content || "default"]}>
+                      {t(`common:copilot.${content}`)}
+                    </Tag>
+                  </span>
+                )
+              },
+              {
+                title: t("managePrompts.columns.prompt"),
+                dataIndex: "prompt",
+                key: "prompt",
+                render: (content) => (
+                  <span className="line-clamp-1">{content}</span>
+                )
+              },
+              {
+                title: t("managePrompts.columns.actions"),
+                render: (_, record) => (
+                  <div className="flex gap-4">
+                    <Tooltip title={t("managePrompts.tooltip.edit")}>
+                      <button
+                        onClick={() => {
+                          // setEditId(record.id)
+                          // editForm.setFieldsValue(record)
+                          // setOpenEdit(true)
+                        }}
+                        className="text-gray-500 dark:text-gray-400">
+                        <Pen className="size-4" />
+                      </button>
+                    </Tooltip>
+                  </div>
+                )
+              }
+            ]}
+            bordered
+            dataSource={copilotData}
+            rowKey={(record) => record.key}
+          />
+        )}
+      </div>
+    )
+  }
+
   return (
     <div>
       <div className="flex items-center justify-end mb-6">
@@ -218,6 +283,7 @@ export const PromptBody = () => {
         />
       </div>
       {selectedSegment === "custom" && customPrompts()}
+      {selectedSegment === "copilot" && copilotPrompts()}
 
       <Modal
         title={t("managePrompts.modal.addTitle")}

src/utils/color.ts

@@ -0,0 +1,8 @@
+export const tagColors = {
+    summary: "blue",
+    explain: "green",
+    translate: "purple",
+    custom: "orange",
+    rephrase: "yellow"
+  }
+