feat: redesign settings page

app/containers/Chat/ChatActions.tsx

@@ -198,7 +198,7 @@ export function ChatActions(props: {
       <Popover
         content={content}
         trigger="click"
-        placement="lt"
+        placement="rt"
         noArrow
         popoverClassName="border-actions-popover border-gray-200 rounded-md shadow-actions-popover w-actions-popover bg-white "
       >
@@ -219,7 +219,7 @@ export function ChatActions(props: {
               key={act.text}
               content={act.text}
               popoverClassName={`${popoverClassName}`}
-              placement={ind ? "t" : "rt"}
+              placement={ind ? "t" : "lt"}
             >
               <div
                 className="h-[32px] w-[32px] flex items-center justify-center hover:bg-gray-200 hover:rounded-action-btn"
@@ -239,7 +239,7 @@ export function ChatActions(props: {
               key={act.text}
               content={act.text}
               popoverClassName={`${popoverClassName}`}
-              placement={ind === arr.length - 1 ? "lt" : "t"}
+              placement={ind === arr.length - 1 ? "rt" : "t"}
             >
               <div
                 className="h-[32px] w-[32px] flex items-center justify-center hover:bg-gray-200 hover:rounded-action-btn"

app/containers/Chat/ChatMessagePanel.tsx

@@ -153,10 +153,6 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
       {messages.map((message, i) => {
         const isUser = message.role === "user";
         const isContext = i < context.length;
-        const showActions =
-          i > 0 &&
-          !(message.preview || message.content.length === 0) &&
-          !isContext;
 
         const shouldShowClearContextDivider = i === clearContextIndex - 1;
 
@@ -237,7 +233,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
                   message={message}
                   inputRef={inputRef}
                   isUser={isUser}
-                  showActions={showActions}
+                  isContext={isContext}
                   setIsLoading={setIsLoading}
                   setShowPromptModal={setShowPromptModal}
                 />

app/containers/Chat/ChatPanel.tsx

@@ -25,7 +25,6 @@ import ChatInputPanel, { ChatInputPanelInstance } from "./ChatInputPanel";
 import ChatMessagePanel, { RenderMessage } from "./ChatMessagePanel";
 import { useAllModels } from "@/app/utils/hooks";
 import useRows from "@/app/hooks/useRows";
-import useMobileScreen from "@/app/hooks/useMobileScreen";
 import SessionConfigModel from "./SessionConfigModal";
 import useScrollToBottom from "@/app/hooks/useScrollToBottom";
 
@@ -34,6 +33,8 @@ function _Chat() {
   const session = chatStore.currentSession();
   const config = useAppConfig();
 
+  const { isMobileScreen } = config;
+
   const [showExport, setShowExport] = useState(false);
   const [showModelSelector, setShowModelSelector] = useState(false);
 
@@ -44,7 +45,6 @@ function _Chat() {
   const chatInputPanelRef = useRef<ChatInputPanelInstance | null>(null);
 
   const [hitBottom, setHitBottom] = useState(true);
-  const isMobileScreen = useMobileScreen();
 
   const [attachImages, setAttachImages] = useState<string[]>([]);
 
@@ -295,11 +295,7 @@ function _Chat() {
         />
       )}
 
-      <PromptToast
-        showToast={!hitBottom}
-        showModal={showPromptModal}
-        setShowModal={setShowPromptModal}
-      />
+      <PromptToast showToast={!hitBottom} setShowModal={setShowPromptModal} />
 
       {showPromptModal && (
         <SessionConfigModel onClose={() => setShowPromptModal(false)} />

app/containers/Chat/EditMessageModal.tsx

@@ -8,6 +8,7 @@ import { ContextPrompts } from "@/app/components/mask";
 
 import CancelIcon from "@/app/icons/cancel.svg";
 import ConfirmIcon from "@/app/icons/confirm.svg";
+import Input from "@/app/components/Input";
 
 export function EditMessageModal(props: { onClose: () => void }) {
   const chatStore = useChatStore();
@@ -47,15 +48,16 @@ export function EditMessageModal(props: { onClose: () => void }) {
             title={Locale.Chat.EditMessage.Topic.Title}
             subTitle={Locale.Chat.EditMessage.Topic.SubTitle}
           >
-            <input
+            <Input
               type="text"
               value={session.topic}
-              onInput={(e) =>
+              onChange={(e) =>
                 chatStore.updateCurrentSession(
-                  (session) => (session.topic = e.currentTarget.value),
+                  (session) => (session.topic = e || ""),
                 )
               }
-            ></input>
+              className=" text-center"
+            ></Input>
           </ListItem>
         </List>
         <ContextPrompts

app/containers/Chat/MessageActions.tsx

@@ -23,7 +23,8 @@ export type RenderMessage = ChatMessage & { preview?: boolean };
 export interface MessageActionsProps {
   message: RenderMessage;
   isUser: boolean;
-  showActions: boolean;
+  isContext: boolean;
+  showActions?: boolean;
   inputRef: RefObject<HTMLTextAreaElement>;
   className?: string;
   setIsLoading?: (value: boolean) => void;
@@ -96,12 +97,33 @@ const genActionsShema = (
   ];
 };
 
+enum GroupType {
+  "streaming" = "streaming",
+  "isContext" = "isContext",
+  "normal" = "normal",
+}
+
+const groupsTypes = {
+  [GroupType.streaming]: [[Locale.Chat.Actions.Stop]],
+  [GroupType.isContext]: [["Edit"]],
+  [GroupType.normal]: [
+    [
+      Locale.Chat.Actions.Retry,
+      "Edit",
+      Locale.Chat.Actions.Copy,
+      Locale.Chat.Actions.Pin,
+      Locale.Chat.Actions.Delete,
+    ],
+  ],
+};
+
 export default function MessageActions(props: MessageActionsProps) {
   const {
     className,
     message,
     isUser,
-    showActions,
+    isContext,
+    showActions = true,
     setIsLoading,
     inputRef,
     setShowPromptModal,
@@ -228,6 +250,12 @@ export default function MessageActions(props: MessageActionsProps) {
 
   const onCopy = () => copyToClipboard(getMessageTextContent(message));
 
+  const groupsType = [
+    message.streaming && GroupType.streaming,
+    isContext && GroupType.isContext,
+    GroupType.normal,
+  ].find((i) => i) as GroupType;
+
   return (
     showActions && (
       <div
@@ -254,19 +282,7 @@ export default function MessageActions(props: MessageActionsProps) {
             onResend,
             onUserStop,
           })}
-          groups={
-            message.streaming
-              ? [[Locale.Chat.Actions.Stop]]
-              : [
-                  [
-                    Locale.Chat.Actions.Retry,
-                    "Edit",
-                    Locale.Chat.Actions.Copy,
-                    Locale.Chat.Actions.Pin,
-                    Locale.Chat.Actions.Delete,
-                  ],
-                ]
-          }
+          groups={groupsTypes[groupsType]}
           className="flex flex-row gap-1  p-1"
         />
       </div>

app/containers/Chat/PromptToast.tsx

@@ -7,7 +7,6 @@ import styles from "./index.module.scss";
 
 export default function PromptToast(props: {
   showToast?: boolean;
-  showModal?: boolean;
   setShowModal: (_: boolean) => void;
 }) {
   const chatStore = useChatStore();

app/containers/Chat/SessionConfigModal.tsx

@@ -1,14 +1,15 @@
-import { ListItem, Modal, showConfirm } from "@/app/components/ui-lib";
+import { Modal, showConfirm } from "@/app/components/ui-lib";
 import { useChatStore } from "@/app/store/chat";
 import { useMaskStore } from "@/app/store/mask";
 import { useNavigate } from "react-router-dom";
 import Locale from "@/app/locales";
 import { IconButton } from "@/app/components/button";
-import { MaskConfig } from "@/app/components/mask";
 import { Path } from "@/app/constant";
 
 import ResetIcon from "@/app/icons/reload.svg";
 import CopyIcon from "@/app/icons/copy.svg";
+import MaskConfig from "@/app/containers/Settings/MaskConfig";
+import { ListItem } from "@/app/components/List";
 
 export default function SessionConfigModel(props: { onClose: () => void }) {
   const chatStore = useChatStore();

app/containers/Chat/index.tsx

@@ -17,7 +17,6 @@ import { showConfirm } from "@/app/components/ui-lib";
 import AddIcon from "@/app/icons/addIcon.svg";
 import NextChatTitle from "@/app/icons/nextchatTitle.svg";
 // import { ListHoodProps } from "@/app/containers/types";
-import useMobileScreen from "@/app/hooks/useMobileScreen";
 import { getTime } from "@/app/utils";
 import DeleteIcon from "@/app/icons/deleteIcon.svg";
 import LogIcon from "@/app/icons/logIcon.svg";
@@ -120,8 +119,10 @@ export default MenuLayout(function SessionList(props) {
     ],
   );
   const navigate = useNavigate();
-  const isMobileScreen = useMobileScreen();
   const config = useAppConfig();
+
+  const { isMobileScreen } = config;
+
   const chatStore = useChatStore();
   const { pathname: currentPath } = useLocation();