From 5894e18f4f787f155bc1f7f29d7687c80b254c76 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Tue, 3 Jun 2025 01:18:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20add=20clear=20conversat?=
 =?UTF-8?q?ion=20button=20to=20input=20area=20with=20symmetric=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add clear context button positioned on the left side of input area
- Create symmetric layout with clear button (left) and send button (right)
- Standardize both buttons to 32x32px size for consistent appearance
- Apply distinct styling: gray background for clear (red on hover), purple for send
- Add smooth transition animations for better user experience
- Align buttons vertically centered for improved visual balance

The clear conversation button provides quick access to context clearing
functionality directly from the input area, matching the design patterns
shown in Semi Design documentation and improving overall user workflow.
---
 .../playground/CustomInputRender.js           | 35 +++++++++++++++++--
 web/src/index.css                             |  4 +++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/web/src/components/playground/CustomInputRender.js b/web/src/components/playground/CustomInputRender.js
index 90bc33bc..ff62c104 100644
--- a/web/src/components/playground/CustomInputRender.js
+++ b/web/src/components/playground/CustomInputRender.js
@@ -4,20 +4,51 @@ const CustomInputRender = (props) => {
   const { detailProps } = props;
   const { clearContextNode, uploadNode, inputNode, sendNode, onClick } = detailProps;
 
+  // 清空按钮
+  const styledClearNode = clearContextNode
+    ? React.cloneElement(clearContextNode, {
+      className: `!rounded-full !bg-gray-100 hover:!bg-red-500 hover:!text-white flex-shrink-0 transition-all ${clearContextNode.props.className || ''}`,
+      style: {
+        ...clearContextNode.props.style,
+        width: '32px',
+        height: '32px',
+        minWidth: '32px',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }
+    })
+    : null;
+
+  // 发送按钮
   const styledSendNode = React.cloneElement(sendNode, {
-    className: `!rounded-full !bg-purple-500 hover:!bg-purple-600 flex-shrink-0 ${sendNode.props.className || ''}`
+    className: `!rounded-full !bg-purple-500 hover:!bg-purple-600 flex-shrink-0 transition-all ${sendNode.props.className || ''}`,
+    style: {
+      ...sendNode.props.style,
+      width: '32px',
+      height: '32px',
+      minWidth: '32px',
+      padding: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
   });
 
   return (
     <div className="p-2 sm:p-4">
       <div
-        className="flex items-end gap-2 sm:gap-3 p-2 bg-gray-50 rounded-xl sm:rounded-2xl shadow-sm hover:shadow-md transition-shadow"
+        className="flex items-center gap-2 sm:gap-3 p-2 bg-gray-50 rounded-xl sm:rounded-2xl shadow-sm hover:shadow-md transition-shadow"
         style={{ border: '1px solid var(--semi-color-border)' }}
         onClick={onClick}
       >
+        {/* 清空对话按钮 - 左边 */}
+        {styledClearNode}
         <div className="flex-1">
           {inputNode}
         </div>
+        {/* 发送按钮 - 右边 */}
         {styledSendNode}
       </div>
     </div>
diff --git a/web/src/index.css b/web/src/index.css
index 417fdd84..d1ca9735 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -307,4 +307,8 @@ code {
 
 .semi-chat-chatBox-action {
   column-gap: 0 !important;
+}
+
+.semi-chat-inputBox-clearButton.semi-button .semi-icon {
+  font-size: 20px !important;
 }
\ No newline at end of file