Move attachment bar to top

Author: compulim

packages/component/src/SendBox/BasicSendBox.tsx

@@ -78,6 +78,7 @@ function BasicSendBox(props: BasicSendBoxProps) {
     >
       <SuggestedActions />
       <div className="webchat__send-box__main">
+        <AttachmentBar className="webchat__send-box__attachment-bar" />
         <SendBoxToolbarMiddlewareProxy className={buttonClassName} request={undefined} />
         <div className="webchat__send-box__editable">
           {speechInterimsVisible ? (
@@ -91,7 +92,6 @@ function BasicSendBox(props: BasicSendBoxProps) {
         ) : (
           <SendButton className={buttonClassName} />
         )}
-        <AttachmentBar className="webchat__send-box__attachment-bar" />
       </div>
     </div>
   );

packages/component/src/Styles/StyleSet/SendBox.ts

@@ -39,7 +39,7 @@ export default function createSendBoxStyle({
 
         // For unknown reason, if the attachment bar does not exist, the second row is still occupying about 1px, we need to hide it.
         '&:has(.webchat__send-box__attachment-bar)': {
-          gridTemplateAreas: '"upload-button text-box send-button" "attachment-bar attachment-bar attachment-bar"',
+          gridTemplateAreas: '"attachment-bar attachment-bar attachment-bar" "upload-button text-box send-button"',
           gridTemplateRows: 'auto auto'
         }
       },
@@ -59,7 +59,7 @@ export default function createSendBoxStyle({
 
       '& .webchat__send-box__attachment-bar': {
         padding: `${paddingRegular}px`,
-        paddingBlockStart: `0px`
+        paddingBlockEnd: `0px`
       }
     }
   } satisfies StyleSet;