From 3ad8243531e1e6ca5427c0a45d99727aa51d3359 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Fri, 20 Dec 2024 18:42:36 +0800
Subject: [PATCH] Update message icons and enhance MessageHide component for
 better context display

---
 src/message.tsx     | 4 ++--
 src/messageHide.tsx | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/message.tsx b/src/message.tsx
index 3ed507e..1a9c7ce 100644
--- a/src/message.tsx
+++ b/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;
diff --git a/src/messageHide.tsx b/src/messageHide.tsx
index 569f4f6..f8bfd69 100644
--- a/src/messageHide.tsx
+++ b/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>
+  );
 }