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();
+    let resizeObserver: ResizeObserver;
-    setTimeout(updateWidth, 600); // 手机优化，给DOM元素一些加载的时间
+    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">
+          {!isMobileScreen && (
-            {Locale.Chat.SubTitle(session.messages.length)}
+            <div className="window-header-sub-title">
-          </div>
+              {Locale.Chat.SubTitle(session.messages.length)}
-          {/* todo */}
+            </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">
+          {!isMobileScreen && (
-            <IconButton
+            <div className="window-action-button">
-              icon={<RenameIcon />}
+              <IconButton
-              bordered
+                icon={<RenameIcon />}
-              onClick={renameSession}
+                bordered
-            />
+                onClick={renameSession}
-          </div>
+              />
+            </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}

app/components/home.module.scss

@@ -183,42 +183,55 @@
   animation: slide-in ease 0.3s;
 }
 
-.chat-item-rename {
+.chat-item-rename,
-  position: absolute;
-  top: 10px;
-  right: 30px;
-  transition: all ease 0.3s;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.chat-item:hover > .chat-item-rename {
-  opacity: 0.5;
-  transform: translateX(-10px);
-}
-
-.chat-item:hover > .chat-item-rename:hover {
-  opacity: 1;
-}
-
 .chat-item-delete {
   position: absolute;
   top: 10px;
-  right: 0;
   transition: all ease 0.3s;
   opacity: 0;
   cursor: pointer;
 }
 
+.chat-item-rename {
+  right: 25px;
+}
+
+.chat-item-delete {
+  right: 0;
+}
+
+.chat-item:hover > .chat-item-rename,
 .chat-item:hover > .chat-item-delete {
   opacity: 0.5;
   transform: translateX(-10px);
 }
 
+.chat-item:hover > .chat-item-rename:hover,
 .chat-item:hover > .chat-item-delete:hover {
   opacity: 1;
 }
 
+@media (max-width: 600px) {
+  .chat-item-rename,
+  .chat-item-delete {
+    opacity: 0.6;
+  }
+
+  .chat-item-rename {
+    right: 35px;
+  }
+
+  .chat-item-delete {
+    right: 10px;
+  }
+
+  .chat-item:hover > .chat-item-rename,
+  .chat-item:hover > .chat-item-delete {
+    opacity: 0.5;
+    transform: translateX(0px);
+  }
+}
+
 .chat-item-info {
   display: flex;
   justify-content: space-between;
@@ -301,25 +314,10 @@
     }
   }
 
-  .chat-item-rename {
+  .chat-item-rename,
-    top: 15px;
-    right: 35px;
-    opacity: 1;
-  }
-
-  .chat-item:hover > .chat-item-rename {
-    opacity: 0.5;
-    right: 30px;
-  }
-
   .chat-item-delete {
     top: 15px;
-    opacity: 1; // 手机模式下始终显示
+    transition: all ease 0.3s;
-  }
-
-  .chat-item:hover > .chat-item-delete {
-    opacity: 0.5;
-    right: 5px;
   }
 
   .sidebar-tail {
@@ -580,12 +578,33 @@
 }
 
 @media only screen and (max-width: 600px) {
+  .chat-input-panel-inner {
+    justify-content: space-between; // 将子元素分开
+    align-items: center; // 使得子元素在一条平面上
+  }
+
   .chat-input {
     font-size: 16px;
+    height: 20px;  // 设置发送框的高度
+    width: calc(100% - 58px); // 给出了 58px 的空间给发送按钮
+    padding: 10px 0px 10px 10px; // 调整padding使得文字显示位置更符合人类审美
+    overflow-y: auto; // 只有滚动的时候才显示滚动条
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #888;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
   }
 
   .chat-input-send {
-    bottom: 30px;
+    width: 18px;
+    height: 18px;
+    margin-left: 10px; // 设置了10px的间隔
+    position: static; // 移除了定位属性
   }
 }
 

app/store/config.ts

@@ -20,6 +20,7 @@ export enum Theme {
 export const DEFAULT_CONFIG = {
   // submitKey: SubmitKey.CtrlEnter as SubmitKey,
   submitKey: SubmitKey.Enter,
+  mobileSubmitKey: SubmitKey.CtrlEnter,
   avatar: "1f603",
   fontSize: 14,
   theme: Theme.Auto as Theme,

app/styles/window.scss

@@ -34,4 +34,9 @@
 
 .window-action-button {
   margin-left: 10px;
+
+  @media (max-width: 600px) {
+    // width: 20px;
+    // height: 20px;
+  }
 }