feat/playground: 重构 playground组件

- 更新 Data 和 History组件的样式和布局
- 添加新的功能和交互，如热门搜索和智能体选择
- 优化组件性能和可维护性

src/components/Common/Playground/Message.tsx

@@ -60,12 +60,12 @@ export const PlaygroundMessage = (props: Props) => {
   return (
     <div className="group relative flex w-full flex-col items-end justify-center pb-2 md:px-4 text-gray-800 dark:text-gray-100">
       {/* <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> */}
-      <div className="flex flex-row gap-4 md:gap-6 my-2 m-auto w-full">
-        <div className="w-8 flex flex-col relative items-end">
+      <div className={`flex flex-row  gap-1 md:gap-1 my-2 m-auto w-full ${props.isBot ? "" : "flex-row-reverse"}`}>
+        <div className="w-8 flex flex-col relative items-center justify-center bottom-[8px]">
           <div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center  text-opacity-100r">
             {props.isBot ? (
               !props.botAvatar ? (
-                <div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400"></div>
+                <div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400 hidden"></div>
               ) : (
                 props.botAvatar
               )
@@ -78,13 +78,6 @@ export const PlaygroundMessage = (props: Props) => {
         </div>
         <div className="flex w-[calc(100%-50px)] flex-col gap-2 lg:w-[calc(100%-115px)]">
           <span className="text-xs font-bold text-gray-800 dark:text-white">
-            {props.isBot
-              ? props.name === "chrome::gemini-nano::page-assist"
-                ? "Gemini Nano"
-                : removeModelSuffix(
-                    props.name?.replaceAll(/accounts\/[^\/]+\/models\//g, "")
-                  )
-              : "You"}
           </span>
 
           {props.isBot &&
@@ -99,7 +92,7 @@ export const PlaygroundMessage = (props: Props) => {
               </Tag>
             )}
           </div>
-          <div className="flex flex-grow flex-col">
+          <div className={`flex flex-grow flex-col`}>
             {!editMode ? (
               props.isBot ? (
                 <>
@@ -140,9 +133,10 @@ export const PlaygroundMessage = (props: Props) => {
                 <p
                   className={`prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
                     props.message_type &&
-                    "italic text-gray-500 dark:text-gray-400 text-sm"
-                  }`}>
+                    "italic  dark:text-gray-400"
+                  }  flex flex-row-reverse`}>
                   {props.message}
+                  {/*<span className="bg-[#0000000a] inline-block py-[9px] text-[#000000d9] rounded-xl px-4 font-light text-sm">{props.message}</span>*/}
                 </p>
               )
             ) : (