From 3d6c84de6da1cc5e86afc3903e3e57871fe182d8 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 10 Jul 2025 22:36:48 +0800
Subject: [PATCH] refactor: improve styling and layout in MessageTools and
 Prompt components

- Adjusted spacing and border styles in MessageTools for better alignment.
- Updated margin and border properties in Prompt for consistent UI.
- Enhanced background color handling in ToolContentWrapper based on status.
---
 .../src/pages/home/Messages/MessageTools.tsx    | 17 ++++++++++++++---
 src/renderer/src/pages/home/Messages/Prompt.tsx |  4 ++--
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/MessageTools.tsx b/src/renderer/src/pages/home/Messages/MessageTools.tsx
index 75359731a8..2afc1fe201 100644
--- a/src/renderer/src/pages/home/Messages/MessageTools.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTools.tsx
@@ -209,7 +209,7 @@ const MessageTools: FC<Props> = ({ block }) => {
         <MessageTitleLabel>
           <TitleContent>
             <ToolName align="center" gap={4}>
-              {tool.serverName}: {tool.name}
+              {tool.serverName} : {tool.name}
               {isToolAutoApproved(tool) && (
                 <Tooltip title={t('message.tools.autoApproveEnabled')} mouseLeaveDelay={0}>
                   <ShieldCheck size={14} color="var(--status-color-success)" />
@@ -269,7 +269,7 @@ const MessageTools: FC<Props> = ({ block }) => {
         }
       }}>
       <ToolContainer>
-        <ToolContentWrapper>
+        <ToolContentWrapper className={status}>
           <CollapseContainer
             ghost
             activeKey={activeKeys}
@@ -371,9 +371,20 @@ const CollapsedContent: FC<{ isExpanded: boolean; resultString: string }> = ({ i
 
 const ToolContentWrapper = styled.div`
   padding: 1px;
-  background-color: var(--color-background-soft);
   border-radius: 8px;
   overflow: hidden;
+
+  .ant-collapse {
+    border: 1px solid var(--color-border);
+  }
+
+  &.pending,
+  &.invoking {
+    background-color: var(--color-background-soft);
+    .ant-collapse {
+      border: none;
+    }
+  }
 `
 
 const ActionsBar = styled.div`
diff --git a/src/renderer/src/pages/home/Messages/Prompt.tsx b/src/renderer/src/pages/home/Messages/Prompt.tsx
index 392ded2279..10ec05fcf0 100644
--- a/src/renderer/src/pages/home/Messages/Prompt.tsx
+++ b/src/renderer/src/pages/home/Messages/Prompt.tsx
@@ -33,8 +33,8 @@ const Container = styled.div<{ $isDark: boolean }>`
   padding: 11px 16px;
   border-radius: 10px;
   cursor: pointer;
-  border: 0.5px solid var(--color-border);
-  margin: 15px 20px;
+  border: 1px solid var(--color-border);
+  margin: 15px 24px;
   margin-bottom: 0;
 `