feat: copilot context menu for tool

src/components/Common/Playground/Message.tsx

@@ -1,6 +1,6 @@
 import Markdown from "../../Common/Markdown"
 import React from "react"
-import { Image, Tooltip } from "antd"
+import { Tag, Image, Tooltip } from "antd"
 import { WebSearch } from "./WebSearch"
 import {
   CheckIcon,
@@ -17,6 +17,7 @@ import { useTTS } from "@/hooks/useTTS"
 
 type Props = {
   message: string
+  message_type?: string
   hideCopy?: boolean
   botAvatar?: JSX.Element
   userAvatar?: JSX.Element
@@ -76,13 +77,21 @@ export const PlaygroundMessage = (props: Props) => {
             props.currentMessageIndex === props.totalMessages - 1 ? (
               <WebSearch />
             ) : null}
-
+            <div>
+              {props?.message_type && (
+                <Tag color="blue">{props?.message_type}</Tag>
+              )}
+            </div>
             <div className="flex flex-grow flex-col">
               {!editMode ? (
                 props.isBot ? (
                   <Markdown message={props.message} />
                 ) : (
-                  <p className="prose dark:prose-invert whitespace-pre-line	 prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark">
+                  <p
+                    className={`prose 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-xs"
+                    }`}>
                     {props.message}
                   </p>
                 )