- 在待办相关数据结构和存储中新增 created_by_message_id 字段 - 记录待办项创建时对应的消息ID,支持追溯来源 - 在前端待办列表项增加点击事件,点击后滚动并高亮对应消息 - 在消息列表组件中实现高亮动画及自动滚动功能 - 更新相关工具、协议和数据库查询,确保新字段正确传递和存储 - 增加 CSS 动画实现待办对应消息的高亮闪烁效果 - 优化前端状态管理,支持设置与获取高亮消息ID
52 lines
1.5 KiB
TypeScript
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>
|
|
)
|
|
}
|