feat: ui optiminize

app/containers/Chat/ChatPanel.tsx

@@ -278,7 +278,7 @@ function _Chat() {
       className={`
         relative flex flex-col overflow-hidden bg-chat-panel
         max-md:absolute max-md:h-[100vh] max-md:w-[100%]
-        md:h-[calc(100%-1.25rem)] md:my-2.5 md:ml-1 md:mr-2.5 md:rounded-md
+        md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md
         `}
       key={session.id}
     >

app/containers/Chat/components/ChatActions.tsx

@@ -12,17 +12,26 @@ import { Path } from "@/app/constant";
 
 import BottomIcon from "@/app/icons/bottom.svg";
 import StopIcon from "@/app/icons/pause.svg";
-import RobotIcon from "@/app/icons/robot.svg";
 import LoadingButtonIcon from "@/app/icons/loading.svg";
-import PromptIcon from "@/app/icons/prompt.svg";
-import MaskIcon from "@/app/icons/mask.svg";
-import BreakIcon from "@/app/icons/break.svg";
-import SettingsIcon from "@/app/icons/chat-settings.svg";
-import ImageIcon from "@/app/icons/image.svg";
+import PromptIcon from "@/app/icons/comandIcon.svg";
+import MaskIcon from "@/app/icons/maskIcon.svg";
+import BreakIcon from "@/app/icons/eraserIcon.svg";
+import SettingsIcon from "@/app/icons/configIcon.svg";
+import ImageIcon from "@/app/icons/uploadImgIcon.svg";
 import AddCircleIcon from "@/app/icons/addCircle.svg";
+import BottomArrow from "@/app/icons/downArrowLgIcon.svg";
 
 import Popover from "@/app/components/Popover";
 
+export interface Action {
+  onClick: () => void;
+  text: string;
+  isShow: boolean;
+  pcRender?: () => JSX.Element;
+  icon?: JSX.Element;
+  placement: "left" | "right";
+}
+
 export function ChatActions(props: {
   uploadImage: () => void;
   setAttachImages: (images: string[]) => void;
@@ -83,7 +92,7 @@ export function ChatActions(props: {
     }
   }, [chatStore, currentModel, models]);
 
-  const actions = [
+  const actions: Action[] = [
     {
       onClick: stopAll,
       text: Locale.Chat.InputActions.Stop,
@@ -91,6 +100,18 @@ export function ChatActions(props: {
       icon: <StopIcon />,
       placement: "left",
     },
+    {
+      onClick: () => props.showModelSelector(true),
+      text: currentModel,
+      isShow: true,
+      pcRender: () => (
+        <div className="flex items-center  justify-center gap-1 cursor-pointer rounded-chat-model-select pl-3 pr-2.5 py-2 font-common leading-4 bg-chat-actions-select-model">
+          {currentModel}
+          <BottomArrow />
+        </div>
+      ),
+      placement: "left",
+    },
     {
       onClick: props.scrollToBottom,
       text: Locale.Chat.InputActions.ToBottom,
@@ -98,13 +119,6 @@ export function ChatActions(props: {
       icon: <BottomIcon />,
       placement: "left",
     },
-    {
-      onClick: props.showChatSetting,
-      text: Locale.Chat.InputActions.Settings,
-      isShow: true,
-      icon: <SettingsIcon />,
-      placement: "right",
-    },
     {
       onClick: props.uploadImage,
       text: Locale.Chat.InputActions.UploadImage,
@@ -162,11 +176,11 @@ export function ChatActions(props: {
       placement: "right",
     },
     {
-      onClick: () => props.showModelSelector(true),
-      text: currentModel,
+      onClick: props.showChatSetting,
+      text: Locale.Chat.InputActions.Settings,
       isShow: true,
-      icon: <RobotIcon />,
-      placement: "left",
+      icon: <SettingsIcon />,
+      placement: "right",
     },
   ] as const;
 
@@ -174,7 +188,7 @@ export function ChatActions(props: {
     const content = (
       <div className="w-[100%]">
         {actions
-          .filter((v) => v.isShow)
+          .filter((v) => v.isShow && v.icon)
           .map((act) => {
             return (
               <div
@@ -212,6 +226,13 @@ export function ChatActions(props: {
       {actions
         .filter((v) => v.placement === "left" && v.isShow)
         .map((act, ind) => {
+          if (act.pcRender) {
+            return (
+              <div key={act.text} onClick={act.onClick}>
+                {act.pcRender()}
+              </div>
+            );
+          }
           return (
             <Popover
               key={act.text}

app/containers/Chat/index.tsx

@@ -119,7 +119,7 @@ export function SessionItem(props: {
             align={props.isMobileScreen ? "end" : "start"}
           >
             <div
-              className={` pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`}
+              className={`!absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`}
             >
               <DeleteIcon />
             </div>