From 2866bcc7afd4dc76afe0e97cd0e61335f28e6ea8 Mon Sep 17 00:00:00 2001
From: CaiHQ <caihq@pku.edu.cn>
Date: Mon, 24 Feb 2025 09:18:06 +0800
Subject: [PATCH] feat: mock 4 button

---
 src/components/Common/Playground/Message.tsx | 52 +++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index ee330cb..6e8a971 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -9,7 +9,12 @@ import {
   Pen,
   PlayIcon,
   RotateCcw,
-  Square
+  Square,
+  Star,
+  ThumbsUp,
+  ThumbsDown,
+  MessageSquareShare,
+  ArrowUpSquare
 } from "lucide-react"
 import { EditMessageForm } from "./EditMessageForm"
 import { useTranslation } from "react-i18next"
@@ -316,6 +321,51 @@ export const PlaygroundMessage = (props: Props) => {
                   </button>
                 </Tooltip>
               )}
+              { (
+                <Tooltip title="收藏">
+                  <button
+                    aria-label="收藏"
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    <Star className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                  </button>
+                </Tooltip>
+              )}
+              { (
+                <Tooltip title="发布语用">
+                  <button
+                    aria-label="发布语用"
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    <ArrowUpSquare className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                  </button>
+                </Tooltip>
+              )}
+              { (
+                <Tooltip title="发布对话">
+                  <button
+                    aria-label="发布对话"
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    <MessageSquareShare className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                  </button>
+                </Tooltip>
+              )}
+              { (
+                <Tooltip title="点赞">
+                  <button
+                    aria-label="点赞"
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    <ThumbsUp className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                  </button>
+                </Tooltip>
+              )}
+              { (
+                <Tooltip title="点踩">
+                  <button
+                    aria-label="点踩"
+                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                    <ThumbsDown className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
+                  </button>
+                </Tooltip>
+              )}
             </div>
           ) : (
             // add invisible div to prevent layout shift