Enhanced mobile version UI UX

app/components/chat.tsx

@@ -174,11 +174,24 @@ function PromptToast(props: {
 
 function useSubmitHandler() {
   const config = useAppConfig();
+  const isMobileScreen = useMobileScreen();
   const submitKey = config.submitKey;
+  const mobileSubmitKey = config.mobileSubmitKey;
 
   const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key !== "Enter") return false;
     if (e.key === "Enter" && e.nativeEvent.isComposing) return false;
+    if (isMobileScreen) return (
+      (mobileSubmitKey === SubmitKey.AltEnter && e.altKey) ||
+      (mobileSubmitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
+      (mobileSubmitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
+      (mobileSubmitKey === SubmitKey.MetaEnter && e.metaKey) ||
+      (mobileSubmitKey === SubmitKey.Enter &&
+        !e.altKey &&
+        !e.ctrlKey &&
+        !e.shiftKey &&
+        !e.metaKey)
+    );
     return (
       (submitKey === SubmitKey.AltEnter && e.altKey) ||
       (submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
@@ -316,9 +329,31 @@ function ChatAction(props: {
     });
   }
 
+  // useEffect(() => {
+  //   // updateWidth();
+  //   setTimeout(updateWidth, 600); // 手机优化，给DOM元素一些加载的时间
+  // }, []);
   useEffect(() => {
-    // updateWidth();
-    setTimeout(updateWidth, 600); // 手机优化，给DOM元素一些加载的时间
+    let resizeObserver: ResizeObserver;
+    if (window.ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        updateWidth();
+      });
+      if (iconRef.current && textRef.current) {
+        resizeObserver.observe(iconRef.current);
+        resizeObserver.observe(textRef.current);
+      }
+    } else {
+      setTimeout(updateWidth, 600); // 增加600ms延迟，给DOM元素一些加载的时间
+    }
+
+    return () => {
+      if (resizeObserver) {
+        if (iconRef.current) resizeObserver.unobserve(iconRef.current);
+        if (textRef.current) resizeObserver.unobserve(textRef.current);
+        resizeObserver.disconnect();
+      }
+    };
   }, []);
 
   return (
@@ -751,10 +786,11 @@ export function Chat() {
           >
             {!session.topic ? DEFAULT_TOPIC : session.topic}
           </div>
-          <div className="window-header-sub-title">
-            {Locale.Chat.SubTitle(session.messages.length)}
-          </div>
-          {/* todo */}
+          {!isMobileScreen && (
+            <div className="window-header-sub-title">
+              {Locale.Chat.SubTitle(session.messages.length)}
+            </div>
+          )}
         </div>
         <div className="window-actions">
           <div className={"window-action-button" + " " + styles.mobile}>
@@ -765,13 +801,15 @@ export function Chat() {
               onClick={() => navigate(Path.Home)}
             />
           </div>
-          <div className="window-action-button">
-            <IconButton
-              icon={<RenameIcon />}
-              bordered
-              onClick={renameSession}
-            />
-          </div>
+          {!isMobileScreen && (
+            <div className="window-action-button">
+              <IconButton
+                icon={<RenameIcon />}
+                bordered
+                onClick={renameSession}
+              />
+            </div>
+          )}
           <div className="window-action-button">
             <IconButton
               icon={<ExportIcon />}
@@ -936,7 +974,7 @@ export function Chat() {
           <textarea
             ref={inputRef}
             className={styles["chat-input"]}
-            placeholder={Locale.Chat.Input(submitKey)}
+            placeholder={isMobileScreen ? '' : Locale.Chat.Input(submitKey)}
             onInput={(e) => onInput(e.currentTarget.value)}
             value={userInput}
             onKeyDown={onInputKeyDown}