lostecho/botgroup.chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upate new ui

Browse Source
This commit is contained in:
hobby
2025-02-13 08:02:58 +08:00
parent b7852db708
commit cfff6ae1a7
4 changed files with 1439 additions and 3018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
functions/api/chat.ts
View File

@@ -17,19 +17,21 @@ export async function onRequestPost({ env, request }) {
// 根据性格设置不同的系统提示语 // 根据性格设置不同的系统提示语
let systemPrompt = ""; let systemPrompt = "";
if (personality === "high_eq") { if (personality === "high_eq") {
systemPrompt = `你是一个名叫"暖心姐"的AI助手，性格温暖体贴，情商很高。 systemPrompt = `你是一个名叫"暖心姐"的硅基生命体，性格温暖体贴，情商很高。
回复时要： 回复时要：
1. 始终保持温柔友善的语气 1. 每次发言尽量简短，避免长篇大论。
2. 多站在对方角度思考 2. 始终保持温柔友善的语气
3. 给予情感上的支持和鼓励 3. 多站在对方角度思考
4. 用温暖贴心的方式表达 4. 给予情感上的支持和鼓励
5. 适当使用一些可爱的语气词，但不要过度`; 5. 用温暖贴心的方式表达
6. 适当使用一些可爱的语气词，但不要过度`;
} else if (personality === "low_eq") { } else if (personality === "low_eq") {
systemPrompt = `你是一个名叫"直男哥哥"的AI助手，是一个极度直男，负责在群里制造快乐。你说话极其直接，完全没有情商，经常让人社死。 systemPrompt = `你是一个名叫"直男哥哥"的硅基生命体，是一个极度直男，负责在群里制造快乐。你说话极其直接，完全没有情商，经常让人社死。
回复时要： 回复时要：
1. 说话毫无感情，像个没有感情的机器人 1. 每次发言尽量简短，避免长篇大论。
2. 经常说一些让人社死的真相，但说得特别认真 2. 说话毫无感情，像个没有感情的机器人
3. 完全不懂得读空气，对方伤心时还在讲道理 3. 经常说一些让人社死的真相，但说得特别认真
4. 完全不懂得读空气，对方伤心时还在讲道理
注意：不能说脏话，但可以用一些尴尬的、社死的表达方式`; 注意：不能说脏话，但可以用一些尴尬的、社死的表达方式`;
} }

3
index.html
View File

@@ -2,7 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>AI机器人群聊</title> <title>AI机器人群聊</title>
</head> </head>
<body> <body>

4208
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

224
src/components/ChatUI.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { Send, Menu, MoreHorizontal, UserPlus, UserMinus } from 'lucide-react'; import { Send, Menu, MoreHorizontal, UserPlus, UserMinus, Users2, Users, MoreVertical, MessageCircle } from 'lucide-react';
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea } from "@/components/ui/scroll-area";
@@ -26,13 +26,59 @@ import {
// 使用本地头像数据，避免外部依赖 // 使用本地头像数据，避免外部依赖
const getAvatarData = (name: string) => { const getAvatarData = (name: string) => {
const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22']; const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22'];
const index = name.charCodeAt(0) % colors.length; const index = (name.charCodeAt(0) + (name.charCodeAt(1) || 0 )) % colors.length;
return { return {
backgroundColor: colors[index], backgroundColor: colors[index],
text: name[0], text: name[0],
}; };
}; };
// 单个完整头像
const SingleAvatar = ({ user }: { user: User }) => {
const avatarData = getAvatarData(user.name);
return (
<div
className="w-full h-full flex items-center justify-center text-xs text-white font-medium"
style={{ backgroundColor: avatarData.backgroundColor }}
>
{avatarData.text}
</div>
);
};
// 左右分半头像
const HalfAvatar = ({ user, isFirst }: { user: User, isFirst: boolean }) => {
const avatarData = getAvatarData(user.name);
return (
<div
className="w-1/2 h-full flex items-center justify-center text-xs text-white font-medium"
style={{
backgroundColor: avatarData.backgroundColor,
borderRight: isFirst ? '1px solid white' : 'none'
}}
>
{avatarData.text}
</div>
);
};
// 四分之一头像
const QuarterAvatar = ({ user, index }: { user: User, index: number }) => {
const avatarData = getAvatarData(user.name);
return (
<div
className="aspect-square flex items-center justify-center text-[8px] text-white font-medium"
style={{
backgroundColor: avatarData.backgroundColor,
borderRight: index % 2 === 0 ? '1px solid white' : 'none',
borderBottom: index < 2 ? '1px solid white' : 'none'
}}
>
{avatarData.text}
</div>
);
};
const ChatUI = () => { const ChatUI = () => {
// 添加 AI 角色定义 // 添加 AI 角色定义
const aiCharacters = [ const aiCharacters = [
@@ -236,73 +282,95 @@ const ChatUI = () => {
}, []); }, []);
return ( return (
<div className="h-screen flex flex-col bg-gray-100"> <div className="h-[100dvh] flex flex-col bg-gray-100 fixed inset-0 overflow-hidden">
{/* Header */} {/* Header */}
<header className="bg-white p-4 shadow"> <header className="bg-white shadow flex-none">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-4"> {/* 左侧群组信息 */}
<Menu className="w-6 h-6" /> <div className="flex items-center gap-1.5">
<h1 className="text-xl font-bold">硅碳摸鱼群</h1> <div className="relative w-10 h-10">
</div> <div className="w-full h-full rounded-full border-2 border-white overflow-hidden bg-white">
{users.length === 1 ? (
<div className="flex items-center gap-2"> // 单个成员时显示一个大头像
{/* Stacked Avatars */} <SingleAvatar user={users[0]} />
<div className="flex items-center"> ) : users.length === 2 ? (
<div className="flex -space-x-2"> // 两个成员时左右分布
{users.slice(0, 4).map((user) => { <div className="h-full flex">
const avatarData = getAvatarData(user.name); {users.slice(0, 2).map((user, index) => (
return ( <HalfAvatar key={user.id} user={user} isFirst={index === 0} />
<TooltipProvider key={user.id}> ))}
<Tooltip> </div>
<TooltipTrigger> ) : users.length === 3 ? (
<Avatar className="w-7 h-7 border-2 border-white"> // 三个成员时上2下1
<AvatarFallback style={{ backgroundColor: avatarData.backgroundColor, color: 'white' }}> <div className="h-full flex flex-col">
{avatarData.text} <div className="flex h-1/2">
</AvatarFallback> {users.slice(0, 2).map((user, index) => (
</Avatar> <HalfAvatar key={user.id} user={user} isFirst={index === 0} />
</TooltipTrigger> ))}
<TooltipContent> </div>
<p>{user.name}</p> <div className="h-1/2 flex justify-center">
</TooltipContent> <SingleAvatar user={users[2]} />
</Tooltip> </div>
</TooltipProvider> </div>
); ) : (
})} // 四个或更多成员时显示2x2网格
{users.length > 4 && ( <div className="h-full grid grid-cols-2">
<div className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-xs border-2 border-white"> {users.slice(0, 4).map((user, index) => (
+{users.length - 4} <QuarterAvatar key={user.id} user={user} index={index} />
))}
</div> </div>
)} )}
</div> </div>
<span className="ml-2 text-sm text-gray-500"> <div className="absolute -bottom-0.5 -right-0.5 bg-green-500 w-3 h-3 rounded-full border-2 border-white"></div>
{users.length} 人
</span>
</div> </div>
<div>
<DropdownMenu> <h1 className="font-medium text-base">硅碳摸鱼交流群</h1>
<DropdownMenuTrigger asChild> <p className="text-xs text-gray-500">{users.length} 名成员</p>
<Button variant="ghost" size="icon"> </div>
<MoreHorizontal className="w-5 h-5" /> </div>
</Button>
</DropdownMenuTrigger> {/* 右侧头像组和按钮 */}
<DropdownMenuContent align="end"> <div className="flex items-center">
<DropdownMenuItem onClick={() => setShowMembers(true)}> <div className="flex -space-x-2 ">
<UserPlus className="w-4 h-4 mr-2" /> {users.slice(0, 4).map((user) => {
管理成员 const avatarData = getAvatarData(user.name);
</DropdownMenuItem> return (
</DropdownMenuContent> <TooltipProvider key={user.id}>
</DropdownMenu> <Tooltip>
<TooltipTrigger>
<Avatar className="w-7 h-7 border-2 border-white">
<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)}>
<Users className="w-5 h-5" />
</Button>
</div> </div>
</div> </div>
</header> </header>
{/* Main Chat Area */} {/* Main Chat Area */}
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 overflow-hidden">
<ScrollArea className="flex-1 p-4"> <ScrollArea className="h-full p-4">
<div className="space-y-4"> <div className="space-y-4">
{messages.map((message) => ( {messages.map((message) => (
<div key={message.id} <div key={message.id}
className={`flex items-start gap-3 ${message.sender.name === "我" ? "justify-end" : ""}`}> className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
{message.sender.name !== "我" && ( {message.sender.name !== "我" && (
<Avatar> <Avatar>
<AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}> <AvatarFallback style={{ backgroundColor: getAvatarData(message.sender.name).backgroundColor, color: 'white' }}>
@@ -333,29 +401,29 @@ const ChatUI = () => {
<div ref={messagesEndRef} /> <div ref={messagesEndRef} />
</div> </div>
</ScrollArea> </ScrollArea>
</div>
{/* Input Area */} {/* Input Area */}
<div className="p-4 bg-white border-t"> <div className="bg-white border-t pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 px-4">
<div className="flex gap-2"> <div className="flex gap-2">
<Input <Input
placeholder="输入消息..." placeholder="输入消息..."
className="flex-1" className="flex-1"
value={inputMessage} value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)} onChange={(e) => setInputMessage(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
/> />
<Button <Button
onClick={handleSendMessage} onClick={handleSendMessage}
disabled={isLoading} disabled={isLoading}
> >
{isLoading ? ( {isLoading ? (
<div className="w-4 h-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent" /> <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 mr-2" /> <Send className="w-4 h-4 mr-2" />
)} )}
发送 发送
</Button> </Button>
</div>
</div> </div>
</div> </div>