0938f4fbd2
- SummaryButton: 摘要入口按钮，支持已生成状态展示 - SummaryOptions: 摘要选项配置面板 (长度/风格选择) - SummaryContent: 摘要内容展示组件，支持 Markdown 渲染 - SummaryModal: 摘要模态框，集成选项配置和内容展示
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Sparkles } from 'lucide-react';
|
|
import { SummaryModal } from './SummaryModal';
|
|
import type { SummaryMessage } from './types';
|
|
import { Tooltip } from '@/components/ui/Tooltip';
|
|
|
|
interface SummaryButtonProps {
|
|
conversationId: string;
|
|
messages: SummaryMessage[];
|
|
hasSummary?: boolean;
|
|
existingSummary?: string | null;
|
|
onSummaryGenerated?: (summary: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* 智能摘要触发按钮
|
|
* 集成到对话头部
|
|
*/
|
|
export function SummaryButton({
|
|
conversationId,
|
|
messages,
|
|
hasSummary = false,
|
|
existingSummary,
|
|
onSummaryGenerated,
|
|
className = '',
|
|
}: SummaryButtonProps) {
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const handleClick = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Tooltip content="智能摘要" position="bottom">
|
|
<button
|
|
type="button"
|
|
onClick={handleClick}
|
|
className={`relative p-2 rounded text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-primary)] transition-all duration-150 ${className}`}
|
|
aria-label="生成智能摘要"
|
|
>
|
|
<Sparkles size={18} />
|
|
|
|
{/* 已有摘要指示器 */}
|
|
{hasSummary && (
|
|
<span className="absolute top-1 right-1 w-2 h-2 bg-[var(--color-primary)] rounded-full border-2 border-[var(--color-bg-primary)] animate-pulse" />
|
|
)}
|
|
</button>
|
|
</Tooltip>
|
|
|
|
{/* 摘要 Modal */}
|
|
<SummaryModal
|
|
isOpen={isModalOpen}
|
|
onClose={handleClose}
|
|
conversationId={conversationId}
|
|
messages={messages}
|
|
existingSummary={existingSummary}
|
|
onSummaryGenerated={onSummaryGenerated}
|
|
/>
|
|
</>
|
|
);
|
|
}
|