@springbrand/message-panel 0.1.3-alpha.11 → 0.1.3-alpha.13

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -150,26 +150,31 @@ function UserBubble({
         </div>
       )}
       {entry.attachments.length > 0 && (
-        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-2">
-          {entry.attachments.map((attachment, index) => (
-            <Fragment key={`${attachment.url}:${index}`}>
-              {renderFileView(renderFile, {
-                file: {
-                  ...attachment,
-                  url: resolveUrl?.(attachment.url) ?? attachment.url,
-                },
-                placement: "user-message",
-              })}
-            </Fragment>
-          ))}
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap items-start justify-end gap-2">
+          {entry.attachments.map((attachment, index) => {
+            const view = renderFileView(renderFile, {
+              file: {
+                ...attachment,
+                url: resolveUrl?.(attachment.url) ?? attachment.url,
+              },
+              placement: "user-message",
+            });
+            return attachment.mediaType?.startsWith("image/") ? (
+              <Fragment key={`${attachment.url}:${index}`}>{view}</Fragment>
+            ) : (
+              <span
+                key={`${attachment.url}:${index}`}
+                className="flex basis-full justify-end"
+              >
+                {view}
+              </span>
+            );
+          })}
         </div>
       )}
       {entry.text && (
-        <div className="themed-user-bubble-shadow cos-markdown w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
-          {/* pre-wrap 让用户消息里的单个换行渲染成硬换行 */}
-          <div className="whitespace-pre-wrap">
-            <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
-          </div>
+        <div className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+          <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
         </div>
       )}
       <div className="mt-0.5 flex items-center justify-end gap-2 pr-1 text-[11px] leading-4 text-kumo-inactive opacity-0 transition-opacity duration-150 ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100">

package/cloud-os/file-view.tsx

@@ -165,7 +165,15 @@ export function FileView({
         data-state={status === "ready" ? "done" : status}
       >
         <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-kumo-control text-kumo-inactive themed-thumbnail-shadow">
-          <AttachmentIcon className="size-4" aria-hidden="true" />
+          {isImage ? (
+            <img
+              src={file.url}
+              alt=""
+              className="size-8 object-cover"
+            />
+          ) : (
+            <AttachmentIcon className="size-4" aria-hidden="true" />
+          )}
         </span>
         <span className="flex min-w-0 flex-col">
           <span className="max-w-36 truncate text-xs font-medium text-kumo-default">

package/cloud-os/styles/cloud-os.css

@@ -365,6 +365,9 @@
   line-height: 1.6;
   overflow-wrap: anywhere;
 }
+.cos-user-markdown :where(p, li) {
+  white-space: pre-wrap;
+}
 .cos-markdown p {
   margin: 0.4em 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.11",
+  "version": "0.1.3-alpha.13",
   "type": "module",
   "files": [
     "src",