Update message icons and enhance MessageHide component for better context display

src/message.tsx

@@ -20,7 +20,7 @@ import {
   ChatBubbleActionWrapper,
 } from "@/components/ui/chat/chat-bubble";
 import { useToast } from "@/hooks/use-toast";
-import { ClipboardIcon, PencilIcon, TrashIcon } from "lucide-react";
+import { ClipboardIcon, PencilIcon, MessageSquareOffIcon } from "lucide-react";
 
 export const isVailedJSON = (str: string): boolean => {
   try {
@@ -158,7 +158,7 @@ export default function Message(props: Props) {
         </ChatBubbleMessage>
         <ChatBubbleActionWrapper>
           <ChatBubbleAction
-            icon={<TrashIcon className="size-4" />}
+            icon={<MessageSquareOffIcon className="size-4" />}
             onClick={() => {
               chatStore.history[messageIndex].hide =
                 !chatStore.history[messageIndex].hide;

src/messageHide.tsx

@@ -6,5 +6,12 @@ interface Props {
 }
 
 export function MessageHide({ chat }: Props) {
-  return <div>{getMessageText(chat).split("\n")[0].slice(0, 18)} ...</div>;
+  return (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <span>{getMessageText(chat).split("\n")[0].slice(0, 18)} ...</span>
+      <span className="rounded-md bg-secondary px-2 py-1 text-xs">
+        Removed from context
+      </span>
+    </div>
+  );
 }