Compare commits
No commits in common. "56b7ffa68dd9d179a5da64ba795f5eadf519b2a5" and "6047af071cb2ae624823ad79046070e2853ec60b" have entirely different histories.
56b7ffa68d
...
6047af071c
@ -27,7 +27,6 @@
|
|||||||
"nodemailer": "^7.0.11",
|
"nodemailer": "^7.0.11",
|
||||||
"pg": "^8.16.3",
|
"pg": "^8.16.3",
|
||||||
"prismjs": "^1.30.0",
|
"prismjs": "^1.30.0",
|
||||||
"qrcode.react": "^4.2.0",
|
|
||||||
"react": "19.2.1",
|
"react": "19.2.1",
|
||||||
"react-dom": "19.2.1",
|
"react-dom": "19.2.1",
|
||||||
"react-markdown": "^10.1.0",
|
"react-markdown": "^10.1.0",
|
||||||
|
|||||||
@ -50,9 +50,6 @@ importers:
|
|||||||
prismjs:
|
prismjs:
|
||||||
specifier: ^1.30.0
|
specifier: ^1.30.0
|
||||||
version: 1.30.0
|
version: 1.30.0
|
||||||
qrcode.react:
|
|
||||||
specifier: ^4.2.0
|
|
||||||
version: 4.2.0(react@19.2.1)
|
|
||||||
react:
|
react:
|
||||||
specifier: 19.2.1
|
specifier: 19.2.1
|
||||||
version: 19.2.1
|
version: 19.2.1
|
||||||
@ -3040,11 +3037,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
|
||||||
qrcode.react@4.2.0:
|
|
||||||
resolution: {integrity: sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==}
|
|
||||||
peerDependencies:
|
|
||||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
|
|
||||||
|
|
||||||
queue-microtask@1.2.3:
|
queue-microtask@1.2.3:
|
||||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||||
|
|
||||||
@ -6898,10 +6890,6 @@ snapshots:
|
|||||||
|
|
||||||
punycode@2.3.1: {}
|
punycode@2.3.1: {}
|
||||||
|
|
||||||
qrcode.react@4.2.0(react@19.2.1):
|
|
||||||
dependencies:
|
|
||||||
react: 19.2.1
|
|
||||||
|
|
||||||
queue-microtask@1.2.3: {}
|
queue-microtask@1.2.3: {}
|
||||||
|
|
||||||
raf@3.4.1:
|
raf@3.4.1:
|
||||||
|
|||||||
@ -1,203 +0,0 @@
|
|||||||
/**
|
|
||||||
* 对话分享 API
|
|
||||||
* POST /api/conversations/[id]/share - 创建分享
|
|
||||||
* GET /api/conversations/[id]/share - 获取对话的分享列表
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { NextRequest, NextResponse } from 'next/server';
|
|
||||||
import { db } from '@/drizzle/db';
|
|
||||||
import { conversations, sharedConversations } from '@/drizzle/schema';
|
|
||||||
import { eq, and } from 'drizzle-orm';
|
|
||||||
import { getCurrentUser } from '@/lib/auth';
|
|
||||||
import { nanoid } from 'nanoid';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成短链接码（8位字母数字）
|
|
||||||
*/
|
|
||||||
function generateShareCode(): string {
|
|
||||||
return nanoid(8);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 创建分享
|
|
||||||
*/
|
|
||||||
export async function POST(
|
|
||||||
request: NextRequest,
|
|
||||||
{ params }: { params: Promise<{ id: string }> }
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
// 验证用户身份
|
|
||||||
const user = await getCurrentUser();
|
|
||||||
if (!user) {
|
|
||||||
return NextResponse.json({ error: '未登录' }, { status: 401 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { id: conversationId } = await params;
|
|
||||||
|
|
||||||
// 获取请求体
|
|
||||||
const body = await request.json();
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
includeThinking = true,
|
|
||||||
includeToolCalls = false,
|
|
||||||
includeImages = true,
|
|
||||||
selectedMessageIds = null, // 新增：选择的消息ID，null 表示全部
|
|
||||||
} = body;
|
|
||||||
|
|
||||||
// 验证对话存在且属于当前用户
|
|
||||||
const conversation = await db.query.conversations.findFirst({
|
|
||||||
where: eq(conversations.conversationId, conversationId),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!conversation) {
|
|
||||||
return NextResponse.json({ error: '对话不存在' }, { status: 404 });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (conversation.userId !== user.userId) {
|
|
||||||
return NextResponse.json({ error: '无权分享此对话' }, { status: 403 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成分享信息
|
|
||||||
const shareId = nanoid();
|
|
||||||
const shareCode = generateShareCode();
|
|
||||||
|
|
||||||
// 创建分享记录
|
|
||||||
await db.insert(sharedConversations).values({
|
|
||||||
shareId,
|
|
||||||
conversationId,
|
|
||||||
userId: user.userId,
|
|
||||||
shareCode,
|
|
||||||
title: title || conversation.title,
|
|
||||||
description,
|
|
||||||
includeThinking,
|
|
||||||
includeToolCalls,
|
|
||||||
includeImages,
|
|
||||||
snapshotAt: new Date(), // 记录快照时间点
|
|
||||||
selectedMessageIds, // 新增：存储选择的消息ID
|
|
||||||
});
|
|
||||||
|
|
||||||
// 构建分享 URL
|
|
||||||
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
|
|
||||||
const shareUrl = `${baseUrl}/share/${shareCode}`;
|
|
||||||
|
|
||||||
return NextResponse.json({
|
|
||||||
shareId,
|
|
||||||
shareCode,
|
|
||||||
shareUrl,
|
|
||||||
title: title || conversation.title,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Create share error:', error);
|
|
||||||
return NextResponse.json({ error: '创建分享失败' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取对话的分享列表
|
|
||||||
*/
|
|
||||||
export async function GET(
|
|
||||||
request: NextRequest,
|
|
||||||
{ params }: { params: Promise<{ id: string }> }
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
// 验证用户身份
|
|
||||||
const user = await getCurrentUser();
|
|
||||||
if (!user) {
|
|
||||||
return NextResponse.json({ error: '未登录' }, { status: 401 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const { id: conversationId } = await params;
|
|
||||||
|
|
||||||
// 验证对话存在且属于当前用户
|
|
||||||
const conversation = await db.query.conversations.findFirst({
|
|
||||||
where: eq(conversations.conversationId, conversationId),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!conversation) {
|
|
||||||
return NextResponse.json({ error: '对话不存在' }, { status: 404 });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (conversation.userId !== user.userId) {
|
|
||||||
return NextResponse.json({ error: '无权访问' }, { status: 403 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取分享列表
|
|
||||||
const shares = await db.query.sharedConversations.findMany({
|
|
||||||
where: and(
|
|
||||||
eq(sharedConversations.conversationId, conversationId),
|
|
||||||
eq(sharedConversations.isActive, true)
|
|
||||||
),
|
|
||||||
orderBy: (shares, { desc }) => [desc(shares.createdAt)],
|
|
||||||
});
|
|
||||||
|
|
||||||
// 构建分享 URL
|
|
||||||
const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
|
|
||||||
|
|
||||||
return NextResponse.json({
|
|
||||||
shares: shares.map((share) => ({
|
|
||||||
shareId: share.shareId,
|
|
||||||
shareCode: share.shareCode,
|
|
||||||
shareUrl: `${baseUrl}/share/${share.shareCode}`,
|
|
||||||
title: share.title,
|
|
||||||
description: share.description,
|
|
||||||
viewCount: share.viewCount,
|
|
||||||
includeThinking: share.includeThinking,
|
|
||||||
includeToolCalls: share.includeToolCalls,
|
|
||||||
includeImages: share.includeImages,
|
|
||||||
createdAt: share.createdAt,
|
|
||||||
})),
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Get shares error:', error);
|
|
||||||
return NextResponse.json({ error: '获取分享列表失败' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除分享
|
|
||||||
*/
|
|
||||||
export async function DELETE(
|
|
||||||
request: NextRequest,
|
|
||||||
{ params }: { params: Promise<{ id: string }> }
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
// 验证用户身份
|
|
||||||
const user = await getCurrentUser();
|
|
||||||
if (!user) {
|
|
||||||
return NextResponse.json({ error: '未登录' }, { status: 401 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从查询参数获取 shareId
|
|
||||||
const searchParams = request.nextUrl.searchParams;
|
|
||||||
const shareId = searchParams.get('shareId');
|
|
||||||
|
|
||||||
if (!shareId) {
|
|
||||||
return NextResponse.json({ error: '缺少 shareId 参数' }, { status: 400 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 验证分享存在且属于当前用户
|
|
||||||
const share = await db.query.sharedConversations.findFirst({
|
|
||||||
where: eq(sharedConversations.shareId, shareId),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!share) {
|
|
||||||
return NextResponse.json({ error: '分享不存在' }, { status: 404 });
|
|
||||||
}
|
|
||||||
|
|
||||||
if (share.userId !== user.userId) {
|
|
||||||
return NextResponse.json({ error: '无权删除此分享' }, { status: 403 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 软删除（设置 isActive 为 false）
|
|
||||||
await db
|
|
||||||
.update(sharedConversations)
|
|
||||||
.set({ isActive: false, updatedAt: new Date() })
|
|
||||||
.where(eq(sharedConversations.shareId, shareId));
|
|
||||||
|
|
||||||
return NextResponse.json({ success: true });
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Delete share error:', error);
|
|
||||||
return NextResponse.json({ error: '删除分享失败' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
/**
|
|
||||||
* 公开分享内容 API
|
|
||||||
* GET /api/share/[code] - 获取分享的对话内容（无需登录）
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { NextRequest, NextResponse } from 'next/server';
|
|
||||||
import { db } from '@/drizzle/db';
|
|
||||||
import { sharedConversations, conversations, messages } from '@/drizzle/schema';
|
|
||||||
import { eq, asc, and, lte, inArray } from 'drizzle-orm';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取分享的对话内容
|
|
||||||
*/
|
|
||||||
export async function GET(
|
|
||||||
request: NextRequest,
|
|
||||||
{ params }: { params: Promise<{ code: string }> }
|
|
||||||
) {
|
|
||||||
try {
|
|
||||||
const { code: shareCode } = await params;
|
|
||||||
|
|
||||||
// 查找分享记录
|
|
||||||
const share = await db.query.sharedConversations.findFirst({
|
|
||||||
where: eq(sharedConversations.shareCode, shareCode),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!share) {
|
|
||||||
return NextResponse.json({ error: '分享不存在' }, { status: 404 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查分享是否激活
|
|
||||||
if (!share.isActive) {
|
|
||||||
return NextResponse.json({ error: '分享已失效' }, { status: 410 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取对话信息
|
|
||||||
const conversation = await db.query.conversations.findFirst({
|
|
||||||
where: eq(conversations.conversationId, share.conversationId),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!conversation) {
|
|
||||||
return NextResponse.json({ error: '对话不存在' }, { status: 404 });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取消息列表
|
|
||||||
// 优先级：selectedMessageIds > snapshotAt > 全部
|
|
||||||
let messageList;
|
|
||||||
|
|
||||||
if (share.selectedMessageIds && share.selectedMessageIds.length > 0) {
|
|
||||||
// 如果指定了消息ID，按消息ID过滤
|
|
||||||
messageList = await db.query.messages.findMany({
|
|
||||||
where: and(
|
|
||||||
eq(messages.conversationId, share.conversationId),
|
|
||||||
inArray(messages.messageId, share.selectedMessageIds)
|
|
||||||
),
|
|
||||||
orderBy: [asc(messages.createdAt)],
|
|
||||||
});
|
|
||||||
} else if (share.snapshotAt) {
|
|
||||||
// 否则按快照时间过滤
|
|
||||||
messageList = await db.query.messages.findMany({
|
|
||||||
where: and(
|
|
||||||
eq(messages.conversationId, share.conversationId),
|
|
||||||
lte(messages.createdAt, share.snapshotAt)
|
|
||||||
),
|
|
||||||
orderBy: [asc(messages.createdAt)],
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 获取全部消息
|
|
||||||
messageList = await db.query.messages.findMany({
|
|
||||||
where: eq(messages.conversationId, share.conversationId),
|
|
||||||
orderBy: [asc(messages.createdAt)],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据分享设置过滤消息内容
|
|
||||||
const filteredMessages = messageList.map((msg) => ({
|
|
||||||
id: msg.messageId,
|
|
||||||
role: msg.role,
|
|
||||||
content: msg.content,
|
|
||||||
// 根据设置决定是否包含思考内容
|
|
||||||
thinkingContent: share.includeThinking ? msg.thinkingContent : null,
|
|
||||||
// 根据设置决定是否包含工具调用
|
|
||||||
toolCalls: share.includeToolCalls ? msg.toolCalls : null,
|
|
||||||
// 根据设置决定是否包含图片
|
|
||||||
images: share.includeImages ? msg.images : null,
|
|
||||||
searchImages: share.includeImages ? msg.searchImages : null,
|
|
||||||
uploadedImages: share.includeImages ? msg.uploadedImages : null,
|
|
||||||
// 使用的工具（简化显示）
|
|
||||||
usedTools: msg.usedTools,
|
|
||||||
// Token 统计
|
|
||||||
inputTokens: msg.inputTokens,
|
|
||||||
outputTokens: msg.outputTokens,
|
|
||||||
// 时间
|
|
||||||
createdAt: msg.createdAt,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// 更新查看次数（异步，不阻塞响应）
|
|
||||||
db.update(sharedConversations)
|
|
||||||
.set({
|
|
||||||
viewCount: (share.viewCount || 0) + 1,
|
|
||||||
updatedAt: new Date(),
|
|
||||||
})
|
|
||||||
.where(eq(sharedConversations.shareId, share.shareId))
|
|
||||||
.then(() => {})
|
|
||||||
.catch((err) => console.error('Update view count error:', err));
|
|
||||||
|
|
||||||
return NextResponse.json({
|
|
||||||
// 分享信息
|
|
||||||
share: {
|
|
||||||
title: share.title,
|
|
||||||
description: share.description,
|
|
||||||
viewCount: (share.viewCount || 0) + 1,
|
|
||||||
createdAt: share.createdAt,
|
|
||||||
},
|
|
||||||
// 对话信息
|
|
||||||
conversation: {
|
|
||||||
id: conversation.conversationId,
|
|
||||||
title: conversation.title,
|
|
||||||
model: conversation.model,
|
|
||||||
messageCount: filteredMessages.length, // 使用快照中的实际消息数量
|
|
||||||
totalTokens: conversation.totalTokens,
|
|
||||||
createdAt: conversation.createdAt,
|
|
||||||
},
|
|
||||||
// 消息列表
|
|
||||||
messages: filteredMessages,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Get shared content error:', error);
|
|
||||||
return NextResponse.json({ error: '获取分享内容失败' }, { status: 500 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -12,7 +12,6 @@ import { SaveToNoteModal } from '@/components/features/SaveToNoteModal';
|
|||||||
import { PromptOptimizer } from '@/components/features/PromptOptimizer';
|
import { PromptOptimizer } from '@/components/features/PromptOptimizer';
|
||||||
import { LinkPreviewModal } from '@/components/features/LinkPreviewModal';
|
import { LinkPreviewModal } from '@/components/features/LinkPreviewModal';
|
||||||
import { ExportDropdown } from '@/components/features/ExportDropdown';
|
import { ExportDropdown } from '@/components/features/ExportDropdown';
|
||||||
import { ShareModal } from '@/components/features/ShareModal';
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { useConversation, useConversations } from '@/hooks/useConversations';
|
import { useConversation, useConversations } from '@/hooks/useConversations';
|
||||||
import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat';
|
import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat';
|
||||||
@ -54,9 +53,6 @@ export default function ChatPage({ params }: PageProps) {
|
|||||||
const [linkPreviewOpen, setLinkPreviewOpen] = useState(false);
|
const [linkPreviewOpen, setLinkPreviewOpen] = useState(false);
|
||||||
const [linkPreviewUrl, setLinkPreviewUrl] = useState<string | null>(null);
|
const [linkPreviewUrl, setLinkPreviewUrl] = useState<string | null>(null);
|
||||||
|
|
||||||
// 分享弹窗状态
|
|
||||||
const [shareModalOpen, setShareModalOpen] = useState(false);
|
|
||||||
|
|
||||||
// 获取数据
|
// 获取数据
|
||||||
const { conversation, loading: conversationLoading, error: conversationError } = useConversation(chatId);
|
const { conversation, loading: conversationLoading, error: conversationError } = useConversation(chatId);
|
||||||
const { createConversation, updateConversation, deleteConversation } = useConversations();
|
const { createConversation, updateConversation, deleteConversation } = useConversations();
|
||||||
@ -502,7 +498,6 @@ export default function ChatPage({ params }: PageProps) {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setShareModalOpen(true)}
|
|
||||||
className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] rounded-lg transition-colors"
|
className="flex items-center gap-2 px-3 py-1.5 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)] rounded-lg transition-colors"
|
||||||
title="分享对话"
|
title="分享对话"
|
||||||
>
|
>
|
||||||
@ -651,16 +646,6 @@ export default function ChatPage({ params }: PageProps) {
|
|||||||
onClose={() => setLinkPreviewOpen(false)}
|
onClose={() => setLinkPreviewOpen(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 分享弹窗 */}
|
|
||||||
<ShareModal
|
|
||||||
isOpen={shareModalOpen}
|
|
||||||
onClose={() => setShareModalOpen(false)}
|
|
||||||
conversationId={chatId}
|
|
||||||
conversationTitle={conversation?.title || '新对话'}
|
|
||||||
messages={messages.map(m => ({ id: m.id, role: m.role, content: m.content }))}
|
|
||||||
onPreview={handleLinkClick}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 提示词优化工具浮动按钮 */}
|
{/* 提示词优化工具浮动按钮 */}
|
||||||
<PromptOptimizer onUsePrompt={setOptimizedPrompt} />
|
<PromptOptimizer onUsePrompt={setOptimizedPrompt} />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,394 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useEffect, use, useCallback, useRef } from 'react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import {
|
|
||||||
Loader2,
|
|
||||||
Eye,
|
|
||||||
MessageSquare,
|
|
||||||
Clock,
|
|
||||||
Sparkles,
|
|
||||||
AlertCircle,
|
|
||||||
Copy,
|
|
||||||
Check,
|
|
||||||
ExternalLink,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
import { MarkdownRenderer } from '@/components/markdown/MarkdownRenderer';
|
|
||||||
import { ShareNavigator } from '@/components/features/ShareNavigator';
|
|
||||||
|
|
||||||
interface PageProps {
|
|
||||||
params: Promise<{ code: string }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShareData {
|
|
||||||
share: {
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
viewCount: number;
|
|
||||||
createdAt: string;
|
|
||||||
};
|
|
||||||
conversation: {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
model: string;
|
|
||||||
messageCount: number;
|
|
||||||
totalTokens: number;
|
|
||||||
createdAt: string;
|
|
||||||
};
|
|
||||||
messages: Array<{
|
|
||||||
id: string;
|
|
||||||
role: string;
|
|
||||||
content: string;
|
|
||||||
thinkingContent?: string | null;
|
|
||||||
toolCalls?: unknown[] | null;
|
|
||||||
images?: string[] | null;
|
|
||||||
searchImages?: Array<{
|
|
||||||
title: string;
|
|
||||||
imageUrl: string;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
}> | null;
|
|
||||||
uploadedImages?: string[] | null;
|
|
||||||
usedTools?: string[] | null;
|
|
||||||
inputTokens?: number;
|
|
||||||
outputTokens?: number;
|
|
||||||
createdAt: string;
|
|
||||||
}>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 工具名称中文映射
|
|
||||||
const TOOL_NAMES: Record<string, string> = {
|
|
||||||
web_search: '网络搜索',
|
|
||||||
web_fetch: '网页读取',
|
|
||||||
mita_search: '秘塔搜索',
|
|
||||||
mita_reader: '秘塔阅读',
|
|
||||||
code_execution: '代码执行',
|
|
||||||
youdao_translate: '有道翻译',
|
|
||||||
image_search: '图片搜索',
|
|
||||||
video_search: '视频搜索',
|
|
||||||
};
|
|
||||||
|
|
||||||
// 格式化日期
|
|
||||||
function formatDate(dateString: string): string {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString('zh-CN', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SharePage({ params }: PageProps) {
|
|
||||||
const { code } = use(params);
|
|
||||||
const [data, setData] = useState<ShareData | null>(null);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [copied, setCopied] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchShare = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/share/${code}`);
|
|
||||||
if (!response.ok) {
|
|
||||||
const errData = await response.json();
|
|
||||||
throw new Error(errData.error || '加载失败');
|
|
||||||
}
|
|
||||||
const shareData = await response.json();
|
|
||||||
setData(shareData);
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : '加载失败');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
fetchShare();
|
|
||||||
}, [code]);
|
|
||||||
|
|
||||||
// 页面加载后处理 URL hash 定位
|
|
||||||
useEffect(() => {
|
|
||||||
if (!data || loading) return;
|
|
||||||
|
|
||||||
const hash = window.location.hash;
|
|
||||||
if (hash) {
|
|
||||||
// 支持 #msg-{id} 或 #msg-{index} 格式
|
|
||||||
const targetId = hash.slice(1); // 移除 #
|
|
||||||
const element = document.getElementById(targetId);
|
|
||||||
if (element) {
|
|
||||||
// 延迟滚动以确保页面渲染完成
|
|
||||||
setTimeout(() => {
|
|
||||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [data, loading]);
|
|
||||||
|
|
||||||
const handleCopyLink = async () => {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(window.location.href);
|
|
||||||
setCopied(true);
|
|
||||||
setTimeout(() => setCopied(false), 2000);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Copy error:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 加载中
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
||||||
<div className="flex flex-col items-center gap-3">
|
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-[#DB6639]" />
|
|
||||||
<span className="text-gray-500">加载中...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 错误
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
|
||||||
<div className="text-center">
|
|
||||||
<AlertCircle className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
||||||
<h1 className="text-xl font-medium text-gray-700 mb-2">{error}</h1>
|
|
||||||
<p className="text-gray-500 mb-6">此分享链接可能已失效或不存在</p>
|
|
||||||
<Link
|
|
||||||
href="/"
|
|
||||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#DB6639] text-white rounded-lg hover:bg-[#C25A33] transition-colors"
|
|
||||||
>
|
|
||||||
<Sparkles size={18} />
|
|
||||||
开始使用 LionCode
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!data) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-gray-50">
|
|
||||||
{/* 顶部导航 */}
|
|
||||||
<header className="sticky top-0 z-10 bg-white border-b border-gray-200">
|
|
||||||
<div className="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
|
|
||||||
<Link href="/" className="flex items-center gap-2">
|
|
||||||
<span className="font-semibold text-gray-800">LionCode</span>
|
|
||||||
</Link>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={handleCopyLink}
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg transition-colors',
|
|
||||||
copied
|
|
||||||
? 'bg-green-100 text-green-600'
|
|
||||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{copied ? <Check size={14} /> : <Copy size={14} />}
|
|
||||||
<span>{copied ? '已复制' : '复制链接'}</span>
|
|
||||||
</button>
|
|
||||||
<Link
|
|
||||||
href="/"
|
|
||||||
className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-[#DB6639] text-white rounded-lg hover:bg-[#C25A33] transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink size={14} />
|
|
||||||
<span>开始使用</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* 分享信息头部 */}
|
|
||||||
<div className="bg-gradient-to-r from-[#DB6639] to-[#E8845C] text-white">
|
|
||||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
|
||||||
<h1 className="text-2xl font-bold mb-3">{data.share.title}</h1>
|
|
||||||
{data.share.description && (
|
|
||||||
<p className="text-white/80 mb-4">{data.share.description}</p>
|
|
||||||
)}
|
|
||||||
<div className="flex flex-wrap items-center gap-4 text-sm text-white/70">
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Clock size={14} />
|
|
||||||
{formatDate(data.share.createdAt)}
|
|
||||||
</span>
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Eye size={14} />
|
|
||||||
{data.share.viewCount} 次查看
|
|
||||||
</span>
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<MessageSquare size={14} />
|
|
||||||
{data.conversation.messageCount} 条消息
|
|
||||||
</span>
|
|
||||||
<span className="px-2 py-0.5 bg-white/20 rounded text-xs">
|
|
||||||
{data.conversation.model}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 消息列表 */}
|
|
||||||
<main className="max-w-4xl mx-auto px-4 py-6">
|
|
||||||
<div className="space-y-4">
|
|
||||||
{data.messages.map((message, idx) => {
|
|
||||||
// 计算用户消息索引（用于目录导航）
|
|
||||||
const userMsgIndex = message.role === 'user'
|
|
||||||
? data.messages.slice(0, idx + 1).filter(m => m.role === 'user').length
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={message.id}
|
|
||||||
id={`msg-${message.id}`}
|
|
||||||
data-msg-index={userMsgIndex}
|
|
||||||
className={cn(
|
|
||||||
'rounded-lg overflow-hidden scroll-mt-20',
|
|
||||||
message.role === 'user'
|
|
||||||
? 'ml-12'
|
|
||||||
: 'bg-white border border-gray-200 shadow-sm'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{message.role === 'user' ? (
|
|
||||||
// 用户消息
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="flex-1 bg-gray-200 rounded-lg p-4">
|
|
||||||
{/* 用户上传的图片 */}
|
|
||||||
{message.uploadedImages && message.uploadedImages.length > 0 && (
|
|
||||||
<div className="grid grid-cols-3 gap-2 mb-3">
|
|
||||||
{message.uploadedImages.map((img, idx) => (
|
|
||||||
<img
|
|
||||||
key={idx}
|
|
||||||
src={img}
|
|
||||||
alt={`上传图片 ${idx + 1}`}
|
|
||||||
className="w-full h-24 object-cover rounded-lg"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="text-gray-800 whitespace-pre-wrap">
|
|
||||||
{message.content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-9 h-9 bg-[#DB6639] rounded-full flex items-center justify-center text-white text-sm font-medium flex-shrink-0">
|
|
||||||
U
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
// AI 消息
|
|
||||||
<div>
|
|
||||||
{/* 消息头部 */}
|
|
||||||
<div className="flex items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-100">
|
|
||||||
<div className="w-7 h-7 bg-[#DB6639] rounded-lg flex items-center justify-center">
|
|
||||||
<Sparkles size={14} className="text-white" />
|
|
||||||
</div>
|
|
||||||
<span className="font-medium text-gray-800 text-sm">LionCode AI</span>
|
|
||||||
{message.usedTools && message.usedTools.length > 0 && (
|
|
||||||
<div className="flex items-center gap-1.5 ml-2">
|
|
||||||
{message.usedTools.map((tool, idx) => (
|
|
||||||
<span
|
|
||||||
key={idx}
|
|
||||||
className="px-2 py-0.5 bg-orange-100 text-orange-700 text-xs rounded-full"
|
|
||||||
>
|
|
||||||
{TOOL_NAMES[tool] || tool}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 思考内容 */}
|
|
||||||
{message.thinkingContent && (
|
|
||||||
<details className="mx-4 mt-3 bg-orange-50 rounded-lg border border-orange-100">
|
|
||||||
<summary className="px-4 py-2 cursor-pointer text-sm font-medium text-orange-700 hover:bg-orange-100 rounded-lg">
|
|
||||||
💭 思考过程
|
|
||||||
</summary>
|
|
||||||
<div className="px-4 py-3 text-sm text-gray-600 whitespace-pre-wrap border-t border-orange-100">
|
|
||||||
{message.thinkingContent}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 消息内容 */}
|
|
||||||
<div className="px-4 py-4">
|
|
||||||
<MarkdownRenderer
|
|
||||||
content={message.content}
|
|
||||||
className="text-gray-700"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 代码执行图片 */}
|
|
||||||
{message.images && message.images.length > 0 && (
|
|
||||||
<div className="px-4 pb-4">
|
|
||||||
<div className="text-sm font-medium text-gray-600 mb-2">📊 代码执行结果</div>
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
{message.images.map((img, idx) => (
|
|
||||||
<img
|
|
||||||
key={idx}
|
|
||||||
src={img.startsWith('data:') ? img : `data:image/png;base64,${img}`}
|
|
||||||
alt={`图表 ${idx + 1}`}
|
|
||||||
className="w-full rounded-lg border border-gray-200"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 搜索图片 */}
|
|
||||||
{message.searchImages && message.searchImages.length > 0 && (
|
|
||||||
<div className="px-4 pb-4">
|
|
||||||
<div className="text-sm font-medium text-gray-600 mb-2">🖼️ 搜索结果图片</div>
|
|
||||||
<div className="grid grid-cols-4 gap-2">
|
|
||||||
{message.searchImages.slice(0, 8).map((img, idx) => (
|
|
||||||
<a
|
|
||||||
key={idx}
|
|
||||||
href={img.imageUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block rounded-lg overflow-hidden hover:opacity-80 transition-opacity"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={img.imageUrl}
|
|
||||||
alt={img.title || `图片 ${idx + 1}`}
|
|
||||||
className="w-full h-20 object-cover"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Token 统计 */}
|
|
||||||
{(message.inputTokens || message.outputTokens) && (
|
|
||||||
<div className="px-4 pb-3 text-xs text-gray-400">
|
|
||||||
Token: 输入 {message.inputTokens?.toLocaleString() || 0} / 输出 {message.outputTokens?.toLocaleString() || 0}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{/* 分享导航组件 */}
|
|
||||||
<ShareNavigator messages={data.messages} />
|
|
||||||
|
|
||||||
{/* 底部 */}
|
|
||||||
<footer className="bg-white border-t border-gray-200 mt-8">
|
|
||||||
<div className="max-w-4xl mx-auto px-4 py-8 text-center">
|
|
||||||
<div className="flex items-center justify-center gap-2 mb-3">
|
|
||||||
<span className="font-semibold text-gray-800">LionCode AI</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-500 text-sm mb-4">智能对话，助力创作</p>
|
|
||||||
<Link
|
|
||||||
href="/"
|
|
||||||
className="inline-flex items-center gap-2 px-6 py-2.5 bg-[#DB6639] text-white rounded-lg hover:bg-[#C25A33] transition-colors"
|
|
||||||
>
|
|
||||||
<Sparkles size={18} />
|
|
||||||
开始免费使用 LionCode
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,344 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
|
||||||
import { Search, Check } from 'lucide-react';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
// 消息接口
|
|
||||||
interface Message {
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant';
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 问答轮次接口
|
|
||||||
interface Round {
|
|
||||||
index: number;
|
|
||||||
userMessage: Message;
|
|
||||||
assistantMessage?: Message;
|
|
||||||
preview: string;
|
|
||||||
messageIds: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择模式
|
|
||||||
type SelectionMode = 'all' | 'recent_1' | 'recent_3' | 'recent_5' | 'custom';
|
|
||||||
|
|
||||||
interface MessageSelectorProps {
|
|
||||||
messages: Message[];
|
|
||||||
selectedMessageIds: string[] | null;
|
|
||||||
onSelectionChange: (messageIds: string[] | null) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function MessageSelector({
|
|
||||||
messages,
|
|
||||||
selectedMessageIds,
|
|
||||||
onSelectionChange,
|
|
||||||
}: MessageSelectorProps) {
|
|
||||||
const [selectionMode, setSelectionMode] = useState<SelectionMode>('all');
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
|
|
||||||
// 将消息按问答轮次分组
|
|
||||||
const rounds = useMemo(() => {
|
|
||||||
const result: Round[] = [];
|
|
||||||
let currentRound: Round | null = null;
|
|
||||||
|
|
||||||
messages.forEach((msg) => {
|
|
||||||
if (msg.role === 'user') {
|
|
||||||
if (currentRound) {
|
|
||||||
result.push(currentRound);
|
|
||||||
}
|
|
||||||
currentRound = {
|
|
||||||
index: result.length + 1,
|
|
||||||
userMessage: msg,
|
|
||||||
preview: msg.content.slice(0, 50) + (msg.content.length > 50 ? '...' : ''),
|
|
||||||
messageIds: [msg.id],
|
|
||||||
};
|
|
||||||
} else if (msg.role === 'assistant' && currentRound) {
|
|
||||||
currentRound.assistantMessage = msg;
|
|
||||||
currentRound.messageIds.push(msg.id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (currentRound) {
|
|
||||||
result.push(currentRound);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}, [messages]);
|
|
||||||
|
|
||||||
// 根据消息数量生成选项
|
|
||||||
const modeOptions = useMemo(() => {
|
|
||||||
const options: { value: SelectionMode; label: string }[] = [
|
|
||||||
{ value: 'all', label: '全部对话' },
|
|
||||||
];
|
|
||||||
|
|
||||||
if (rounds.length > 1) {
|
|
||||||
options.push({ value: 'recent_1', label: '最近 1 轮' });
|
|
||||||
}
|
|
||||||
if (rounds.length > 3) {
|
|
||||||
options.push({ value: 'recent_3', label: '最近 3 轮' });
|
|
||||||
}
|
|
||||||
if (rounds.length > 5) {
|
|
||||||
options.push({ value: 'recent_5', label: '最近 5 轮' });
|
|
||||||
}
|
|
||||||
if (rounds.length > 1) {
|
|
||||||
options.push({ value: 'custom', label: '自定义选择' });
|
|
||||||
}
|
|
||||||
|
|
||||||
return options;
|
|
||||||
}, [rounds.length]);
|
|
||||||
|
|
||||||
// 根据选择模式获取选中的消息ID
|
|
||||||
const getMessageIdsByMode = useCallback(
|
|
||||||
(mode: SelectionMode): string[] | null => {
|
|
||||||
if (mode === 'all') return null;
|
|
||||||
if (mode === 'custom') return selectedMessageIds;
|
|
||||||
|
|
||||||
const recentCount = parseInt(mode.replace('recent_', ''));
|
|
||||||
const recentRounds = rounds.slice(-recentCount);
|
|
||||||
return recentRounds.flatMap((r) => r.messageIds);
|
|
||||||
},
|
|
||||||
[rounds, selectedMessageIds]
|
|
||||||
);
|
|
||||||
|
|
||||||
// 处理模式变化
|
|
||||||
const handleModeChange = (mode: SelectionMode) => {
|
|
||||||
setSelectionMode(mode);
|
|
||||||
if (mode === 'custom') {
|
|
||||||
if (selectedMessageIds === null) {
|
|
||||||
onSelectionChange(messages.map((m) => m.id));
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
onSelectionChange(getMessageIdsByMode(mode));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 当前选中的轮次
|
|
||||||
const selectedRoundIndices = useMemo(() => {
|
|
||||||
if (selectedMessageIds === null) return new Set(rounds.map((r) => r.index));
|
|
||||||
return new Set(
|
|
||||||
rounds
|
|
||||||
.filter((r) => r.messageIds.some((id) => selectedMessageIds.includes(id)))
|
|
||||||
.map((r) => r.index)
|
|
||||||
);
|
|
||||||
}, [rounds, selectedMessageIds]);
|
|
||||||
|
|
||||||
// 切换轮次选择
|
|
||||||
const toggleRound = (round: Round) => {
|
|
||||||
if (selectionMode !== 'custom') return;
|
|
||||||
|
|
||||||
if (selectedMessageIds === null) {
|
|
||||||
const allIds = messages.map((m) => m.id);
|
|
||||||
const newIds = allIds.filter((id) => !round.messageIds.includes(id));
|
|
||||||
onSelectionChange(newIds);
|
|
||||||
} else {
|
|
||||||
const isSelected = round.messageIds.some((id) => selectedMessageIds.includes(id));
|
|
||||||
if (isSelected) {
|
|
||||||
const newIds = selectedMessageIds.filter((id) => !round.messageIds.includes(id));
|
|
||||||
onSelectionChange(newIds.length > 0 ? newIds : []);
|
|
||||||
} else {
|
|
||||||
onSelectionChange([...selectedMessageIds, ...round.messageIds]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 快捷操作
|
|
||||||
const handleSelectAll = () => {
|
|
||||||
onSelectionChange(messages.map((m) => m.id));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectNone = () => {
|
|
||||||
onSelectionChange([]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectInverse = () => {
|
|
||||||
if (selectedMessageIds === null) {
|
|
||||||
onSelectionChange([]);
|
|
||||||
} else {
|
|
||||||
const allIds = messages.map((m) => m.id);
|
|
||||||
const inverseIds = allIds.filter((id) => !selectedMessageIds.includes(id));
|
|
||||||
onSelectionChange(inverseIds);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 搜索过滤
|
|
||||||
const filteredRounds = useMemo(() => {
|
|
||||||
if (!searchQuery.trim()) return rounds;
|
|
||||||
const query = searchQuery.toLowerCase();
|
|
||||||
return rounds.filter(
|
|
||||||
(round) =>
|
|
||||||
round.userMessage.content.toLowerCase().includes(query) ||
|
|
||||||
round.assistantMessage?.content.toLowerCase().includes(query)
|
|
||||||
);
|
|
||||||
}, [rounds, searchQuery]);
|
|
||||||
|
|
||||||
// 计算选中数量
|
|
||||||
const selectedCount = useMemo(() => {
|
|
||||||
if (selectedMessageIds === null) return rounds.length;
|
|
||||||
return rounds.filter((r) => r.messageIds.some((id) => selectedMessageIds.includes(id))).length;
|
|
||||||
}, [rounds, selectedMessageIds]);
|
|
||||||
|
|
||||||
// 如果只有一轮对话，不显示选择器
|
|
||||||
if (rounds.length <= 1) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isCustomMode = selectionMode === 'custom';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* 标题行 */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className="text-sm font-medium text-[var(--color-text-secondary)]">
|
|
||||||
选择分享范围
|
|
||||||
</label>
|
|
||||||
<span className="text-xs text-[var(--color-text-tertiary)]">
|
|
||||||
共 {rounds.length} 轮对话
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 左右分栏布局 */}
|
|
||||||
<div className="flex gap-3 border border-[var(--color-border)] rounded-lg overflow-hidden">
|
|
||||||
{/* 左侧：选择模式 */}
|
|
||||||
<div className="w-[140px] flex-shrink-0 bg-[var(--color-bg-secondary)] border-r border-[var(--color-border)] p-2 space-y-1">
|
|
||||||
{modeOptions.map((option) => (
|
|
||||||
<label
|
|
||||||
key={option.value}
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer transition-all text-sm',
|
|
||||||
selectionMode === option.value
|
|
||||||
? 'bg-[var(--color-primary)] text-white'
|
|
||||||
: 'text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="selectionMode"
|
|
||||||
value={option.value}
|
|
||||||
checked={selectionMode === option.value}
|
|
||||||
onChange={() => handleModeChange(option.value)}
|
|
||||||
className="sr-only"
|
|
||||||
/>
|
|
||||||
<span className="truncate">{option.label}</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 右侧：消息列表 */}
|
|
||||||
<div className="flex-1 flex flex-col min-w-0">
|
|
||||||
{/* 搜索框和快捷操作 */}
|
|
||||||
<div className="flex items-center gap-2 p-2 border-b border-[var(--color-border)]">
|
|
||||||
<div className="relative flex-1">
|
|
||||||
<Search
|
|
||||||
size={14}
|
|
||||||
className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)]"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="搜索消息..."
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
|
||||||
className="w-full pl-8 pr-3 py-1.5 text-xs bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-md text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:border-[var(--color-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{isCustomMode && (
|
|
||||||
<div className="flex items-center gap-1 text-xs flex-shrink-0">
|
|
||||||
<button
|
|
||||||
onClick={handleSelectAll}
|
|
||||||
className="px-2 py-1 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors"
|
|
||||||
>
|
|
||||||
全选
|
|
||||||
</button>
|
|
||||||
<span className="text-[var(--color-border)]">|</span>
|
|
||||||
<button
|
|
||||||
onClick={handleSelectNone}
|
|
||||||
className="px-2 py-1 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors"
|
|
||||||
>
|
|
||||||
全不选
|
|
||||||
</button>
|
|
||||||
<span className="text-[var(--color-border)]">|</span>
|
|
||||||
<button
|
|
||||||
onClick={handleSelectInverse}
|
|
||||||
className="px-2 py-1 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors"
|
|
||||||
>
|
|
||||||
反选
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 消息列表 */}
|
|
||||||
<div className="flex-1 overflow-y-auto max-h-[180px]">
|
|
||||||
{filteredRounds.length === 0 ? (
|
|
||||||
<div className="px-3 py-6 text-center text-xs text-[var(--color-text-tertiary)]">
|
|
||||||
没有找到匹配的消息
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
filteredRounds.map((round) => {
|
|
||||||
const isSelected = selectedRoundIndices.has(round.index);
|
|
||||||
const canToggle = isCustomMode;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={round.index}
|
|
||||||
onClick={() => canToggle && toggleRound(round)}
|
|
||||||
className={cn(
|
|
||||||
'flex items-center gap-2 px-3 py-2.5 border-b border-[var(--color-border)] last:border-b-0 transition-colors',
|
|
||||||
canToggle ? 'cursor-pointer hover:bg-[var(--color-bg-hover)]' : '',
|
|
||||||
isSelected && 'bg-[var(--color-primary)]/5'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{/* 复选框 */}
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
'flex-shrink-0 w-4 h-4 rounded border flex items-center justify-center transition-colors',
|
|
||||||
isSelected
|
|
||||||
? 'bg-[var(--color-primary)] border-[var(--color-primary)]'
|
|
||||||
: 'border-[var(--color-border)]',
|
|
||||||
!canToggle && 'opacity-60'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isSelected && <Check size={10} className="text-white" />}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 序号 */}
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'flex-shrink-0 w-5 h-5 rounded-full text-xs flex items-center justify-center',
|
|
||||||
isSelected
|
|
||||||
? 'bg-[var(--color-primary)]/20 text-[var(--color-primary)]'
|
|
||||||
: 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)]'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{round.index}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* 内容预览 */}
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'flex-1 text-sm truncate',
|
|
||||||
isSelected
|
|
||||||
? 'text-[var(--color-text-primary)]'
|
|
||||||
: 'text-[var(--color-text-secondary)]'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{round.preview}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 底部统计 */}
|
|
||||||
<div className="flex items-center justify-between px-3 py-2 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border)] text-xs text-[var(--color-text-tertiary)]">
|
|
||||||
<span>已选 {selectedCount}/{rounds.length} 轮</span>
|
|
||||||
{isCustomMode && selectedCount === 0 && (
|
|
||||||
<span className="text-amber-600">请至少选择一轮</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,467 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useEffect, useRef } from 'react';
|
|
||||||
import {
|
|
||||||
X,
|
|
||||||
Link2,
|
|
||||||
Copy,
|
|
||||||
Check,
|
|
||||||
Loader2,
|
|
||||||
Eye,
|
|
||||||
MessageSquare,
|
|
||||||
Wrench,
|
|
||||||
ImageIcon,
|
|
||||||
QrCode,
|
|
||||||
ExternalLink,
|
|
||||||
Trash2,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
import { QRCodeSVG } from 'qrcode.react';
|
|
||||||
import { MessageSelector } from './MessageSelector';
|
|
||||||
|
|
||||||
// 消息接口
|
|
||||||
interface MessageForShare {
|
|
||||||
id: string;
|
|
||||||
role: 'user' | 'assistant';
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShareModalProps {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
conversationId: string;
|
|
||||||
conversationTitle: string;
|
|
||||||
messages?: MessageForShare[];
|
|
||||||
onPreview?: (url: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShareInfo {
|
|
||||||
shareId: string;
|
|
||||||
shareCode: string;
|
|
||||||
shareUrl: string;
|
|
||||||
title: string;
|
|
||||||
viewCount?: number;
|
|
||||||
createdAt?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ShareModal({
|
|
||||||
isOpen,
|
|
||||||
onClose,
|
|
||||||
conversationId,
|
|
||||||
conversationTitle,
|
|
||||||
messages = [],
|
|
||||||
onPreview,
|
|
||||||
}: ShareModalProps) {
|
|
||||||
// 表单状态
|
|
||||||
const [title, setTitle] = useState(conversationTitle);
|
|
||||||
const [includeThinking, setIncludeThinking] = useState(true);
|
|
||||||
const [includeToolCalls, setIncludeToolCalls] = useState(false);
|
|
||||||
const [includeImages, setIncludeImages] = useState(true);
|
|
||||||
const [selectedMessageIds, setSelectedMessageIds] = useState<string[] | null>(null); // null 表示全部
|
|
||||||
|
|
||||||
// UI 状态
|
|
||||||
const [isCreating, setIsCreating] = useState(false);
|
|
||||||
const [shareInfo, setShareInfo] = useState<ShareInfo | null>(null);
|
|
||||||
const [copied, setCopied] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [showQrCode, setShowQrCode] = useState(false);
|
|
||||||
|
|
||||||
// 已有分享列表
|
|
||||||
const [existingShares, setExistingShares] = useState<ShareInfo[]>([]);
|
|
||||||
const [loadingShares, setLoadingShares] = useState(false);
|
|
||||||
|
|
||||||
const modalRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
// 重置状态
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen) {
|
|
||||||
setTitle(conversationTitle);
|
|
||||||
setShareInfo(null);
|
|
||||||
setError(null);
|
|
||||||
setCopied(false);
|
|
||||||
setShowQrCode(false);
|
|
||||||
setSelectedMessageIds(null); // 重置为全部
|
|
||||||
loadExistingShares();
|
|
||||||
}
|
|
||||||
}, [isOpen, conversationTitle]);
|
|
||||||
|
|
||||||
// 点击外部关闭
|
|
||||||
useEffect(() => {
|
|
||||||
const handleClickOutside = (event: MouseEvent) => {
|
|
||||||
if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (isOpen) {
|
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
};
|
|
||||||
}, [isOpen, onClose]);
|
|
||||||
|
|
||||||
// ESC 关闭
|
|
||||||
useEffect(() => {
|
|
||||||
const handleEsc = (event: KeyboardEvent) => {
|
|
||||||
if (event.key === 'Escape') {
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (isOpen) {
|
|
||||||
document.addEventListener('keydown', handleEsc);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('keydown', handleEsc);
|
|
||||||
};
|
|
||||||
}, [isOpen, onClose]);
|
|
||||||
|
|
||||||
// 加载已有分享
|
|
||||||
const loadExistingShares = async () => {
|
|
||||||
try {
|
|
||||||
setLoadingShares(true);
|
|
||||||
const response = await fetch(`/api/conversations/${conversationId}/share`);
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
setExistingShares(data.shares || []);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Load shares error:', err);
|
|
||||||
} finally {
|
|
||||||
setLoadingShares(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 创建分享
|
|
||||||
const handleCreateShare = async () => {
|
|
||||||
// 验证：自定义选择时必须至少选择一条消息
|
|
||||||
if (selectedMessageIds !== null && selectedMessageIds.length === 0) {
|
|
||||||
setError('请至少选择一轮对话进行分享');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
setIsCreating(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
const response = await fetch(`/api/conversations/${conversationId}/share`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
title,
|
|
||||||
includeThinking,
|
|
||||||
includeToolCalls,
|
|
||||||
includeImages,
|
|
||||||
selectedMessageIds, // 新增：选择的消息ID，null 表示全部
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
throw new Error(data.error || '创建分享失败');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
setShareInfo(data);
|
|
||||||
loadExistingShares();
|
|
||||||
} catch (err) {
|
|
||||||
setError(err instanceof Error ? err.message : '创建分享失败');
|
|
||||||
} finally {
|
|
||||||
setIsCreating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 复制链接
|
|
||||||
const handleCopy = async () => {
|
|
||||||
if (!shareInfo?.shareUrl) return;
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(shareInfo.shareUrl);
|
|
||||||
setCopied(true);
|
|
||||||
setTimeout(() => setCopied(false), 2000);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Copy error:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除分享
|
|
||||||
const handleDeleteShare = async (shareId: string) => {
|
|
||||||
if (!confirm('确定要删除此分享吗？')) return;
|
|
||||||
try {
|
|
||||||
const response = await fetch(
|
|
||||||
`/api/conversations/${conversationId}/share?shareId=${shareId}`,
|
|
||||||
{ method: 'DELETE' }
|
|
||||||
);
|
|
||||||
if (response.ok) {
|
|
||||||
setExistingShares((prev) => prev.filter((s) => s.shareId !== shareId));
|
|
||||||
if (shareInfo?.shareId === shareId) {
|
|
||||||
setShareInfo(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Delete share error:', err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isOpen) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
|
||||||
<div
|
|
||||||
ref={modalRef}
|
|
||||||
className="relative w-full max-w-2xl bg-[var(--color-bg-primary)] rounded-[4px] shadow-xl"
|
|
||||||
>
|
|
||||||
{/* 头部 */}
|
|
||||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--color-border)]">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Link2 size={20} className="text-[var(--color-primary)]" />
|
|
||||||
<h2 className="text-base font-medium text-[var(--color-text-primary)]">
|
|
||||||
分享对话
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
className="p-1 text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors"
|
|
||||||
>
|
|
||||||
<X size={18} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 内容 */}
|
|
||||||
<div className="p-5">
|
|
||||||
{shareInfo ? (
|
|
||||||
// 分享成功后显示链接
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center gap-2 text-green-600">
|
|
||||||
<Check size={20} />
|
|
||||||
<span className="font-medium">分享链接已生成</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 链接复制区域 */}
|
|
||||||
<div className="flex items-center gap-2 p-3 bg-[var(--color-bg-secondary)] rounded-lg">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={shareInfo.shareUrl}
|
|
||||||
readOnly
|
|
||||||
className="flex-1 bg-transparent text-sm text-[var(--color-text-primary)] outline-none"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={handleCopy}
|
|
||||||
className={cn(
|
|
||||||
'p-2 rounded transition-colors',
|
|
||||||
copied
|
|
||||||
? 'bg-green-100 text-green-600'
|
|
||||||
: 'hover:bg-[var(--color-bg-hover)] text-[var(--color-text-secondary)]'
|
|
||||||
)}
|
|
||||||
title="复制链接"
|
|
||||||
>
|
|
||||||
{copied ? <Check size={16} /> : <Copy size={16} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 二维码 */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<button
|
|
||||||
onClick={() => setShowQrCode(!showQrCode)}
|
|
||||||
className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
|
|
||||||
>
|
|
||||||
<QrCode size={16} />
|
|
||||||
<span>{showQrCode ? '隐藏二维码' : '显示二维码'}</span>
|
|
||||||
</button>
|
|
||||||
{showQrCode && (
|
|
||||||
<div className="flex justify-center p-4 bg-white rounded-lg">
|
|
||||||
<QRCodeSVG
|
|
||||||
value={shareInfo.shareUrl}
|
|
||||||
size={160}
|
|
||||||
level="M"
|
|
||||||
includeMargin
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 操作按钮 */}
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
if (onPreview && shareInfo.shareUrl) {
|
|
||||||
onClose();
|
|
||||||
onPreview(shareInfo.shareUrl);
|
|
||||||
} else {
|
|
||||||
window.open(shareInfo.shareUrl, '_blank');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors"
|
|
||||||
>
|
|
||||||
<ExternalLink size={16} />
|
|
||||||
<span>打开预览</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setShareInfo(null)}
|
|
||||||
className="px-4 py-2.5 text-[var(--color-text-secondary)] bg-[var(--color-bg-secondary)] rounded-lg hover:bg-[var(--color-bg-hover)] transition-colors"
|
|
||||||
>
|
|
||||||
创建新分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
// 创建分享表单
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* 标题 */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-1.5">
|
|
||||||
分享标题
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={title}
|
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
|
||||||
placeholder="输入分享标题"
|
|
||||||
className="w-full px-3 py-2.5 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:border-[var(--color-primary)]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 消息选择器 */}
|
|
||||||
{messages.length > 0 && (
|
|
||||||
<MessageSelector
|
|
||||||
messages={messages}
|
|
||||||
selectedMessageIds={selectedMessageIds}
|
|
||||||
onSelectionChange={setSelectedMessageIds}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 内容选项 - 横向布局 */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2">
|
|
||||||
分享设置
|
|
||||||
</label>
|
|
||||||
<div className="grid grid-cols-3 gap-2">
|
|
||||||
<label className="flex items-center gap-2 px-3 py-2.5 bg-[var(--color-bg-secondary)] rounded-lg cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={includeThinking}
|
|
||||||
onChange={(e) => setIncludeThinking(e.target.checked)}
|
|
||||||
className="w-4 h-4 rounded border-[var(--color-border)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
||||||
/>
|
|
||||||
<MessageSquare size={14} className="text-[var(--color-text-tertiary)] flex-shrink-0" />
|
|
||||||
<span className="text-xs text-[var(--color-text-primary)]">思考过程</span>
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center gap-2 px-3 py-2.5 bg-[var(--color-bg-secondary)] rounded-lg cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={includeToolCalls}
|
|
||||||
onChange={(e) => setIncludeToolCalls(e.target.checked)}
|
|
||||||
className="w-4 h-4 rounded border-[var(--color-border)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
||||||
/>
|
|
||||||
<Wrench size={14} className="text-[var(--color-text-tertiary)] flex-shrink-0" />
|
|
||||||
<span className="text-xs text-[var(--color-text-primary)]">工具调用</span>
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center gap-2 px-3 py-2.5 bg-[var(--color-bg-secondary)] rounded-lg cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={includeImages}
|
|
||||||
onChange={(e) => setIncludeImages(e.target.checked)}
|
|
||||||
className="w-4 h-4 rounded border-[var(--color-border)] text-[var(--color-primary)] focus:ring-[var(--color-primary)]"
|
|
||||||
/>
|
|
||||||
<ImageIcon size={14} className="text-[var(--color-text-tertiary)] flex-shrink-0" />
|
|
||||||
<span className="text-xs text-[var(--color-text-primary)]">包含图片</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 错误提示 */}
|
|
||||||
{error && (
|
|
||||||
<div className="p-3 text-sm text-red-600 bg-red-50 rounded-lg">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 创建按钮 */}
|
|
||||||
<button
|
|
||||||
onClick={handleCreateShare}
|
|
||||||
disabled={isCreating || !title.trim()}
|
|
||||||
className={cn(
|
|
||||||
'w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg transition-colors',
|
|
||||||
isCreating || !title.trim()
|
|
||||||
? 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] cursor-not-allowed'
|
|
||||||
: 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isCreating ? (
|
|
||||||
<>
|
|
||||||
<Loader2 size={16} className="animate-spin" />
|
|
||||||
<span>生成中...</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Link2 size={16} />
|
|
||||||
<span>生成分享链接</span>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 已有分享列表 */}
|
|
||||||
{existingShares.length > 0 && !shareInfo && (
|
|
||||||
<div className="mt-6 pt-4 border-t border-[var(--color-border)]">
|
|
||||||
<h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">
|
|
||||||
已有分享 ({existingShares.length})
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2 max-h-[200px] overflow-y-auto">
|
|
||||||
{existingShares.map((share) => (
|
|
||||||
<div
|
|
||||||
key={share.shareId}
|
|
||||||
className="flex items-center justify-between p-3 bg-[var(--color-bg-secondary)] rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="text-sm font-medium text-[var(--color-text-primary)] truncate">
|
|
||||||
{share.title}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3 mt-1 text-xs text-[var(--color-text-tertiary)]">
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Eye size={12} />
|
|
||||||
{share.viewCount || 0} 次查看
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(share.shareUrl);
|
|
||||||
}}
|
|
||||||
className="p-1.5 text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors"
|
|
||||||
title="复制链接"
|
|
||||||
>
|
|
||||||
<Copy size={14} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
if (onPreview) {
|
|
||||||
onClose();
|
|
||||||
onPreview(share.shareUrl);
|
|
||||||
} else {
|
|
||||||
window.open(share.shareUrl, '_blank');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="p-1.5 text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] rounded transition-colors"
|
|
||||||
title="打开"
|
|
||||||
>
|
|
||||||
<ExternalLink size={14} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleDeleteShare(share.shareId)}
|
|
||||||
className="p-1.5 text-red-500 hover:bg-red-50 rounded transition-colors"
|
|
||||||
title="删除"
|
|
||||||
>
|
|
||||||
<Trash2 size={14} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
|
||||||
import { List, ChevronUp, X } from 'lucide-react';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
interface MessageAnchor {
|
|
||||||
id: string;
|
|
||||||
index: number;
|
|
||||||
preview: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ShareNavigatorProps {
|
|
||||||
messages: Array<{
|
|
||||||
id: string;
|
|
||||||
role: string;
|
|
||||||
content: string;
|
|
||||||
}>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ShareNavigator({ messages }: ShareNavigatorProps) {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const [showBackTop, setShowBackTop] = useState(false);
|
|
||||||
const [activeIndex, setActiveIndex] = useState<number | null>(null);
|
|
||||||
|
|
||||||
// 提取用户消息作为目录项
|
|
||||||
const userMessages: MessageAnchor[] = messages
|
|
||||||
.filter((msg) => msg.role === 'user')
|
|
||||||
.map((msg, idx) => ({
|
|
||||||
id: msg.id,
|
|
||||||
index: idx + 1,
|
|
||||||
preview: msg.content.slice(0, 30) + (msg.content.length > 30 ? '...' : ''),
|
|
||||||
}));
|
|
||||||
|
|
||||||
// 监听滚动，显示/隐藏回到顶部按钮
|
|
||||||
useEffect(() => {
|
|
||||||
const handleScroll = () => {
|
|
||||||
setShowBackTop(window.scrollY > 500);
|
|
||||||
|
|
||||||
// 更新当前可视消息
|
|
||||||
const messageElements = document.querySelectorAll('[data-msg-index]');
|
|
||||||
let currentIndex: number | null = null;
|
|
||||||
|
|
||||||
messageElements.forEach((el) => {
|
|
||||||
const rect = el.getBoundingClientRect();
|
|
||||||
if (rect.top <= 200 && rect.bottom > 0) {
|
|
||||||
currentIndex = parseInt(el.getAttribute('data-msg-index') || '0');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
setActiveIndex(currentIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('scroll', handleScroll);
|
|
||||||
handleScroll(); // 初始化
|
|
||||||
|
|
||||||
return () => window.removeEventListener('scroll', handleScroll);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 跳转到指定消息
|
|
||||||
const scrollToMessage = useCallback((id: string, index: number) => {
|
|
||||||
const element = document.getElementById(`msg-${id}`);
|
|
||||||
if (element) {
|
|
||||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
// 更新 URL hash
|
|
||||||
window.history.replaceState(null, '', `#msg-${index}`);
|
|
||||||
}
|
|
||||||
setIsOpen(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 回到顶部
|
|
||||||
const scrollToTop = useCallback(() => {
|
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
||||||
window.history.replaceState(null, '', window.location.pathname);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 如果用户消息少于 2 条，不显示导航
|
|
||||||
if (userMessages.length < 2) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* 浮动导航按钮组 */}
|
|
||||||
<div className="fixed right-6 bottom-6 z-50 flex flex-col items-end gap-3">
|
|
||||||
{/* 回到顶部按钮 */}
|
|
||||||
{showBackTop && (
|
|
||||||
<button
|
|
||||||
onClick={scrollToTop}
|
|
||||||
className="w-10 h-10 bg-white border border-gray-200 rounded-full shadow-lg flex items-center justify-center text-gray-600 hover:bg-gray-50 hover:text-[#DB6639] transition-all"
|
|
||||||
title="回到顶部"
|
|
||||||
>
|
|
||||||
<ChevronUp size={20} />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 目录按钮 */}
|
|
||||||
<button
|
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
|
||||||
className={cn(
|
|
||||||
'w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all',
|
|
||||||
isOpen
|
|
||||||
? 'bg-[#DB6639] text-white'
|
|
||||||
: 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 hover:text-[#DB6639]'
|
|
||||||
)}
|
|
||||||
title="消息目录"
|
|
||||||
>
|
|
||||||
{isOpen ? <X size={20} /> : <List size={20} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 目录面板 */}
|
|
||||||
{isOpen && (
|
|
||||||
<>
|
|
||||||
{/* 背景遮罩 */}
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 z-40"
|
|
||||||
onClick={() => setIsOpen(false)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 目录内容 */}
|
|
||||||
<div className="fixed right-6 bottom-20 z-50 w-72 max-h-[60vh] bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden">
|
|
||||||
{/* 头部 */}
|
|
||||||
<div className="px-4 py-3 border-b border-gray-100 bg-gray-50">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm font-medium text-gray-700">
|
|
||||||
消息目录
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{userMessages.length} 条问题
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 目录列表 */}
|
|
||||||
<div className="overflow-y-auto max-h-[calc(60vh-48px)]">
|
|
||||||
{userMessages.map((msg) => (
|
|
||||||
<button
|
|
||||||
key={msg.id}
|
|
||||||
onClick={() => scrollToMessage(msg.id, msg.index)}
|
|
||||||
className={cn(
|
|
||||||
'w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors border-b border-gray-50 last:border-b-0',
|
|
||||||
activeIndex === msg.index && 'bg-orange-50 border-l-2 border-l-[#DB6639]'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'flex-shrink-0 w-5 h-5 rounded-full text-xs flex items-center justify-center mt-0.5',
|
|
||||||
activeIndex === msg.index
|
|
||||||
? 'bg-[#DB6639] text-white'
|
|
||||||
: 'bg-gray-200 text-gray-600'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{msg.index}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
'text-sm leading-relaxed',
|
|
||||||
activeIndex === msg.index
|
|
||||||
? 'text-[#DB6639] font-medium'
|
|
||||||
: 'text-gray-700'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{msg.preview}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -88,8 +88,9 @@ export function CodeBlock({
|
|||||||
// 规范化语言名称
|
// 规范化语言名称
|
||||||
const normalizedLanguage = languageAliases[language.toLowerCase()] || language.toLowerCase();
|
const normalizedLanguage = languageAliases[language.toLowerCase()] || language.toLowerCase();
|
||||||
|
|
||||||
// 判断是否支持 HTML 预览（仅 html/htm，不包括 xml/svg）
|
// 判断是否支持 HTML 预览
|
||||||
const isHtmlPreviewable = ['html', 'htm'].includes(language.toLowerCase());
|
const isHtmlPreviewable = ['html', 'htm', 'markup'].includes(normalizedLanguage) ||
|
||||||
|
['html', 'htm'].includes(language.toLowerCase());
|
||||||
|
|
||||||
// 判断是否可执行：语言支持 + 代码满足执行条件
|
// 判断是否可执行：语言支持 + 代码满足执行条件
|
||||||
const canRun = isRunnableLanguage(language) && isCodeExecutable(code, language);
|
const canRun = isRunnableLanguage(language) && isCodeExecutable(code, language);
|
||||||
|
|||||||
@ -1,18 +0,0 @@
|
|||||||
CREATE TABLE "shared_conversations" (
|
|
||||||
"id" serial PRIMARY KEY NOT NULL,
|
|
||||||
"share_id" varchar(64) NOT NULL,
|
|
||||||
"conversation_id" varchar(64) NOT NULL,
|
|
||||||
"user_id" varchar(64) NOT NULL,
|
|
||||||
"share_code" varchar(12) NOT NULL,
|
|
||||||
"title" varchar(255),
|
|
||||||
"description" text,
|
|
||||||
"include_thinking" boolean DEFAULT true,
|
|
||||||
"include_tool_calls" boolean DEFAULT false,
|
|
||||||
"include_images" boolean DEFAULT true,
|
|
||||||
"view_count" integer DEFAULT 0,
|
|
||||||
"is_active" boolean DEFAULT true,
|
|
||||||
"created_at" timestamp with time zone DEFAULT now(),
|
|
||||||
"updated_at" timestamp with time zone DEFAULT now(),
|
|
||||||
CONSTRAINT "shared_conversations_share_id_unique" UNIQUE("share_id"),
|
|
||||||
CONSTRAINT "shared_conversations_share_code_unique" UNIQUE("share_code")
|
|
||||||
);
|
|
||||||
@ -1 +0,0 @@
|
|||||||
ALTER TABLE "shared_conversations" ADD COLUMN "snapshot_at" timestamp with time zone;
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -92,20 +92,6 @@
|
|||||||
"when": 1766339459689,
|
"when": 1766339459689,
|
||||||
"tag": "0012_flippant_marvel_apes",
|
"tag": "0012_flippant_marvel_apes",
|
||||||
"breakpoints": true
|
"breakpoints": true
|
||||||
},
|
|
||||||
{
|
|
||||||
"idx": 13,
|
|
||||||
"version": "7",
|
|
||||||
"when": 1766540812748,
|
|
||||||
"tag": "0013_charming_natasha_romanoff",
|
|
||||||
"breakpoints": true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"idx": 14,
|
|
||||||
"version": "7",
|
|
||||||
"when": 1766546111189,
|
|
||||||
"tag": "0014_naive_kronos",
|
|
||||||
"breakpoints": true
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -313,40 +313,6 @@ export const promptOptimizations = pgTable('prompt_optimizations', {
|
|||||||
createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),
|
createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),
|
||||||
});
|
});
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// 对话分享表
|
|
||||||
// ============================================
|
|
||||||
export const sharedConversations = pgTable('shared_conversations', {
|
|
||||||
id: serial('id').primaryKey(),
|
|
||||||
// 分享唯一标识
|
|
||||||
shareId: varchar('share_id', { length: 64 }).notNull().unique(),
|
|
||||||
// 关联对话
|
|
||||||
conversationId: varchar('conversation_id', { length: 64 }).notNull(),
|
|
||||||
// 分享创建者
|
|
||||||
userId: varchar('user_id', { length: 64 }).notNull(),
|
|
||||||
// 短链接码（用于分享 URL）
|
|
||||||
shareCode: varchar('share_code', { length: 12 }).notNull().unique(),
|
|
||||||
// 分享标题（可自定义）
|
|
||||||
title: varchar('title', { length: 255 }),
|
|
||||||
// 分享描述
|
|
||||||
description: text('description'),
|
|
||||||
// 内容控制
|
|
||||||
includeThinking: boolean('include_thinking').default(true),
|
|
||||||
includeToolCalls: boolean('include_tool_calls').default(false),
|
|
||||||
includeImages: boolean('include_images').default(true),
|
|
||||||
// 统计信息
|
|
||||||
viewCount: integer('view_count').default(0),
|
|
||||||
// 状态
|
|
||||||
isActive: boolean('is_active').default(true),
|
|
||||||
// 快照时间点（只显示此时间之前的消息）
|
|
||||||
snapshotAt: timestamp('snapshot_at', { withTimezone: true }),
|
|
||||||
// 选择的消息ID列表（JSON数组，null 表示全部消息）
|
|
||||||
selectedMessageIds: jsonb('selected_message_ids').$type<string[]>(),
|
|
||||||
// 时间戳
|
|
||||||
createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),
|
|
||||||
updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow(),
|
|
||||||
});
|
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// 关系定义
|
// 关系定义
|
||||||
// ============================================
|
// ============================================
|
||||||
@ -433,18 +399,6 @@ export const notesRelations = relations(notes, ({ one }) => ({
|
|||||||
}),
|
}),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// 分享关系
|
|
||||||
export const sharedConversationsRelations = relations(sharedConversations, ({ one }) => ({
|
|
||||||
user: one(users, {
|
|
||||||
fields: [sharedConversations.userId],
|
|
||||||
references: [users.userId],
|
|
||||||
}),
|
|
||||||
conversation: one(conversations, {
|
|
||||||
fields: [sharedConversations.conversationId],
|
|
||||||
references: [conversations.conversationId],
|
|
||||||
}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// 类型定义
|
// 类型定义
|
||||||
// ============================================
|
// ============================================
|
||||||
@ -515,6 +469,3 @@ export type NewNote = typeof notes.$inferInsert;
|
|||||||
|
|
||||||
export type PromptOptimization = typeof promptOptimizations.$inferSelect;
|
export type PromptOptimization = typeof promptOptimizations.$inferSelect;
|
||||||
export type NewPromptOptimization = typeof promptOptimizations.$inferInsert;
|
export type NewPromptOptimization = typeof promptOptimizations.$inferInsert;
|
||||||
|
|
||||||
export type SharedConversation = typeof sharedConversations.$inferSelect;
|
|
||||||
export type NewSharedConversation = typeof sharedConversations.$inferInsert;
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user