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/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`

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);
+  border: 1px solid var(--color-border);
-  margin: 15px 20px;
+  margin: 15px 24px;
   margin-bottom: 0;
 `