lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化画布对话预览图样式与图片消息气泡

Browse Source
This commit is contained in:
Your Name 2026-02-09 00:55:39 +08:00
parent ac45e3fee9
commit db8893b799
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/canvas/CanvasChatPanel.tsx
View File

@ -1423,6 +1423,19 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
// 使用清理后的消息
const cleanedMessage = { ...message, parts: cleanedParts };
const assistantTextParts = message.role === "assistant"
? cleanedParts.filter((part: any) => part.type === "text" && part.text)
: [];
const hasAssistantImages = assistantTextParts.some((part: any) =>
extractImageUrls(part.text || "").length > 0
);
const hasAssistantText = assistantTextParts.some((part: any) => {
const textWithoutImages = (part.text || "")
.replace(/!\[(?:thumb)?\|\|\|[^|]+\|\|\|[^\]]*\]\([^)]+\)/g, "")
.trim();
return textWithoutImages.length > 0;
});
const isImageOnlyAssistant = message.role === "assistant" && hasAssistantImages && !hasAssistantText;
return (
<div
@ -1508,7 +1521,14 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
</div>
) : (
// AI 消息：保持原样式
<div className="bg-card border text-card-foreground rounded-2xl rounded-tl-sm text-sm px-4 py-2.5 shadow-sm">
<div
className={cn(
"text-card-foreground text-sm",
isImageOnlyAssistant
? "bg-transparent border-0 rounded-none px-0 py-0 shadow-none"
: "bg-card border rounded-2xl rounded-tl-sm px-4 py-2.5 shadow-sm"
)}
>
{/* 消息内容 */}
<div className="whitespace-pre-wrap break-words leading-relaxed">
{cleanedMessage.parts?.map((part: any, i: number) => {
@ -1523,14 +1543,21 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
<div key={i}>
{textWithoutImages && <span>{textWithoutImages}</span>}
{imageUrls.length > 0 && (
<div className="flex flex-wrap gap-2 mt-3">
<div className={cn("flex flex-wrap gap-2", textWithoutImages ? "mt-3" : "mt-0")}>
{imageUrls.map((url, idx) => (
<div key={idx} className="relative group rounded-xl overflow-hidden border bg-background shadow-sm transition-all hover:shadow-md">
<div
key={idx}
className={cn(
"relative group overflow-hidden border transition-all",
"rounded-2xl border-black/5 dark:border-white/10 bg-white/70 dark:bg-zinc-900/50",
"shadow-[0_8px_24px_-16px_rgba(15,23,42,0.45)] hover:shadow-[0_12px_28px_-14px_rgba(15,23,42,0.5)]"
)}
>
<img
src={url}
alt=""
className="max-w-full h-auto cursor-zoom-in hover:scale-105 transition-transform duration-300"
style={{ maxHeight: '200px' }}
className="block max-w-full h-auto cursor-zoom-in transition-transform duration-300 group-hover:scale-[1.02]"
style={{ maxHeight: "260px" }}
onClick={() => setFullscreenPreview({ url })}
onDoubleClick={(e) => {
e.preventDefault();