proper display

src/entities/action/lib.ts

@@ -0,0 +1,20 @@
+import type { CommentAction } from "./schema";
+
+type ActionAttachmentType = "empty" | "image" | "voice";
+
+const imageExtensions = ["jpeg", "jpg", "png"];
+const voiceExtensions = ["mp3"];
+
+export function getActionAttachmentType(
+  action: CommentAction,
+): ActionAttachmentType {
+  if (action.fileUrls.length === 0) {
+    return "empty";
+  } else if (imageExtensions.includes(action.fileUrls[0].split(".").at(-1)!)) {
+    return "image";
+  } else if (voiceExtensions.includes(action.fileUrls[0].split(".").at(-1)!)) {
+    return "voice";
+  } else {
+    return "empty";
+  }
+}

src/widgets/chain-editor/ui/ChainEditor.tsx

@@ -2,6 +2,8 @@ import type { Chain } from "@/entities/chain/schema";
 import { useChainState } from "@/entities/chain/model";
 import { useNavigate } from "@tanstack/react-router";
 
+import { getActionAttachmentType } from "@/entities/action/lib";
+
 import { useState, useRef } from "react";
 import humanizeDuration from "humanize-duration";
 import { upsertChain } from "@/entities/chain/api/upsert";
@@ -99,15 +101,28 @@ export default function ChainEditor({ chain }: ChainEditorProps) {
         className="no-scrollbar flex grow flex-col items-center gap-y-24 overflow-y-scroll pb-20 pt-8"
       >
         {chain.actions.map((action, index) => {
-          if (action.actionType === "comment")
+          if (action.actionType === "comment") console.log(action);
+
+          if (action.actionType === "comment") {
+            const attachmentType = getActionAttachmentType(action);
+
             return (
               <div
                 key={index}
-                className="relative w-[450px] select-none whitespace-pre-line rounded-md bg-white p-4 text-[#4C4E64DE] opacity-[84%] shadow-lg after:absolute after:-bottom-12 after:left-1/2 after:h-8 after:w-1 after:-translate-x-1/2 after:rounded-md after:bg-[#666CFF] after:opacity-[12%]"
+                className="relative w-[450px] select-none whitespace-pre-line rounded-md bg-white text-[#4C4E64DE] opacity-[84%] shadow-lg after:absolute after:-bottom-12 after:left-1/2 after:h-8 after:w-1 after:-translate-x-1/2 after:rounded-md after:bg-[#666CFF] after:opacity-[12%]"
               >
-                {action.text}
+                {attachmentType === "image" && (
+                  <img
+                    src={action.fileUrls[0]}
+                    alt="Image"
+                    draggable={false}
+                    className={`w-full select-none ${!action.text && "rounded-b-md"} rounded-t-md`}
+                  />
+                )}
+                {action.text && <div className="p-4">{action.text}</div>}
               </div>
             );
+          }
 
           return (
             <div