PicoBot/web/src/components/Chat/ChatContainer.tsx
oudecheng 4efc8b51e7 feat(todo): 添加待办项关联的创建消息ID并支持消息高亮
- 在待办相关数据结构和存储中新增 created_by_message_id 字段
- 记录待办项创建时对应的消息ID,支持追溯来源
- 在前端待办列表项增加点击事件,点击后滚动并高亮对应消息
- 在消息列表组件中实现高亮动画及自动滚动功能
- 更新相关工具、协议和数据库查询,确保新字段正确传递和存储
- 增加 CSS 动画实现待办对应消息的高亮闪烁效果
- 优化前端状态管理,支持设置与获取高亮消息ID
2026-06-22 14:50:37 +08:00

52 lines
1.5 KiB
TypeScript

import { MessageList } from './MessageList'
import { MessageInput } from './MessageInput'
import type { ChatMessage, Attachment } from '../../types/protocol'
interface ChatContainerProps {
messages: ChatMessage[]
isLoading: boolean
isReadOnly?: boolean
channelName?: string
onSendMessage: (content: string, attachments: Attachment[]) => void
onNavigateToSubAgent?: (taskId: string, description: string, subagentType?: string) => void
onStop?: () => void
showThinking?: boolean
/** 浮动待办面板,绝对定位在消息区域上方 */
todoPanel?: React.ReactNode
/** 视图标识,用于保存/恢复滚动位置 */
viewKey?: string
/** 高亮的消息 ID */
highlightedMessageId?: string | null
}
export function ChatContainer({
messages,
isLoading,
isReadOnly = false,
channelName,
onSendMessage,
onNavigateToSubAgent,
onStop,
showThinking = true,
todoPanel,
viewKey,
highlightedMessageId,
}: ChatContainerProps) {
return (
<div className="flex h-full flex-col relative">
<div className="flex-1 overflow-hidden relative">
<MessageList messages={messages} onNavigateToSubAgent={onNavigateToSubAgent} showThinking={showThinking} viewKey={viewKey} highlightedMessageId={highlightedMessageId} />
{todoPanel}
</div>
<MessageInput
onSend={onSendMessage}
onStop={onStop}
disabled={isLoading}
isLoading={isLoading}
isReadOnly={isReadOnly}
channelName={channelName}
/>
</div>
)
}