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>
+  );
+}