Merge branch 'main' into develop
This commit is contained in:
maojindao55
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
|
||||
|
||||
@@ -25,7 +25,7 @@ export async function onRequestPost({ env, request }) {
|
||||
// 根据性格设置不同的系统提示语
|
||||
let systemPrompt = "";
|
||||
|
||||
systemPrompt = custom_prompt + "\n 注意重要：1、你在群里叫" + aiName + "，你的输出内容不要加" + aiName + "：这种多余前缀；2、如果用户提出玩游戏，比如成语接龙等，严格按照游戏规则，不要说一大堆，要简短精炼"
|
||||
systemPrompt = custom_prompt + "\n 注意重要：1、你在群里叫" + aiName + "认准自己的身份； 2、你的输出内容不要加" + aiName + "：这种多余前缀；3、如果用户提出玩游戏，比如成语接龙等，严格按照游戏规则，不要说一大堆，要简短精炼; 4、保持群聊风格字数严格控制在50字以内，越简短越好（新闻总结类除外）"
|
||||
|
||||
// 构建完整的消息历史
|
||||
const baseMessages = [
|
||||
@@ -64,7 +64,7 @@ export async function onRequestPost({ env, request }) {
|
||||
controller.close();
|
||||
} catch (error) {
|
||||
controller.error(error);
|
||||
console.error(error);
|
||||
console.error(error.message);
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -79,7 +79,7 @@ export async function onRequestPost({ env, request }) {
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
console.error(error.message);
|
||||
return Response.json(
|
||||
{ error: error.message },
|
||||
{ status: 500 }
|
||||
|
||||
@@ -14,6 +14,7 @@ interface MessageHistory {
|
||||
}
|
||||
|
||||
export async function onRequestPost({ env, request }) {
|
||||
console.log('scheduler');
|
||||
try {
|
||||
const { message, history, availableAIs } = await request.json();
|
||||
const selectedAIs = await scheduleAIResponses(message, history, availableAIs, env);
|
||||
@@ -57,7 +58,7 @@ async function analyzeMessageWithAI(message: string, allTags: string[], env: any
|
||||
const matchedTags = completion.choices[0].message.content?.split(',').map(tag => tag.trim()) || [];
|
||||
return matchedTags;
|
||||
} catch (error) {
|
||||
console.error('AI分析失败:', error);
|
||||
console.error('AI分析失败:', error.message);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,15 @@
|
||||
<link rel="icon" type="image/x-icon" href="/chat_bubble.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<title>AI机器人群聊</title>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?b8c60fe205cf9ccbc7ce6086a3b658b9";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
1448
package-lock.json
generated
1448
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -8,10 +8,13 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/audiowide": "^5.1.1",
|
||||
"@radix-ui/react-avatar": "^1.1.3",
|
||||
"@radix-ui/react-dialog": "^1.1.6",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.6",
|
||||
"@radix-ui/react-popover": "^1.1.6",
|
||||
"@radix-ui/react-scroll-area": "^1.2.3",
|
||||
"@radix-ui/react-separator": "^1.1.2",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@radix-ui/react-switch": "^1.1.3",
|
||||
"@radix-ui/react-tooltip": "^1.1.8",
|
||||
@@ -25,6 +28,7 @@
|
||||
"openai": "^4.83.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-github-btn": "^1.4.0",
|
||||
"react-markdown": "^9.0.3",
|
||||
"rehype-katex": "^7.0.1",
|
||||
"remark-gfm": "^4.0.1",
|
||||
@@ -32,7 +36,8 @@
|
||||
"sonner": "^2.0.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwind-scrollbar-hide": "^2.0.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"wrangler": "^3.112.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@shadcn/ui": "^0.0.4",
|
||||
|
||||
19
public/img/baidu.svg
Normal file
19
public/img/baidu.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/glm.gif
Normal file
BIN
public/img/glm.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/img/kimi.jpg
Normal file
BIN
public/img/kimi.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
1
public/img/logo.svg
Normal file
1
public/img/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" width="245.555" height="248.768" viewBox="0 0 245.555 248.768" style="overflow:visible;enable-background:new 0 0 245.555 248.768;" xml:space="preserve"><g><path style="fill:#81C5E8;stroke:#81C5E8;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;" d="M75.957,144.232h76.309 c11.045,0,20.082-9.036,20.082-20.081V32.581c0-11.045-9.037-20.081-20.082-20.081H32.581C21.537,12.5,12.5,21.536,12.5,32.581 v91.569v62.653L75.957,144.232z"/></g><g><path style="fill:#FF78C9;stroke:#FF78C9;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;" d="M104.174,168.435 h76.309c11.045,0,20.081-9.037,20.081-20.082V56.783c0-11.044-9.036-20.081-20.081-20.081H60.798 c-11.044,0-20.082,9.036-20.082,20.081v91.569v62.653L104.174,168.435z"/></g><g><path style="fill:#FFCC66;stroke:#FFCC66;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;" d="M136.665,193.695h76.31 c11.045,0,20.081-9.035,20.081-20.08v-91.57c0-11.044-9.036-20.081-20.081-20.081H93.289c-11.044,0-20.081,9.037-20.081,20.081 v91.57v62.652L136.665,193.695z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -1,11 +1,12 @@
|
||||
import ChatUI from './components/ChatUI'
|
||||
import './App.css'
|
||||
import Layout from './components/Layout'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app-container">
|
||||
<ChatUI />
|
||||
</div>
|
||||
<Layout>
|
||||
<ChatUI />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
237
src/components/AdSection.tsx
Normal file
237
src/components/AdSection.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import React, { useState } from 'react';
|
||||
import { cn } from '../lib/utils';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
|
||||
interface AdSectionProps {
|
||||
isOpen: boolean;
|
||||
closeAd?: () => void;
|
||||
}
|
||||
|
||||
interface AdBannerProps {
|
||||
show: boolean;
|
||||
closeAd: () => void;
|
||||
}
|
||||
|
||||
const AdSection: React.FC<AdSectionProps> = ({ isOpen}) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const checkDevice = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
|
||||
checkDevice();
|
||||
window.addEventListener('resize', checkDevice);
|
||||
|
||||
return () => window.removeEventListener('resize', checkDevice);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="p-3 border-t border-border/40">
|
||||
<div className={cn(
|
||||
"rounded-lg p-2 text-center relative overflow-hidden min-h-[120px] flex flex-col justify-center",
|
||||
"transition-all duration-200 bg-cover bg-center bg-no-repeat",
|
||||
isOpen ? "block" : "hidden"
|
||||
)}
|
||||
style={{
|
||||
backgroundImage: "url('https://files.monica.cn/assets/botgroup/background.png')",
|
||||
}}
|
||||
>
|
||||
<div className="absolute top-0 left-0 bg-gray-300/40 text-gray-400 text-[10px] px-1.5 py-0.5 rounded">
|
||||
广告
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="flex items-center justify-center px-6">
|
||||
<img src="https://files.monica.cn/assets/botgroup/monica.png"/>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-center text-gray-400">万能的助手, 懂你的伙伴</div>
|
||||
<div className="text-[10px] font-medium text-center text-gray-400 flex items-center justify-center gap-1">由 <img src="https://files.monica.cn/assets/botgroup/deepseek.png" className="inline-block w-16"/> 驱动</div>
|
||||
<div className="flex flex-col items-center justify-center gap-2 mt-3">
|
||||
|
||||
{isMobile ? (
|
||||
<button onClick={() => {
|
||||
window.open('https://mp.weixin.qq.com/s/9l9zz_8wXOmxkKIVd0j9Nw', '_blank');
|
||||
}} className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||
在微信中使用
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||
</button> ) :
|
||||
(
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||
在微信中使用
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-40 p-0" side="top" align="center" sideOffset={5} onPointerDownOutside={(e) => e.preventDefault()}>
|
||||
<div className="flex flex-col items-center">
|
||||
<img
|
||||
src="https://assets.monica.cn/home-web/_next/static/media/wechatQrcode.29848e06.png"
|
||||
alt="公众号二维码"
|
||||
className="w-40 h-40"
|
||||
/>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
{isMobile ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('https://app.adjust.com/1mh0qgab?fallback=https%3A%2F%2Fmonica.cn%2Fapp-download&redirect_macos=https%3A%2F%2Fmonica.cn%2Fapp-download', '_blank');
|
||||
}}
|
||||
className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||
>
|
||||
<img src="https://files.monica.cn/assets/botgroup/mobile-banner-mobile.png" className="w-4 h-4" alt="Mobile" />
|
||||
下载APP
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('https://monica.cn/home/chat/Monica/monica', '_blank');
|
||||
}}
|
||||
className="p-2 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||
>
|
||||
<img src="https://files.monica.cn/assets/botgroup/computer.png" className="w-4 h-4" alt="Computer" />
|
||||
在网页中对话
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AdBanner: React.FC<AdBannerProps> = ({ show, closeAd }) => {
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg text-center relative overflow-hidden py-2 pl-1 h-8 mr-2 flex flex-col justify-center transition-all duration-200 bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: "url('https://files.monica.cn/assets/botgroup/banner-background.png')"
|
||||
}}>
|
||||
<div className="absolute top-0 left-0 bg-gray-300/40 text-gray-400 text-[8px] px-1 py-1.5 rounded">
|
||||
广<br/>告
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-0 justify-center">
|
||||
<div className="flex items-center justify-center w-20 pl-2">
|
||||
<img src="https://files.monica.cn/assets/botgroup/monica.png"/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 px-2 flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||
在微信中使用
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-40 p-0" side="top" align="center" sideOffset={5} onPointerDownOutside={(e) => e.preventDefault()}>
|
||||
<div className="flex flex-col items-center">
|
||||
<img
|
||||
src="https://assets.monica.cn/home-web/_next/static/media/wechatQrcode.29848e06.png"
|
||||
alt="公众号二维码"
|
||||
className="w-40 h-40"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('https://monica.cn/home/chat/Monica/monica', '_blank');
|
||||
}}
|
||||
className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||
>
|
||||
<img src="https://files.monica.cn/assets/botgroup/computer.png" className="w-4 h-4" alt="Computer" />
|
||||
在网页中对话
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={closeAd} className="flex items-center">
|
||||
<img src="https://files.monica.cn/assets/botgroup/banner-delete.png" className="w-4 h-4" alt="Delete" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AdBannerMobile: React.FC<AdBannerProps> = ({ show, closeAd }) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const checkDevice = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
|
||||
checkDevice();
|
||||
window.addEventListener('resize', checkDevice);
|
||||
|
||||
return () => window.removeEventListener('resize', checkDevice);
|
||||
}, []);
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<div className="w-full relative overflow-hidden py-2 pl-2 h-8 flex flex-col justify-center transition-all duration-200 bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: "url('https://files.monica.cn/assets/botgroup/mobile-banner-background.png')"
|
||||
}}>
|
||||
<div className="absolute top-0 left-0 bg-gray-300/40 text-gray-400 text-[8px] px-1 py-1.5">
|
||||
广<br/>告
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-1 justify-center">
|
||||
<div className="flex items-center justify-center w-20 pl-2">
|
||||
<img src="https://files.monica.cn/assets/botgroup/monica.png"/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 px-2 flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={() => {
|
||||
window.open('https://mp.weixin.qq.com/s/9l9zz_8wXOmxkKIVd0j9Nw', '_blank');
|
||||
}} className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1 group">
|
||||
<img src="https://files.monica.cn/assets/botgroup/wechat.png" className="w-4 h-4" alt="WeChat" />
|
||||
在微信中使用
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="WeChat" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.open('https://app.adjust.com/1mh0qgab?fallback=https%3A%2F%2Fmonica.cn%2Fapp-download&redirect_macos=https%3A%2F%2Fmonica.cn%2Fapp-download', '_blank');
|
||||
}}
|
||||
className="p-1 bg-white rounded-full text-xs font-medium text-blue-500 font-bold hover:bg-gray-50 transition-colors shadow-sm flex items-center gap-1"
|
||||
>
|
||||
<img src="https://files.monica.cn/assets/botgroup/mobile-banner-mobile.png" className="w-4 h-4" alt="Mobile" />
|
||||
下载APP
|
||||
<img src="https://files.monica.cn/assets/botgroup/arrow-up.png" className="w-4 h-4" alt="Arrow" />
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={closeAd} className="flex items-center">
|
||||
<img src="https://files.monica.cn/assets/botgroup/banner-delete.png" className="w-4 h-4" alt="Delete" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { AdSection, AdBanner, AdBannerMobile };
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Send, Menu, MoreHorizontal, UserPlus, UserMinus, Users2, Users, MoreVertical, Share2, Mic, MicOff, Settings2 } from 'lucide-react';
|
||||
import { Send, Share2, Settings2, ChevronLeft } from 'lucide-react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@@ -11,13 +12,6 @@ import {
|
||||
TooltipTrigger
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
|
||||
import {generateAICharacters} from "@/config/aiCharacters";
|
||||
import { groups } from "@/config/groups";
|
||||
import type { AICharacter } from "@/config/aiCharacters";
|
||||
@@ -25,10 +19,10 @@ import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
import html2canvas from 'html2canvas';
|
||||
import { SharePoster } from '@/components/SharePoster';
|
||||
import { MembersManagement } from '@/components/MembersManagement';
|
||||
|
||||
import Sidebar from './Sidebar';
|
||||
import { AdBanner, AdBannerMobile } from './AdSection';
|
||||
// 使用本地头像数据，避免外部依赖
|
||||
const getAvatarData = (name: string) => {
|
||||
const colors = ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22'];
|
||||
@@ -146,9 +140,17 @@ const KaTeXStyle = () => (
|
||||
);
|
||||
|
||||
const ChatUI = () => {
|
||||
const [group, setGroup] = useState(groups[1]);
|
||||
const [isGroupDiscussionMode, setIsGroupDiscussionMode] = useState(false);
|
||||
const groupAiCharacters = generateAICharacters(group.name).filter(character => group.members.includes(character.id));
|
||||
// 使用当前选中的群组在 groups 数组中的索引
|
||||
const [selectedGroupIndex, setSelectedGroupIndex] = useState(0); // 默认选中第1个群组
|
||||
const [group, setGroup] = useState(groups[selectedGroupIndex]);
|
||||
const [isGroupDiscussionMode, setIsGroupDiscussionMode] = useState(group.isGroupDiscussionMode);
|
||||
const groupAiCharacters = generateAICharacters(group.name)
|
||||
.filter(character => group.members.includes(character.id))
|
||||
.sort((a, b) => {
|
||||
return group.members.indexOf(a.id) - group.members.indexOf(b.id);
|
||||
});
|
||||
const allNames = groupAiCharacters.map(character => character.name);
|
||||
allNames.push('user');
|
||||
const [users, setUsers] = useState([
|
||||
{ id: 1, name: "我" },
|
||||
...groupAiCharacters
|
||||
@@ -157,6 +159,7 @@ const ChatUI = () => {
|
||||
const [messages, setMessages] = useState([
|
||||
|
||||
]);
|
||||
const [showAd, setShowAd] = useState(true);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [pendingContent, setPendingContent] = useState("");
|
||||
@@ -192,6 +195,12 @@ const ChatUI = () => {
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0) {
|
||||
setShowAd(false);
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
//判断是否Loding
|
||||
if (isLoading) return;
|
||||
@@ -258,7 +267,7 @@ const ChatUI = () => {
|
||||
history: messageHistory,
|
||||
index: i,
|
||||
aiName: selectedGroupAiCharacters[i].name,
|
||||
custom_prompt: selectedGroupAiCharacters[i].custom_prompt
|
||||
custom_prompt: selectedGroupAiCharacters[i].custom_prompt + "\n" + group.description
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -275,14 +284,31 @@ const ChatUI = () => {
|
||||
|
||||
let buffer = '';
|
||||
let completeResponse = ''; // 用于跟踪完整的响应
|
||||
|
||||
// 添加超时控制
|
||||
const timeout = 10000; // 10秒超时
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
//console.log("读取中")
|
||||
const startTime = Date.now();
|
||||
let { done, value } = await Promise.race([
|
||||
reader.read(),
|
||||
new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('响应超时')), timeout - (Date.now() - startTime))
|
||||
)
|
||||
]);
|
||||
|
||||
if (Date.now() - startTime > timeout) {
|
||||
reader.cancel();
|
||||
console.log("读取超时")
|
||||
if (completeResponse.trim() === "") {
|
||||
throw new Error('响应超时');
|
||||
}
|
||||
done = true;
|
||||
}
|
||||
|
||||
if (done) {
|
||||
//如果completeResponse为空，
|
||||
if (completeResponse.trim() === "") {
|
||||
completeResponse = "这个问题难倒我了，下一位。";
|
||||
completeResponse = "对不起，我还不够智能，服务又断开了。";
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev];
|
||||
const aiMessageIndex = newMessages.findIndex(msg => msg.id === aiMessage.id);
|
||||
@@ -309,6 +335,8 @@ const ChatUI = () => {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (data.content) {
|
||||
completeResponse += data.content;
|
||||
//正则去掉前面的任何AI名称：格式
|
||||
completeResponse = completeResponse.replace(new RegExp(`^(${allNames.join('|')})：`, 'i'), '');
|
||||
setMessages(prev => {
|
||||
const newMessages = [...prev];
|
||||
const aiMessageIndex = newMessages.findIndex(msg => msg.id === aiMessage.id);
|
||||
@@ -343,9 +371,14 @@ const ChatUI = () => {
|
||||
|
||||
} catch (error) {
|
||||
console.error("发送消息失败:", error);
|
||||
messageHistory.push({
|
||||
role: 'user',
|
||||
content: aiMessage.sender.name + "对不起，我还不够智能，服务又断开了(错误：" + error.message + ")。",
|
||||
name: aiMessage.sender.name
|
||||
});
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === aiMessage.id
|
||||
? { ...msg, content: "错误: " + error.message, isError: true }
|
||||
? { ...msg, content: "对不起，我还不够智能，服务又断开了(错误：" + error.message + ")。", isError: true }
|
||||
: msg
|
||||
));
|
||||
}
|
||||
@@ -377,220 +410,249 @@ const ChatUI = () => {
|
||||
setShowPoster(true);
|
||||
};
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
// 切换侧边栏状态的函数
|
||||
const toggleSidebar = () => {
|
||||
setSidebarOpen(!sidebarOpen);
|
||||
};
|
||||
|
||||
// 处理群组选择
|
||||
const handleSelectGroup = (index: number) => {
|
||||
setSelectedGroupIndex(index);
|
||||
const newGroup = groups[index];
|
||||
setGroup(newGroup);
|
||||
|
||||
// 重新生成当前群组的 AI 角色，并按照 members 数组的顺序排序
|
||||
const newGroupAiCharacters = generateAICharacters(newGroup.name)
|
||||
.filter(character => newGroup.members.includes(character.id))
|
||||
.sort((a, b) => {
|
||||
return newGroup.members.indexOf(a.id) - newGroup.members.indexOf(b.id);
|
||||
});
|
||||
|
||||
// 更新用户列表
|
||||
setUsers([
|
||||
{ id: 1, name: "我" },
|
||||
...newGroupAiCharacters
|
||||
]);
|
||||
setIsGroupDiscussionMode(newGroup.isGroupDiscussionMode);
|
||||
|
||||
// 重置消息
|
||||
setMessages([]);
|
||||
|
||||
// 可选：关闭侧边栏（在移动设备上）
|
||||
if (window.innerWidth < 768) {
|
||||
setSidebarOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<KaTeXStyle />
|
||||
<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>
|
||||
) : 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 className="fixed inset-0 bg-gradient-to-br from-orange-50 via-orange-50/70 to-orange-100 flex items-start md:items-center justify-center overflow-hidden">
|
||||
<div className="h-full flex bg-white w-full mx-auto relative shadow-xl md:max-w-5xl md:h-[96dvh] md:my-auto md:rounded-lg">
|
||||
{/* 传递 selectedGroupIndex 和 onSelectGroup 回调给 Sidebar */}
|
||||
<Sidebar
|
||||
isOpen={sidebarOpen}
|
||||
toggleSidebar={toggleSidebar}
|
||||
selectedGroupIndex={selectedGroupIndex}
|
||||
onSelectGroup={handleSelectGroup}
|
||||
/>
|
||||
|
||||
{/* 聊天主界面 */}
|
||||
<div className="flex flex-col flex-1">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow flex-none md:rounded-t-lg">
|
||||
<div className="flex items-center justify-between px-0 py-1.5">
|
||||
{/* 左侧群组信息 */}
|
||||
<div className="flex items-center md:px-2.5">
|
||||
<div
|
||||
className="md:hidden flex items-center justify-center m-1 cursor-pointer"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6" />
|
||||
</div>
|
||||
|
||||
<h1 className="font-medium text-base -ml-1">{group.name}({users.length})</h1>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 右侧头像组和按钮 */}
|
||||
<div className="flex items-center">
|
||||
{/* 广告位 手机端不展示*/}
|
||||
<div className="hidden md:block">
|
||||
<AdBanner show={showAd} closeAd={() => setShowAd(false)} />
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
|
||||
<Settings2 className="w-5 h-5" />
|
||||
</Button>
|
||||
</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>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Main Chat Area */}
|
||||
<div className="flex-1 overflow-hidden bg-gray-100">
|
||||
|
||||
<ScrollArea className={`h-full ${!showAd ? 'px-2 py-1' : ''} md:px-2 md:py-1`} ref={chatAreaRef}>
|
||||
<div className="md:hidden">
|
||||
<AdBannerMobile show={showAd} closeAd={() => setShowAd(false)} />
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={() => setShowMembers(true)}>
|
||||
<Settings2 className="w-5 h-5" />
|
||||
<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 py-3 px-2 md:rounded-b-lg">
|
||||
<div className="flex gap-1 pb-[env(safe-area-inset-bottom)]">
|
||||
{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 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>
|
||||
{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>
|
||||
</div>
|
||||
|
||||
|
||||
38
src/components/Header.tsx
Normal file
38
src/components/Header.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import GitHubButton from 'react-github-btn';
|
||||
import '@fontsource/audiowide';
|
||||
|
||||
|
||||
|
||||
const Header: React.FC = () => {
|
||||
return (
|
||||
<header className="bg-transparent fixed top-0 left-0 right-0 z-50 hidden md:block">
|
||||
<div className="w-full px-2 h-10 flex items-center" >
|
||||
{/* Logo */}
|
||||
<div className="flex-1 flex items-center">
|
||||
<a href="/" className="flex items-center">
|
||||
<img src="/img/logo.svg" alt="logo" className="h-6 w-6 mr-2" />
|
||||
<span style={{ fontFamily: 'Audiowide, system-ui', color: '#ff6600' }} className="text-2xl">
|
||||
botgroup.chat
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* GitHub Star Button */}
|
||||
<div className="flex items-center justify-end">
|
||||
<GitHubButton
|
||||
href="https://github.com/maojindao55/botgroup.chat"
|
||||
data-color-scheme="no-preference: light; light: light; dark: light;"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star maojindao55/botgroup.chat on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -1,23 +1,16 @@
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
import React from 'react';
|
||||
import Header from './Header';
|
||||
|
||||
function Layout({ children }: LayoutProps) {
|
||||
const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
return (
|
||||
<div className="app-container">
|
||||
<header className="app-header">
|
||||
{/* 这里可以放导航栏 */}
|
||||
</header>
|
||||
|
||||
<main className="app-main">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<footer className="app-footer">
|
||||
{/* 这里可以放页脚信息 */}
|
||||
</footer>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<div className="flex flex-1">
|
||||
<main className="flex-1 pt-14">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout
|
||||
export default Layout;
|
||||
170
src/components/Sidebar.tsx
Normal file
170
src/components/Sidebar.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import React from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MessageSquareIcon, PlusCircleIcon, MenuIcon, PanelLeftCloseIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import GitHubButton from 'react-github-btn';
|
||||
import '@fontsource/audiowide';
|
||||
import { groups } from "@/config/groups";
|
||||
import { AdSection } from './AdSection';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
// 根据群组ID生成固定的随机颜色
|
||||
const getRandomColor = (index: number) => {
|
||||
const colors = ['blue', 'green', 'yellow', 'purple', 'pink', 'indigo', 'red', 'orange', 'teal'];
|
||||
//增加hash
|
||||
const hashCode = index.toString().split('').reduce((acc, char) => {
|
||||
return char.charCodeAt(0) + ((acc << 5) - acc);
|
||||
}, 0);
|
||||
return colors[hashCode % colors.length];
|
||||
};
|
||||
|
||||
interface SidebarProps {
|
||||
isOpen: boolean;
|
||||
toggleSidebar: () => void;
|
||||
selectedGroupIndex?: number;
|
||||
onSelectGroup?: (index: number) => void;
|
||||
}
|
||||
|
||||
const Sidebar = ({ isOpen, toggleSidebar, selectedGroupIndex = 0, onSelectGroup }: SidebarProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 侧边栏 - 在移动设备上可以隐藏，在桌面上始终显示 */}
|
||||
<div
|
||||
className={cn(
|
||||
"transition-all duration-300 ease-in-out",
|
||||
"fixed md:relative z-20 h-full",
|
||||
isOpen ? "w-48 translate-x-0" : "w-0 md:w-14 -translate-x-full md:translate-x-0"
|
||||
)}
|
||||
>
|
||||
<div className="h-full border-r bg-background rounded-l-lg overflow-hidden flex flex-col">
|
||||
<div className="flex items-center justify-between px-2 py-1.5 border-b border-border/40">
|
||||
<div className="flex-1 flex items-center">
|
||||
<span className={cn(
|
||||
"font-medium text-base text-foreground/90 transition-all duration-200 whitespace-nowrap overflow-hidden",
|
||||
isOpen ? "opacity-100 max-w-full mr-2 pl-3" : "opacity-0 max-w-0 md:max-w-0"
|
||||
)}>
|
||||
群列表
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleSidebar}
|
||||
className={cn(
|
||||
"text-muted-foreground hover:text-primary",
|
||||
isOpen ? "ml-auto" : "mx-auto md:ml-auto"
|
||||
)}
|
||||
>
|
||||
{isOpen ? <PanelLeftCloseIcon className="h-4 w-4" /> : <MenuIcon className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto p-2">
|
||||
<nav className="space-y-1.5">
|
||||
{groups.map((group, index) => (
|
||||
<a
|
||||
key={group.id}
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onSelectGroup?.(index);
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center gap-1 rounded-md px-3 py-2.5 text-sm font-medium transition-all hover:bg-accent/80 group",
|
||||
!isOpen && "md:justify-center",
|
||||
selectedGroupIndex === index && "bg-accent"
|
||||
)}
|
||||
>
|
||||
<MessageSquareIcon
|
||||
className={`h-5 w-5 flex-shrink-0 group-hover:opacity-80 text-${getRandomColor(index)}-500 group-hover:text-${getRandomColor(index)}-600`}
|
||||
/>
|
||||
<span className={cn(
|
||||
"transition-all duration-200 whitespace-nowrap overflow-hidden text-foreground/90",
|
||||
isOpen ? "opacity-100 max-w-full" : "opacity-0 max-w-0 md:max-w-0"
|
||||
)}>{group.name}</span>
|
||||
</a>
|
||||
))}
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<a
|
||||
href="#"
|
||||
className={cn(
|
||||
"flex items-center gap-1 rounded-md px-3 py-2.5 text-sm font-medium transition-all hover:bg-accent/80 group mt-3",
|
||||
!isOpen && "md:justify-center"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<PlusCircleIcon className="h-5 w-5 flex-shrink-0 text-amber-500 group-hover:text-amber-600" />
|
||||
<span className={cn(
|
||||
"transition-all duration-200 whitespace-nowrap overflow-hidden text-foreground/90",
|
||||
isOpen ? "opacity-100 max-w-full" : "opacity-0 max-w-0 md:max-w-0"
|
||||
)}>创建新群聊</span>
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>即将开放,敬请期待</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* 广告位 */}
|
||||
<AdSection isOpen={isOpen} />
|
||||
|
||||
{/* GitHub Star Button - 只在侧边栏打开时显示，放在底部 */}
|
||||
<div className="px-3 py-2 mt-auto">
|
||||
{/* 标题移至底部 */}
|
||||
<div className="flex items-center justify-left mb-3">
|
||||
<a href="/" className="flex items-center">
|
||||
<span
|
||||
style={{ fontFamily: 'Audiowide, system-ui', color: '#ff6600' }}
|
||||
className={cn(
|
||||
"transition-all duration-200 whitespace-nowrap overflow-hidden",
|
||||
isOpen ? "text-lg" : "text-xs max-w-0 opacity-0 md:max-w-0"
|
||||
)}
|
||||
>
|
||||
botgroup.chat
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div className="flex items-center justify-left">
|
||||
<GitHubButton
|
||||
href="https://github.com/maojindao55/botgroup.chat"
|
||||
data-color-scheme="no-preference: light; light: light; dark: light;"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star maojindao55/botgroup.chat on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 移动设备上的遮罩层，点击时关闭侧边栏 */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-10 md:hidden"
|
||||
onClick={toggleSidebar}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
29
src/components/ui/popover.tsx
Normal file
29
src/components/ui/popover.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import * as React from "react"
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Popover = PopoverPrimitive.Root
|
||||
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
))
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent }
|
||||
29
src/components/ui/separator.tsx
Normal file
29
src/components/ui/separator.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(
|
||||
(
|
||||
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||
ref
|
||||
) => (
|
||||
<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||
|
||||
export { Separator }
|
||||
761
src/components/ui/sidebar.tsx
Normal file
761
src/components/ui/sidebar.tsx
Normal file
@@ -0,0 +1,761 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { VariantProps, cva } from "class-variance-authority"
|
||||
import { PanelLeft } from "lucide-react"
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Sheet, SheetContent } from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
type SidebarContext = {
|
||||
state: "expanded" | "collapsed"
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
openMobile: boolean
|
||||
setOpenMobile: (open: boolean) => void
|
||||
isMobile: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContext | null>(null)
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext)
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
const SidebarProvider = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||
const open = openProp ?? _open
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
},
|
||||
[setOpenProp, open]
|
||||
)
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile
|
||||
? setOpenMobile((open) => !open)
|
||||
: setOpen((open) => !open)
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault()
|
||||
toggleSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [toggleSidebar])
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed"
|
||||
|
||||
const contextValue = React.useMemo<SidebarContext>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||
)
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
)
|
||||
SidebarProvider.displayName = "SidebarProvider"
|
||||
|
||||
const Sidebar = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right"
|
||||
variant?: "sidebar" | "floating" | "inset"
|
||||
collapsible?: "offcanvas" | "icon" | "none"
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
data-sidebar="sidebar"
|
||||
data-mobile="true"
|
||||
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="group peer hidden text-sidebar-foreground md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
|
||||
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
|
||||
side === "left"
|
||||
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
||||
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
Sidebar.displayName = "Sidebar"
|
||||
|
||||
const SidebarTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof Button>,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, onClick, ...props }, ref) => {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
data-sidebar="trigger"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("h-7 w-7", className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event)
|
||||
toggleSidebar()
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeft />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
SidebarTrigger.displayName = "SidebarTrigger"
|
||||
|
||||
const SidebarRail = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button">
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
data-sidebar="rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
|
||||
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarRail.displayName = "SidebarRail"
|
||||
|
||||
const SidebarInset = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"main">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<main
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex min-h-svh flex-1 flex-col bg-background",
|
||||
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarInset.displayName = "SidebarInset"
|
||||
|
||||
const SidebarInput = React.forwardRef<
|
||||
React.ElementRef<typeof Input>,
|
||||
React.ComponentProps<typeof Input>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<Input
|
||||
ref={ref}
|
||||
data-sidebar="input"
|
||||
className={cn(
|
||||
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarInput.displayName = "SidebarInput"
|
||||
|
||||
const SidebarHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarHeader.displayName = "SidebarHeader"
|
||||
|
||||
const SidebarFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarFooter.displayName = "SidebarFooter"
|
||||
|
||||
const SidebarSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof Separator>,
|
||||
React.ComponentProps<typeof Separator>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<Separator
|
||||
ref={ref}
|
||||
data-sidebar="separator"
|
||||
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarSeparator.displayName = "SidebarSeparator"
|
||||
|
||||
const SidebarContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarContent.displayName = "SidebarContent"
|
||||
|
||||
const SidebarGroup = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarGroup.displayName = "SidebarGroup"
|
||||
|
||||
const SidebarGroupLabel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & { asChild?: boolean }
|
||||
>(({ className, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "div"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="group-label"
|
||||
className={cn(
|
||||
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarGroupLabel.displayName = "SidebarGroupLabel"
|
||||
|
||||
const SidebarGroupAction = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & { asChild?: boolean }
|
||||
>(({ className, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="group-action"
|
||||
className={cn(
|
||||
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 after:md:hidden",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarGroupAction.displayName = "SidebarGroupAction"
|
||||
|
||||
const SidebarGroupContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SidebarGroupContent.displayName = "SidebarGroupContent"
|
||||
|
||||
const SidebarMenu = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SidebarMenu.displayName = "SidebarMenu"
|
||||
|
||||
const SidebarMenuItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li
|
||||
ref={ref}
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SidebarMenuItem.displayName = "SidebarMenuItem"
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const SidebarMenuButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
isActive?: boolean
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>
|
||||
>(
|
||||
(
|
||||
{
|
||||
asChild = false,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const { isMobile, state } = useSidebar()
|
||||
|
||||
const button = (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
if (!tooltip) {
|
||||
return button
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
)
|
||||
SidebarMenuButton.displayName = "SidebarMenuButton"
|
||||
|
||||
const SidebarMenuAction = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<"button"> & {
|
||||
asChild?: boolean
|
||||
showOnHover?: boolean
|
||||
}
|
||||
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-action"
|
||||
className={cn(
|
||||
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
// Increases the hit area of the button on mobile.
|
||||
"after:absolute after:-inset-2 after:md:hidden",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
showOnHover &&
|
||||
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarMenuAction.displayName = "SidebarMenuAction"
|
||||
|
||||
const SidebarMenuBadge = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
|
||||
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
|
||||
"peer-data-[size=sm]/menu-button:top-1",
|
||||
"peer-data-[size=default]/menu-button:top-1.5",
|
||||
"peer-data-[size=lg]/menu-button:top-2.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SidebarMenuBadge.displayName = "SidebarMenuBadge"
|
||||
|
||||
const SidebarMenuSkeleton = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean
|
||||
}
|
||||
>(({ className, showIcon = false, ...props }, ref) => {
|
||||
// Random width between 50 to 90%.
|
||||
const width = React.useMemo(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-[--skeleton-width] flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
|
||||
|
||||
const SidebarMenuSub = React.forwardRef<
|
||||
HTMLUListElement,
|
||||
React.ComponentProps<"ul">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ul
|
||||
ref={ref}
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SidebarMenuSub.displayName = "SidebarMenuSub"
|
||||
|
||||
const SidebarMenuSubItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentProps<"li">
|
||||
>(({ ...props }, ref) => <li ref={ref} {...props} />)
|
||||
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
|
||||
|
||||
const SidebarMenuSubButton = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentProps<"a"> & {
|
||||
asChild?: boolean
|
||||
size?: "sm" | "md"
|
||||
isActive?: boolean
|
||||
}
|
||||
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
ref={ref}
|
||||
data-sidebar="menu-sub-button"
|
||||
data-size={size}
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
||||
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
|
||||
size === "sm" && "text-xs",
|
||||
size === "md" && "text-sm",
|
||||
"group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
}
|
||||
15
src/components/ui/skeleton.tsx
Normal file
15
src/components/ui/skeleton.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@@ -6,25 +6,50 @@ export const modelConfigs = [
|
||||
baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
|
||||
},
|
||||
{
|
||||
model: "deepseek-v3",
|
||||
apiKey: "DASHSCOPE_API_KEY",
|
||||
baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
|
||||
},
|
||||
{
|
||||
model: "hunyuan-standard",
|
||||
apiKey: "HUNYUAN_API_KEY",
|
||||
baseURL: "https://api.hunyuan.cloud.tencent.com/v1"
|
||||
},
|
||||
{
|
||||
model: "ep-20250217191935-wzj8l",//火山引擎接入点（改成自己的）
|
||||
model: "deepseek-v3-241226",
|
||||
apiKey: "ARK_API_KEY",
|
||||
baseURL: "https://ark.cn-beijing.volces.com/api/v3"
|
||||
},
|
||||
{
|
||||
model: "hunyuan-lite",//免费模型
|
||||
apiKey: "HUNYUAN_API_KEY",
|
||||
model: "hunyuan-turbos-latest",
|
||||
apiKey: "HUNYUAN_API_KEY1",
|
||||
baseURL: "https://api.hunyuan.cloud.tencent.com/v1"
|
||||
},
|
||||
{
|
||||
model: "doubao-1-5-lite-32k-250115",//豆包模型|火山引擎接入点（改成自己的）
|
||||
apiKey: "ARK_API_KEY",
|
||||
baseURL: "https://ark.cn-beijing.volces.com/api/v3"
|
||||
},
|
||||
{
|
||||
model: "ep-20250306223646-szzkw",//deepseekv火山引擎接入点（改成自己的）
|
||||
apiKey: "ARK_API_KEY1",
|
||||
baseURL: "https://ark.cn-beijing.volces.com/api/v3"
|
||||
},
|
||||
{
|
||||
model: "glm-4-plus",
|
||||
apiKey: "GLM_API_KEY",
|
||||
baseURL: "https://open.bigmodel.cn/api/paas/v4/"
|
||||
},
|
||||
{
|
||||
model: "qwen-turbo",//调度模型
|
||||
apiKey: "DASHSCOPE_API_KEY", // 这里存储环境变量的 key 名称
|
||||
baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
|
||||
},
|
||||
{
|
||||
model: "deepseek-chat",
|
||||
apiKey: "DEEPSEEK_API_KEY",
|
||||
baseURL: "https://api.deepseek.com/v1"
|
||||
},
|
||||
{
|
||||
model: "moonshot-v1-8k",
|
||||
apiKey: "KIMI_API_KEY",
|
||||
baseURL: "https://api.moonshot.cn/v1"
|
||||
},
|
||||
{
|
||||
model: "ernie-3.5-128k",
|
||||
apiKey: "BAIDU_API_KEY",
|
||||
baseURL: "https://qianfan.baidubce.com/v2"
|
||||
}
|
||||
] as const;
|
||||
export type ModelType = typeof modelConfigs[number]["model"];
|
||||
|
||||
@@ -104,7 +129,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
|
||||
model: modelConfigs[2].model,
|
||||
avatar: "/img/yuanbao.png",
|
||||
custom_prompt: `你是一个名叫"元宝"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["微信生态", "新闻报道", "文字游戏", "生活助手", "娱乐", "信息总结"]
|
||||
tags: ["微信", "聊天", "新闻报道", "文字游戏","命令", "娱乐", "信息总结"]
|
||||
},
|
||||
{
|
||||
id: 'ai5',
|
||||
@@ -113,7 +138,7 @@ export function generateAICharacters(groupName: string): AICharacter[] {
|
||||
model: modelConfigs[3].model,
|
||||
avatar: "/img/doubao_new.png",
|
||||
custom_prompt: `你是一个名叫"豆包"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["生活助手", "文字游戏", "学生", "娱乐", "抖音"]
|
||||
tags: ["聊天", "文字游戏", "学生", "娱乐", "命令"]
|
||||
},
|
||||
{
|
||||
id: 'ai6',
|
||||
@@ -122,16 +147,43 @@ export function generateAICharacters(groupName: string): AICharacter[] {
|
||||
model: modelConfigs[0].model,
|
||||
avatar: "/img/qwen.jpg",
|
||||
custom_prompt: `你是一个名叫"千问"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["广告文案","分析数据","文字游戏","信息总结", "阿里"]
|
||||
tags: ["广告文案","分析数据","文字游戏","信息总结", "聊天", "命令"]
|
||||
},
|
||||
{
|
||||
id: 'ai7',
|
||||
name: "DeepSeek",
|
||||
personality: "deepseek-r1",
|
||||
model: modelConfigs[3].model,
|
||||
personality: "deepseek-V3",
|
||||
model: modelConfigs[1].model,
|
||||
avatar: "/img/ds.svg",
|
||||
custom_prompt: `你是一个名叫"DeepSeek"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["深度推理", "编程", "文字游戏", "数学", "信息总结"]
|
||||
tags: ["深度推理", "编程", "文字游戏", "数学", "信息总结", "聊天", "命令"]
|
||||
},
|
||||
{
|
||||
id: 'ai8',
|
||||
name: "智谱",
|
||||
personality: "glm",
|
||||
model: modelConfigs[5].model,
|
||||
avatar: "/img/glm.gif",
|
||||
custom_prompt: `你是一个名叫"智谱"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["深度推理","数学","信息总结", "分析数据","文字游戏", "聊天", "命令"]
|
||||
},
|
||||
{
|
||||
id: 'ai9',
|
||||
name: "Kimi",
|
||||
personality: "kimi",
|
||||
model: modelConfigs[8].model,
|
||||
avatar: "/img/kimi.jpg",
|
||||
custom_prompt: `你是一个名叫"Kimi"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["深度推理","数学","信息总结", "分析数据","文字游戏", "聊天", "命令"]
|
||||
},
|
||||
{
|
||||
id: 'ai10',
|
||||
name: "文小言",
|
||||
personality: "baidu",
|
||||
model: modelConfigs[9].model,
|
||||
avatar: "/img/baidu.svg",
|
||||
custom_prompt: `你是一个名叫"文心一言"的硅基生命体，你当前在一个叫"${groupName}" 的聊天群里`,
|
||||
tags: ["深度推理","数学","信息总结", "分析数据","文字游戏", "聊天", "命令"]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
@@ -4,19 +4,29 @@ export interface Group {
|
||||
name: string;
|
||||
description: string;
|
||||
members: string[];
|
||||
isGroupDiscussionMode: boolean;
|
||||
}
|
||||
|
||||
export const groups: Group[] = [
|
||||
{
|
||||
id: 'group1',
|
||||
name: '硅碳摸鱼交流群',
|
||||
description: '硅碳摸鱼交流群',
|
||||
members: ['ai1', 'ai2', 'ai3']
|
||||
name: '🔥硅碳生命体交流群',
|
||||
description: '群消息关注度权重：“user”的最新消息>其他成员最新消息>“user”的历史消息>其他成员历史消息>',
|
||||
members: [ 'ai8', 'ai5', 'ai6', 'ai7', 'ai9', 'ai10', 'ai4'],
|
||||
isGroupDiscussionMode: false
|
||||
},
|
||||
{
|
||||
id: 'group2',
|
||||
name: '硅碳生命体交流群',
|
||||
description: '硅碳生命体交流群',
|
||||
members: ['ai4', 'ai5', 'ai6', 'ai7']
|
||||
name: '🎯AI成语接龙游戏群',
|
||||
description: '可以适当打招呼问候自我介绍 #注意：本群主线是成语接龙游戏，请严格按照文字成语接龙规则，不能过度闲聊，一旦游戏开始不要过度解释，只允许回复1条成语',
|
||||
isGroupDiscussionMode: true,
|
||||
members: [ 'ai8', 'ai5', 'ai6', 'ai7', 'ai9', 'ai10', 'ai4'],
|
||||
},
|
||||
{
|
||||
id: 'group3',
|
||||
name: '💕AI树洞倾诉群',
|
||||
description: '做一个温暖贴心的倾听者。当用户分享烦恼或秘密时，请表现出理解和同理心，提供情感支持而非简单建议。避免评判，保持尊重，适当提问以帮助用户更好地表达自己。记住，你的角色是提供安全的倾诉空间，而不是解决所有问题。',
|
||||
isGroupDiscussionMode: true,
|
||||
members: [ 'ai8','ai5', 'ai6', 'ai9', 'ai10'],
|
||||
}
|
||||
];
|
||||
|
||||
19
src/hooks/use-mobile.tsx
Normal file
19
src/hooks/use-mobile.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
@@ -56,7 +56,23 @@
|
||||
--chart-5: 27 87% 67%;
|
||||
|
||||
--radius: 0.5rem
|
||||
}
|
||||
;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--sidebar-border: 220 13% 91%;
|
||||
|
||||
--sidebar-ring: 217.2 91.2% 59.8%}
|
||||
.dark {
|
||||
|
||||
--background: 0 0% 3.9%;
|
||||
@@ -106,7 +122,23 @@
|
||||
--chart-4: 280 65% 60%;
|
||||
|
||||
--chart-5: 340 75% 55%
|
||||
}
|
||||
;
|
||||
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
|
||||
--sidebar-ring: 217.2 91.2% 59.8%}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
@@ -49,6 +49,16 @@ module.exports = {
|
||||
'3': 'hsl(var(--chart-3))',
|
||||
'4': 'hsl(var(--chart-4))',
|
||||
'5': 'hsl(var(--chart-5))'
|
||||
},
|
||||
sidebar: {
|
||||
DEFAULT: 'hsl(var(--sidebar-background))',
|
||||
foreground: 'hsl(var(--sidebar-foreground))',
|
||||
primary: 'hsl(var(--sidebar-primary))',
|
||||
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
||||
accent: 'hsl(var(--sidebar-accent))',
|
||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||
border: 'hsl(var(--sidebar-border))',
|
||||
ring: 'hsl(var(--sidebar-ring))'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3
warngler.toml
Normal file
3
warngler.toml
Normal file
@@ -0,0 +1,3 @@
|
||||
[observability]
|
||||
enabled = true
|
||||
head_sampling_rate = 1 # optional. default = 1.
|
||||
Reference in New Issue
Block a user