feat: improve ChatUI attachment display (#9134)

Author: Soulter

astrbot/core/platform/sources/webchat/message_parts_helper.py

@@ -3,7 +3,7 @@
 import shutil
 import uuid
 from collections.abc import Awaitable, Callable, Sequence
-from pathlib import Path
+from pathlib import Path, PurePosixPath
 from typing import Any
 
 from astrbot.core.db.po import Attachment
@@ -29,6 +29,23 @@
 MEDIA_PART_TYPES = {"image", "record", "file", "video"}
 
 
+def _safe_display_filename(filename: str | None) -> str:
+    """Return a safe basename for display-only filenames.
+
+    Args:
+        filename: Candidate filename from a message payload or component.
+
+    Returns:
+        Sanitized basename, or an empty string when the value is unusable.
+    """
+    if not filename:
+        return ""
+    basename = (
+        PurePosixPath(str(filename).replace("\\", "/")).name.replace("\x00", "").strip()
+    )
+    return "" if basename in {"", ".", ".."} else basename
+
+
 def strip_message_parts_path_fields(message_parts: list[dict]) -> list[dict]:
     return [{k: v for k, v in part.items() if k != "path"} for part in message_parts]
 
@@ -229,14 +246,19 @@ async def build_webchat_message_parts(
             continue
 
         attachment_path = Path(attachment.path)
+        display_name = (
+            _safe_display_filename(part.get("filename")) or attachment_path.name
+        )
         message_parts.append(
             {
                 "type": attachment.type,
                 "attachment_id": attachment.attachment_id,
-                "filename": attachment_path.name,
+                "filename": display_name,
                 "path": str(attachment_path),
             }
         )
+        if display_name != attachment_path.name:
+            message_parts[-1]["stored_filename"] = attachment_path.name
 
     return message_parts
 
@@ -340,6 +362,7 @@ async def create_attachment_part_from_existing_file(
     insert_attachment: AttachmentInserter,
     attachments_dir: str | Path,
     fallback_dirs: Sequence[str | Path] = (),
+    display_name: str | None = None,
 ) -> dict | None:
     basename = Path(filename).name
     candidate_paths = [Path(attachments_dir) / basename]
@@ -358,11 +381,15 @@ async def create_attachment_part_from_existing_file(
     if not attachment:
         return None
 
-    return {
+    safe_display_name = _safe_display_filename(display_name)
+    part = {
         "type": attach_type,
         "attachment_id": attachment.attachment_id,
-        "filename": file_path.name,
+        "filename": safe_display_name or file_path.name,
     }
+    if part["filename"] != file_path.name:
+        part["stored_filename"] = file_path.name
+    return part
 
 
 async def message_chain_to_storage_message_parts(
@@ -464,8 +491,11 @@ async def _copy_file_to_attachment_part(
     if not attachment:
         return None
 
-    return {
+    part = {
         "type": attach_type,
         "attachment_id": attachment.attachment_id,
-        "filename": display_name or src_path.name,
+        "filename": _safe_display_filename(display_name) or src_path.name,
     }
+    if part["filename"] != target_path.name:
+        part["stored_filename"] = target_path.name
+    return part

astrbot/core/platform/sources/webchat/webchat_event.py

@@ -4,7 +4,7 @@
 import os
 import shutil
 import uuid
-from pathlib import Path
+from pathlib import Path, PurePosixPath
 
 from astrbot.api import logger
 from astrbot.api.event import AstrMessageEvent, MessageChain
@@ -122,12 +122,19 @@ async def _send(
             elif isinstance(comp, File):
                 # save file to local
                 file_path = await comp.get_file()
-                original_name = comp.name or os.path.basename(file_path)
+                raw_original_name = comp.name or os.path.basename(file_path)
+                original_name = (
+                    PurePosixPath(str(raw_original_name).replace("\\", "/"))
+                    .name.replace("\x00", "")
+                    .strip()
+                )
+                if original_name in {"", ".", ".."}:
+                    original_name = os.path.basename(file_path) or "file"
                 ext = os.path.splitext(original_name)[1] or ""
                 filename = f"{uuid.uuid4()!s}{ext}"
                 dest_path = os.path.join(attachments_dir, filename)
                 shutil.copy2(file_path, dest_path)
-                data = f"[FILE]{filename}"
+                data = f"[FILE]{filename}|{original_name}"
                 await web_chat_back_queue.put(
                     {
                         "type": "file",

astrbot/dashboard/services/chat_service.py

@@ -501,14 +501,15 @@ async def build_user_message_parts(self, message: str | list) -> list[dict]:
         )
 
     async def create_attachment_from_file(
-        self, filename: str, attach_type: str
+        self, filename: str, attach_type: str, display_name: str | None = None
     ) -> dict | None:
         return await create_attachment_part_from_existing_file(
             filename,
             attach_type=attach_type,
             insert_attachment=self.db.insert_attachment,
             attachments_dir=self.attachments_dir,
             fallback_dirs=[self.webchat_img_dir],
+            display_name=display_name,
         )
 
     async def resolve_webchat_file(
@@ -897,9 +898,14 @@ def build_attachment_saved_event(part: dict | None) -> str | None:
                             ):
                                 yield attachment_saved_event
                         elif msg_type == "file":
-                            filename = result_text.replace("[FILE]", "")
+                            filename = result_text.replace("[FILE]", "", 1)
+                            display_name = None
+                            if "|" in filename:
+                                filename, display_name = filename.split("|", 1)
                             part = await self.create_attachment_from_file(
-                                filename, "file"
+                                filename,
+                                "file",
+                                display_name=display_name,
                             )
                             message_accumulator.add_attachment(part)
                             if attachment_saved_event := build_attachment_saved_event(

astrbot/dashboard/services/live_chat_service.py

@@ -205,14 +205,15 @@ async def run_websocket_session(
             logger.info(f"[Live Chat] WebSocket 连接关闭: {username}")
 
     async def create_attachment_from_file(
-        self, filename: str, attach_type: str
+        self, filename: str, attach_type: str, display_name: str | None = None
     ) -> dict | None:
         return await create_attachment_part_from_existing_file(
             filename,
             attach_type=attach_type,
             insert_attachment=self.db.insert_attachment,
             attachments_dir=self.attachments_dir,
             fallback_dirs=[self.webchat_img_dir],
+            display_name=display_name,
         )
 
     @staticmethod
@@ -650,13 +651,27 @@ async def send_attachment_saved_event(part: dict | None) -> None:
                     message_accumulator.add_attachment(part)
                     await send_attachment_saved_event(part)
                 elif result_type == "file":
-                    filename = str(result_text).replace("[FILE]", "").split("|", 1)[0]
-                    part = await self.create_attachment_from_file(filename, "file")
+                    filename = str(result_text).replace("[FILE]", "", 1)
+                    display_name = None
+                    if "|" in filename:
+                        filename, display_name = filename.split("|", 1)
+                    part = await self.create_attachment_from_file(
+                        filename,
+                        "file",
+                        display_name=display_name,
+                    )
                     message_accumulator.add_attachment(part)
                     await send_attachment_saved_event(part)
                 elif result_type == "video":
-                    filename = str(result_text).replace("[VIDEO]", "").split("|", 1)[0]
-                    part = await self.create_attachment_from_file(filename, "video")
+                    filename = str(result_text).replace("[VIDEO]", "", 1)
+                    display_name = None
+                    if "|" in filename:
+                        filename, display_name = filename.split("|", 1)
+                    part = await self.create_attachment_from_file(
+                        filename,
+                        "video",
+                        display_name=display_name,
+                    )
                     message_accumulator.add_attachment(part)
                     await send_attachment_saved_event(part)
 

dashboard/src/api/generated/openapi-v1/types.gen.ts

@@ -329,6 +329,7 @@ export type MessagePart = {
     attachment_id?: string;
     url?: string;
     filename?: string;
+    stored_filename?: string;
     mime_type?: string;
     [key: string]: unknown | string;
 };

dashboard/src/assets/mdi-subset/materialdesignicons-subset.css

@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 279 icons */
+/* Auto-generated MDI subset – 273 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -256,10 +256,6 @@
   content: "\F0167";
 }
 
-.mdi-code-braces::before {
-  content: "\F0169";
-}
-
 .mdi-code-json::before {
   content: "\F0626";
 }
@@ -452,6 +448,10 @@
   content: "\F021C";
 }
 
+.mdi-file-image::before {
+  content: "\F021F";
+}
+
 .mdi-file-music-outline::before {
   content: "\F0E2A";
 }
@@ -496,10 +496,6 @@
   content: "\F024B";
 }
 
-.mdi-folder-cog-outline::before {
-  content: "\F1080";
-}
-
 .mdi-folder-move::before {
   content: "\F0252";
 }
@@ -628,22 +624,6 @@
   content: "\F0318";
 }
 
-.mdi-language-css3::before {
-  content: "\F031C";
-}
-
-.mdi-language-html5::before {
-  content: "\F031D";
-}
-
-.mdi-language-java::before {
-  content: "\F0B37";
-}
-
-.mdi-language-javascript::before {
-  content: "\F031E";
-}
-
 .mdi-language-markdown::before {
   content: "\F0354";
 }
@@ -652,14 +632,6 @@
   content: "\F0F5B";
 }
 
-.mdi-language-python::before {
-  content: "\F0320";
-}
-
-.mdi-language-typescript::before {
-  content: "\F06E6";
-}
-
 .mdi-layers-outline::before {
   content: "\F09FE";
 }
@@ -1016,6 +988,10 @@
   content: "\F060D";
 }
 
+.mdi-svg::before {
+  content: "\F0721";
+}
+
 .mdi-sync::before {
   content: "\F04E6";
 }