Agent Zero
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import type { MessageBlock } from '@/store/commStore';
|
|
import MarkdownBlock from './MarkdownBlock';
|
|
import HtmlBlock from './HtmlBlock';
|
|
import ImageBlock from './ImageBlock';
|
|
import AudioBlock from './AudioBlock';
|
|
import VideoBlock from './VideoBlock';
|
|
import FileBlock from './FileBlock';
|
|
import ActionCardBlock from './ActionCardBlock';
|
|
import ContactCardBlock from './ContactCardBlock';
|
|
import MiniAppBlock from './MiniAppBlock';
|
|
import AgentResultBlock from './AgentResultBlock';
|
|
import ApprovalRequestBlock from './ApprovalRequestBlock';
|
|
import TaskCardBlock from './TaskCardBlock';
|
|
import WorkflowCardBlock from './WorkflowCardBlock';
|
|
import KnowledgeCardBlock from './KnowledgeCardBlock';
|
|
|
|
interface BlockRendererProps {
|
|
blocks: MessageBlock[];
|
|
}
|
|
|
|
const BlockRenderer: React.FC<BlockRendererProps> = ({ blocks }) => {
|
|
if (!blocks || blocks.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
// Sort blocks by sort_order to ensure correct rendering sequence
|
|
const sortedBlocks = [...blocks].sort((a, b) => a.sort_order - b.sort_order);
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{sortedBlocks.map((block) => {
|
|
const renderBlock = (): React.ReactNode => {
|
|
switch (block.block_type) {
|
|
case 'text':
|
|
// Text blocks: render as plain text in a styled div
|
|
return (
|
|
<div className="text-sm whitespace-pre-wrap break-words">
|
|
{block.block_data.text || block.block_data.content || ''}
|
|
</div>
|
|
);
|
|
case 'markdown':
|
|
return <MarkdownBlock block={block} />;
|
|
case 'html':
|
|
return <HtmlBlock block={block} />;
|
|
case 'image':
|
|
return <ImageBlock block={block} />;
|
|
case 'audio':
|
|
return <AudioBlock block={block} />;
|
|
case 'video':
|
|
return <VideoBlock block={block} />;
|
|
case 'file':
|
|
return <FileBlock block={block} />;
|
|
case 'action_card':
|
|
return <ActionCardBlock block={block} />;
|
|
case 'contact_card':
|
|
return <ContactCardBlock block={block} />;
|
|
case 'miniapp':
|
|
return <MiniAppBlock block={block} />;
|
|
case 'agent_result':
|
|
return <AgentResultBlock block={block} />;
|
|
case 'approval_request':
|
|
return <ApprovalRequestBlock block={block} />;
|
|
case 'task_card':
|
|
return <TaskCardBlock block={block} />;
|
|
case 'workflow_card':
|
|
return <WorkflowCardBlock block={block} />;
|
|
case 'knowledge_card':
|
|
return <KnowledgeCardBlock block={block} />;
|
|
default:
|
|
// Fallback for unknown block types
|
|
return (
|
|
<div className="text-xs text-secondary-400 italic p-2 rounded bg-secondary-50">
|
|
Unbekannter Block-Typ: {block.block_type}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div key={block.id} className="block-wrapper">
|
|
{renderBlock()}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BlockRenderer;
|