Optimized mobile layout with chat action component

app/components/chat.tsx

@@ -309,6 +309,7 @@ function ChatAction(props: {
     const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
     const textWidth = getWidth(textRef.current);
     const iconWidth = getWidth(iconRef.current);
+    // console.log(`updateWidth called: textWidth = ${textWidth}, iconWidth = ${iconWidth}`);
     setWidth({
       full: textWidth + iconWidth,
       icon: iconWidth,
@@ -316,7 +317,8 @@ function ChatAction(props: {
   }
 
   useEffect(() => {
-    updateWidth();
+    // updateWidth();
+    setTimeout(updateWidth, 600); // 手机优化，给DOM元素一些加载的时间
   }, []);
 
   return (
@@ -454,7 +456,6 @@ export function ChatActions(props: {
 
       <ChatAction
         text={Locale.Chat.InputActions.Clear}
-        // icon={<FontAwesomeIcon icon="fa-regular fa-trash-can" />}
         icon={<FontAwesomeIcon icon={faTrashCan} />}
         onClick={() => {
           chatStore.updateCurrentSession((session) => {
@@ -753,6 +754,7 @@ export function Chat() {
           <div className="window-header-sub-title">
             {Locale.Chat.SubTitle(session.messages.length)}
           </div>
+          {/* todo */}
         </div>
         <div className="window-actions">
           <div className={"window-action-button" + " " + styles.mobile}>