✨ feat(ui): add clear conversation button to input area with symmetric layout

- 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.

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>

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;
 }