feat: optiminize message&img display

app/components/Imgs/index.tsx

@@ -0,0 +1,52 @@
+import { CSSProperties } from "react";
+import { getMessageImages } from "@/app/utils";
+import { RequestMessage } from "@/app/client/api";
+
+interface ImgsProps {
+  message: RequestMessage;
+  isMobileScreen?: boolean;
+}
+
+export default function Imgs(props: ImgsProps) {
+  const { message, isMobileScreen } = props;
+  const imgSrcs = getMessageImages(message);
+
+  if (imgSrcs.length < 1) {
+    return <></>;
+  }
+
+  let imgVars = {
+    "--imgs-width": `calc(var(--max-message-width) - ${
+      imgSrcs.length - 1
+    }*0.25rem)`,
+    "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`,
+  };
+
+  if (isMobileScreen) {
+    imgVars = {
+      "--imgs-width": `calc(var(--max-message-width) - ${
+        imgSrcs.length - 1
+      }*0.25rem)`,
+      "--img-width": `calc(var(--imgs-width)/ ${imgSrcs.length})`,
+    };
+  }
+
+  return (
+    <div
+      className={`w-[100%] mt-[0.625rem] flex gap-1`}
+      style={imgVars as CSSProperties}
+    >
+      {imgSrcs.map((image, index) => {
+        return (
+          <div
+            key={index}
+            className="flex-1 min-w-[var(--img-width)] pb-[var(--img-width)] object-cover bg-cover bg-no-repeat bg-center box-border rounded-chat-img"
+            style={{
+              backgroundImage: `url(${image})`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

app/components/Screen/index.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from "react-router-dom";
 import { useMemo, ReactNode } from "react";
-import { Path, SlotID } from "@/app/constant";
+import { Path, SIDEBAR_ID, SlotID } from "@/app/constant";
 import { getLang } from "@/app/locales";
 
 import useMobileScreen from "@/app/hooks/useMobileScreen";
@@ -47,7 +47,9 @@ export default function Screen(props: ScreenProps) {
         props.noAuth
       ) : (
         <>
-          <div className={sidebarClassName}>{props.sidebar}</div>
+          <div className={sidebarClassName} id={SIDEBAR_ID}>
+            {props.sidebar}
+          </div>
 
           <div
             className={pageClassName}