Add name property to Message type

src/components/Common/Playground/Message.tsx

@@ -11,6 +11,7 @@ type Props = {
   botAvatar?: JSX.Element
   userAvatar?: JSX.Element
   isBot: boolean
+  name: string
 }
 
 export const PlaygroundMessage = (props: Props) => {
@@ -47,6 +48,13 @@ export const PlaygroundMessage = (props: Props) => {
             </div>
           </div>
           <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
+          {
+            props.isBot && (
+              <span className="absolute mb-8 -top-4 left-0 text-xs text-gray-400 dark:text-gray-500">
+                {props.name}
+              </span>
+            )
+          }
             <div className="flex flex-grow flex-col gap-3">
               <Markdown message={props.message} />
             </div>