update
This commit is contained in:
hobby
1
.gitignore
vendored
1
.gitignore
vendored
@@ -6,6 +6,7 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
package-lock.json
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
@@ -1315,7 +1315,11 @@
|
||||
},
|
||||
"node_modules/@radix-ui/react-switch": {
|
||||
"version": "1.1.3",
|
||||
<<<<<<< HEAD
|
||||
"resolved": "https://registry.npmmirror.com/@radix-ui/react-switch/-/react-switch-1.1.3.tgz",
|
||||
=======
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz",
|
||||
>>>>>>> develop
|
||||
"integrity": "sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.1",
|
||||
@@ -1438,7 +1442,11 @@
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-previous": {
|
||||
"version": "1.1.0",
|
||||
<<<<<<< HEAD
|
||||
"resolved": "https://registry.npmmirror.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
|
||||
=======
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
|
||||
>>>>>>> develop
|
||||
"integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
|
||||
@@ -380,216 +380,218 @@ const ChatUI = () => {
|
||||
return (
|
||||
<>
|
||||
<KaTeXStyle />
|
||||
<div className="h-[100dvh] flex flex-col bg-gray-100 fixed inset-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow flex-none">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
{/* 左侧群组信息 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="relative w-10 h-10">
|
||||
<div className="w-full h-full overflow-hidden bg-white border border-gray-200">
|
||||
{users.length === 1 ? (
|
||||
<SingleAvatar user={users[0]} />
|
||||
) : users.length === 2 ? (
|
||||
<div className="h-full flex">
|
||||
{users.slice(0, 2).map((user, index) => (
|
||||
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
||||
))}
|
||||
</div>
|
||||
) : users.length === 3 ? (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex h-1/2">
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 flex items-center justify-center">
|
||||
<div className="h-[100dvh] flex flex-col bg-white max-w-3xl w-full mx-auto relative shadow-xl">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow flex-none">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
{/* 左侧群组信息 */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="relative w-10 h-10">
|
||||
<div className="w-full h-full overflow-hidden bg-white border border-gray-200">
|
||||
{users.length === 1 ? (
|
||||
<SingleAvatar user={users[0]} />
|
||||
) : users.length === 2 ? (
|
||||
<div className="h-full flex">
|
||||
{users.slice(0, 2).map((user, index) => (
|
||||
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
||||
))}
|
||||
</div>
|
||||
<div className="h-1/2 flex justify-center">
|
||||
<SingleAvatar user={users[2]} />
|
||||
) : users.length === 3 ? (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex h-1/2">
|
||||
{users.slice(0, 2).map((user, index) => (
|
||||
<HalfAvatar key={user.id} user={user} isFirst={index === 0} />
|
||||
))}
|
||||
</div>
|
||||
<div className="h-1/2 flex justify-center">
|
||||
<SingleAvatar user={users[2]} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full grid grid-cols-2">
|
||||
{users.slice(0, 4).map((user, index) => (
|
||||
<QuarterAvatar key={user.id} user={user} index={index} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute -bottom-0.5 -right-0.5 bg-green-500 w-3 h-3 border-2 border-white"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-medium text-base">{group.name}</h1>
|
||||
<p className="text-xs text-gray-500">{users.length} 名成员</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧头像组和按钮 */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex -space-x-2 ">
|
||||
{users.slice(0, 4).map((user) => {
|
||||
const avatarData = getAvatarData(user.name);
|
||||
return (
|
||||
<TooltipProvider key={user.id}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Avatar className="w-7 h-7 border-2 border-white">
|
||||
{'avatar' in user && user.avatar ? (
|
||||
<AvatarImage src={user.avatar} />
|
||||
) : (
|
||||
<AvatarFallback style={{ backgroundColor: avatarData.backgroundColor, color: 'white' }}>
|
||||
{avatarData.text}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{user.name}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
})}
|
||||
{users.length > 4 && (
|
||||
<div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs border-2 border-white">
|
||||
+{users.length - 4}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
|
||||
<Settings2 className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Chat Area */}
|
||||
<div className="flex-1 overflow-hidden bg-gray-100">
|
||||
<ScrollArea className="h-full p-2" ref={chatAreaRef}>
|
||||
<div className="space-y-4">
|
||||
{messages.map((message) => (
|
||||
<div key={message.id}
|
||||
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
|
||||
{message.sender.name !== "我" && (
|
||||
<Avatar>
|
||||
{'avatar' in message.sender && message.sender.avatar ? (
|
||||
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
||||
) : (
|
||||
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
||||
{message.sender.name[0]}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
)}
|
||||
<div className={message.sender.name === "我" ? "text-right" : ""}>
|
||||
<div className="text-sm text-gray-500">{message.sender.name}</div>
|
||||
<div className={`mt-1 p-3 rounded-lg shadow-sm chat-message ${
|
||||
message.sender.name === "我" ? "bg-blue-500 text-white text-left" : "bg-white"
|
||||
}`}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
className={`prose dark:prose-invert max-w-none ${
|
||||
message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
|
||||
}
|
||||
[&_h2]:py-1
|
||||
[&_h2]:m-0
|
||||
[&_h3]:py-1.5
|
||||
[&_h3]:m-0
|
||||
[&_p]:m-0
|
||||
[&_pre]:bg-gray-900
|
||||
[&_pre]:p-2
|
||||
[&_pre]:m-0
|
||||
[&_pre]:rounded-lg
|
||||
[&_pre]:text-gray-100
|
||||
[&_pre]:whitespace-pre-wrap
|
||||
[&_pre]:break-words
|
||||
[&_pre_code]:whitespace-pre-wrap
|
||||
[&_pre_code]:break-words
|
||||
[&_code]:text-sm
|
||||
[&_code]:text-gray-400
|
||||
[&_code:not(:where([class~="language-"]))]:text-pink-500
|
||||
[&_code:not(:where([class~="language-"]))]:bg-transparent
|
||||
[&_a]:text-blue-500
|
||||
[&_a]:no-underline
|
||||
[&_ul]:my-2
|
||||
[&_ol]:my-2
|
||||
[&_li]:my-1
|
||||
[&_blockquote]:border-l-4
|
||||
[&_blockquote]:border-gray-300
|
||||
[&_blockquote]:pl-4
|
||||
[&_blockquote]:my-2
|
||||
[&_blockquote]:italic`}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
{message.isAI && isTyping && currentMessageRef.current === message.id && (
|
||||
<span className="typing-indicator ml-1">▋</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full grid grid-cols-2">
|
||||
{users.slice(0, 4).map((user, index) => (
|
||||
<QuarterAvatar key={user.id} user={user} index={index} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute -bottom-0.5 -right-0.5 bg-green-500 w-3 h-3 border-2 border-white"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-medium text-base">{group.name}</h1>
|
||||
<p className="text-xs text-gray-500">{users.length} 名成员</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧头像组和按钮 */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex -space-x-2 ">
|
||||
{users.slice(0, 4).map((user) => {
|
||||
const avatarData = getAvatarData(user.name);
|
||||
return (
|
||||
<TooltipProvider key={user.id}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Avatar className="w-7 h-7 border-2 border-white">
|
||||
{'avatar' in user && user.avatar ? (
|
||||
<AvatarImage src={user.avatar} />
|
||||
) : (
|
||||
<AvatarFallback style={{ backgroundColor: avatarData.backgroundColor, color: 'white' }}>
|
||||
{avatarData.text}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{user.name}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
})}
|
||||
{users.length > 4 && (
|
||||
<div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs border-2 border-white">
|
||||
+{users.length - 4}
|
||||
{message.sender.name === "我" && (
|
||||
<Avatar>
|
||||
{'avatar' in message.sender && message.sender.avatar ? (
|
||||
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
||||
) : (
|
||||
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
||||
{message.sender.name[0]}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
{/* 添加一个二维码 */}
|
||||
<div id="qrcode" className="flex flex-col items-center hidden">
|
||||
<img src="/img/qr.png" alt="QR Code" className="w-24 h-24" />
|
||||
<p className="text-sm text-gray-500 mt-2 font-medium tracking-tight bg-gray-50 px-3 py-1 rounded-full">扫码体验AI群聊</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
|
||||
<Settings2 className="w-5 h-5" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="bg-white border-t pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 px-4">
|
||||
<div className="flex gap-1">
|
||||
{messages.length > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleShareChat}
|
||||
className="px-3"
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>分享聊天记录</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
<Input
|
||||
placeholder="输入消息..."
|
||||
className="flex-1"
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSendMessage}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
||||
) : (
|
||||
<Send className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Chat Area */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<ScrollArea className="h-full p-2" ref={chatAreaRef}>
|
||||
<div className="space-y-4">
|
||||
{messages.map((message) => (
|
||||
<div key={message.id}
|
||||
className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
|
||||
{message.sender.name !== "我" && (
|
||||
<Avatar>
|
||||
{'avatar' in message.sender && message.sender.avatar ? (
|
||||
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
||||
) : (
|
||||
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
||||
{message.sender.name[0]}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
)}
|
||||
<div className={message.sender.name === "我" ? "text-right" : ""}>
|
||||
<div className="text-sm text-gray-500">{message.sender.name}</div>
|
||||
<div className={`mt-1 p-3 rounded-lg shadow-sm chat-message ${
|
||||
message.sender.name === "我" ? "bg-blue-500 text-white text-left" : "bg-white"
|
||||
}`}>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
className={`prose dark:prose-invert max-w-none ${
|
||||
message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
|
||||
}
|
||||
[&_h2]:py-1
|
||||
[&_h2]:m-0
|
||||
[&_h3]:py-1.5
|
||||
[&_h3]:m-0
|
||||
[&_p]:m-0
|
||||
[&_pre]:bg-gray-900
|
||||
[&_pre]:p-2
|
||||
[&_pre]:m-0
|
||||
[&_pre]:rounded-lg
|
||||
[&_pre]:text-gray-100
|
||||
[&_pre]:whitespace-pre-wrap
|
||||
[&_pre]:break-words
|
||||
[&_pre_code]:whitespace-pre-wrap
|
||||
[&_pre_code]:break-words
|
||||
[&_code]:text-sm
|
||||
[&_code]:text-gray-400
|
||||
[&_code:not(:where([class~="language-"]))]:text-pink-500
|
||||
[&_code:not(:where([class~="language-"]))]:bg-transparent
|
||||
[&_a]:text-blue-500
|
||||
[&_a]:no-underline
|
||||
[&_ul]:my-2
|
||||
[&_ol]:my-2
|
||||
[&_li]:my-1
|
||||
[&_blockquote]:border-l-4
|
||||
[&_blockquote]:border-gray-300
|
||||
[&_blockquote]:pl-4
|
||||
[&_blockquote]:my-2
|
||||
[&_blockquote]:italic`}
|
||||
>
|
||||
{message.content}
|
||||
</ReactMarkdown>
|
||||
{message.isAI && isTyping && currentMessageRef.current === message.id && (
|
||||
<span className="typing-indicator ml-1">▋</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{message.sender.name === "我" && (
|
||||
<Avatar>
|
||||
{'avatar' in message.sender && message.sender.avatar ? (
|
||||
<AvatarImage src={message.sender.avatar} className="w-10 h-10" />
|
||||
) : (
|
||||
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
|
||||
{message.sender.name[0]}
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
{/* 添加一个二维码 */}
|
||||
<div id="qrcode" className="flex flex-col items-center hidden">
|
||||
<img src="/img/qr.png" alt="QR Code" className="w-24 h-24" />
|
||||
<p className="text-sm text-gray-500 mt-2 font-medium tracking-tight bg-gray-50 px-3 py-1 rounded-full">扫码体验AI群聊</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Input Area */}
|
||||
<div className="bg-white border-t pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 px-4">
|
||||
<div className="flex gap-1">
|
||||
{messages.length > 0 && (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={handleShareChat}
|
||||
className="px-3"
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>分享聊天记录</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)}
|
||||
<Input
|
||||
placeholder="输入消息..."
|
||||
className="flex-1"
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSendMessage}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent" />
|
||||
) : (
|
||||
<Send className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Members Management Dialog */}
|
||||
|
||||
@@ -60,7 +60,7 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
|
||||
chatAreaRef.current.scrollTop = 0;
|
||||
|
||||
const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
|
||||
const extraSpace = 20;
|
||||
const extraSpace = 6;
|
||||
const targetWidth = viewportWidth * 0.95 - (extraSpace * 2);
|
||||
|
||||
const currentWidth = messageContainer.getBoundingClientRect().width;
|
||||
@@ -72,17 +72,18 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
|
||||
const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, {
|
||||
bgcolor: '#f3f4f6',
|
||||
scale: 1, // 回到较安全的值
|
||||
width: targetWidth + (extraSpace * 2),
|
||||
height: adjustedHeight + (extraSpace * 2),
|
||||
width: targetWidth + (extraSpace * 5),
|
||||
height: adjustedHeight + (extraSpace * 5),
|
||||
style: {
|
||||
padding: `${extraSpace}px`,
|
||||
margin: '0',
|
||||
margin: '0 auto',
|
||||
width: '120%',
|
||||
height: '110%',
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: 'top left',
|
||||
background: '#f3f4f6',
|
||||
boxSizing: 'border-box'
|
||||
|
||||
},
|
||||
quality: 1.0
|
||||
});
|
||||
@@ -168,7 +169,7 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)
|
||||
onClose();
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="max-w-[100vw] w-full sm:max-w-[100vw] max-h-[90vh] flex flex-col p-0">
|
||||
<DialogContent className="max-w-[100vw] w-full sm:max-w-[50vw] max-h-[90vh] flex flex-col p-0">
|
||||
{/* 图片容器 */}
|
||||
<div className="flex-1 overflow-auto ">
|
||||
{posterImage && (
|
||||
|
||||
Reference in New Issue
Block a user