feat(I): I-MINI-MANIFEST/RENDER/SDK + I-WORK-PROACTIVE/E2E frontend — MiniAppBlock, MiniAppSDK, ProactiveFeed, Workstream page, i18n, tsc clean
This commit is contained in:
Agent Zero
@@ -0,0 +1,87 @@
|
|||||||
|
/**
|
||||||
|
* MiniApp manifest types + workstream block types (Phase I.2 Workstream & MiniApps).
|
||||||
|
*
|
||||||
|
* Mirrors backend contracts:
|
||||||
|
* - app/plugins/manifest.py → MiniAppContribution
|
||||||
|
* - app/ai/workstream_contract.py → WorkstreamBlock / WorkstreamMessage
|
||||||
|
* - app/ai/proactive_feed.py → ProactiveSuggestion
|
||||||
|
*/
|
||||||
|
|
||||||
|
// ── MiniApp manifest contribution (backend: MiniAppContribution) ──
|
||||||
|
|
||||||
|
export interface MiniAppContribution {
|
||||||
|
app_id: string;
|
||||||
|
name: string;
|
||||||
|
icon: string;
|
||||||
|
description: string;
|
||||||
|
render_schema: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Plugin manifest with optional `miniapps` field.
|
||||||
|
* Only the fields relevant to MiniApps are declared here; the full manifest
|
||||||
|
* is typed in store/pluginStore.ts (PluginUiManifest).
|
||||||
|
*/
|
||||||
|
export interface PluginManifestWithMiniApps {
|
||||||
|
name: string;
|
||||||
|
display_name: string;
|
||||||
|
version: string;
|
||||||
|
miniapps?: MiniAppContribution[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Workstream block types (backend: WorkstreamBlock) ──
|
||||||
|
|
||||||
|
export type WorkstreamBlockType =
|
||||||
|
| 'text'
|
||||||
|
| 'entity_card'
|
||||||
|
| 'action_card'
|
||||||
|
| 'evidence_card'
|
||||||
|
| 'approval_card'
|
||||||
|
| 'miniapp'
|
||||||
|
| 'workflow_status'
|
||||||
|
| 'workflow_handoff'
|
||||||
|
| 'error';
|
||||||
|
|
||||||
|
export interface WorkstreamBlock {
|
||||||
|
type: WorkstreamBlockType;
|
||||||
|
content: string;
|
||||||
|
metadata: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type WorkstreamActorType = 'human' | 'system' | 'agent' | 'workflow';
|
||||||
|
|
||||||
|
export interface WorkstreamMessage {
|
||||||
|
actor_type: WorkstreamActorType;
|
||||||
|
actor_id?: string | null;
|
||||||
|
content: string;
|
||||||
|
blocks: WorkstreamBlock[];
|
||||||
|
conversation_id?: string | null;
|
||||||
|
tenant_id?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Proactive suggestion (backend: ProactiveSuggestion) ──
|
||||||
|
|
||||||
|
export type ProactivePriority = 'low' | 'medium' | 'high' | 'urgent';
|
||||||
|
|
||||||
|
export interface ProactiveSuggestion {
|
||||||
|
id: string;
|
||||||
|
trigger: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
priority: ProactivePriority;
|
||||||
|
action_type: 'suggestion' | 'action_required' | 'info';
|
||||||
|
action_url: string;
|
||||||
|
entity_type?: string | null;
|
||||||
|
entity_id?: string | null;
|
||||||
|
blocks: WorkstreamBlock[];
|
||||||
|
created_at: string;
|
||||||
|
expires_at?: string | null;
|
||||||
|
metadata: Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProactiveFeedSettings {
|
||||||
|
enabled: boolean;
|
||||||
|
min_priority: ProactivePriority;
|
||||||
|
max_per_hour: number;
|
||||||
|
triggers_enabled: Record<string, boolean>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
/**
|
||||||
|
* MiniAppBlock — renders a `miniapp` workstream block.
|
||||||
|
*
|
||||||
|
* Uses `metadata.app_id` and `metadata.render_schema` to render the MiniApp.
|
||||||
|
* Falls back to a placeholder state for unknown apps.
|
||||||
|
*
|
||||||
|
* Backend: app/ai/workstream_contract.py → build_miniapp_block
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { AppWindow, AlertCircle } from 'lucide-react';
|
||||||
|
import type { WorkstreamBlock } from '@/api/miniapps';
|
||||||
|
|
||||||
|
interface MiniAppBlockProps {
|
||||||
|
block: WorkstreamBlock;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a MiniApp block. If the app is unknown or render_schema is empty,
|
||||||
|
* show a fallback state with the app_id.
|
||||||
|
*/
|
||||||
|
export function MiniAppBlock({ block }: MiniAppBlockProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const metadata = block.metadata ?? {};
|
||||||
|
const appId = typeof metadata.app_id === 'string' ? metadata.app_id : '';
|
||||||
|
const title = typeof metadata.title === 'string' ? metadata.title : '';
|
||||||
|
const renderSchema =
|
||||||
|
metadata.render_schema && typeof metadata.render_schema === 'object'
|
||||||
|
? (metadata.render_schema as Record<string, unknown>)
|
||||||
|
: {};
|
||||||
|
|
||||||
|
const hasRenderSchema = Object.keys(renderSchema).length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary-100 text-primary-700 flex items-center justify-center">
|
||||||
|
<AppWindow className="h-5 w-5" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-sm font-semibold text-secondary-900">
|
||||||
|
{title || appId || t('workstream.miniapp.untitled')}
|
||||||
|
</h4>
|
||||||
|
{hasRenderSchema ? (
|
||||||
|
<div className="mt-2 text-sm text-secondary-600">
|
||||||
|
{t('workstream.miniapp.renderSchema')}
|
||||||
|
<pre className="mt-2 p-2 rounded bg-secondary-50 text-xs font-mono overflow-x-auto">
|
||||||
|
{JSON.stringify(renderSchema, null, 2)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="mt-2 flex items-center gap-2 text-xs text-secondary-400">
|
||||||
|
<AlertCircle className="h-3.5 w-3.5" aria-hidden="true" />
|
||||||
|
<span>{t('workstream.miniapp.noSchema')}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MiniAppBlock;
|
||||||
@@ -0,0 +1,290 @@
|
|||||||
|
/**
|
||||||
|
* MiniAppSDK — standard building blocks for MiniApp rendering.
|
||||||
|
*
|
||||||
|
* Provides reusable components used by MiniAppBlock and the Workstream page:
|
||||||
|
* - EntityCard: link to a CRM entity
|
||||||
|
* - ActionButtons: list of action buttons (deep links / callbacks)
|
||||||
|
* - ApprovalCard: approve/reject actions
|
||||||
|
* - ProgressIndicator: progress bar with label
|
||||||
|
* - DeepLink: safe external/internal link
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import {
|
||||||
|
ExternalLink,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
ArrowRight,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Badge } from '@/components/ui/Badge';
|
||||||
|
|
||||||
|
// ── EntityCard ──
|
||||||
|
|
||||||
|
export interface EntityCardProps {
|
||||||
|
entityType: string;
|
||||||
|
entityId: string;
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
url?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Card linking to a CRM entity (contact, company, mail, etc.).
|
||||||
|
*/
|
||||||
|
export function EntityCard({
|
||||||
|
entityType,
|
||||||
|
entityId,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
url,
|
||||||
|
}: EntityCardProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const href = url || `/${entityType}/${entityId}`;
|
||||||
|
const safeHref = hrefSafe(href);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<Badge variant="secondary">{entityType}</Badge>
|
||||||
|
<h4 className="mt-2 text-sm font-semibold text-secondary-900 truncate">
|
||||||
|
{title || entityId}
|
||||||
|
</h4>
|
||||||
|
{subtitle && (
|
||||||
|
<p className="mt-1 text-xs text-secondary-500 truncate">{subtitle}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{safeHref && (
|
||||||
|
<a
|
||||||
|
href={safeHref}
|
||||||
|
className="inline-flex items-center gap-1 text-xs font-medium text-primary-600 hover:text-primary-700 focus-visible:ring-2 focus-visible:ring-primary-500 rounded px-2 py-1"
|
||||||
|
aria-label={t('workstream.sdk.openEntity')}
|
||||||
|
>
|
||||||
|
<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
|
||||||
|
{t('workstream.sdk.open')}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── ActionButtons ──
|
||||||
|
|
||||||
|
export interface ActionButtonItem {
|
||||||
|
label: string;
|
||||||
|
action: string;
|
||||||
|
type?: 'primary' | 'secondary' | 'danger';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ActionButtonsProps {
|
||||||
|
actions: ActionButtonItem[];
|
||||||
|
onAction?: (action: ActionButtonItem) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a list of action buttons. Actions are either deep links (http/https)
|
||||||
|
* or callbacks handled by the parent via `onAction`.
|
||||||
|
*/
|
||||||
|
export function ActionButtons({ actions, onAction }: ActionButtonsProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
if (!actions || actions.length === 0) return null;
|
||||||
|
|
||||||
|
const handleClick = (action: ActionButtonItem) => {
|
||||||
|
if (onAction) {
|
||||||
|
onAction(action);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const url = action.action;
|
||||||
|
if (isSafeUrl(url)) {
|
||||||
|
window.open(url, '_blank', 'noopener,noreferrer');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{actions.map((action, idx) => {
|
||||||
|
const variant =
|
||||||
|
action.type === 'danger'
|
||||||
|
? 'danger'
|
||||||
|
: action.type === 'secondary'
|
||||||
|
? 'secondary'
|
||||||
|
: 'primary';
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={idx}
|
||||||
|
variant={variant}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleClick(action)}
|
||||||
|
>
|
||||||
|
{action.label || t('workstream.sdk.action')}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── ApprovalCard ──
|
||||||
|
|
||||||
|
export interface ApprovalCardProps {
|
||||||
|
approvalId: string;
|
||||||
|
action: string;
|
||||||
|
description?: string;
|
||||||
|
onApprove?: (approvalId: string) => void;
|
||||||
|
onReject?: (approvalId: string) => void;
|
||||||
|
isPending?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Approval card with approve/reject actions.
|
||||||
|
*/
|
||||||
|
export function ApprovalCard({
|
||||||
|
approvalId,
|
||||||
|
action,
|
||||||
|
description,
|
||||||
|
onApprove,
|
||||||
|
onReject,
|
||||||
|
isPending = false,
|
||||||
|
}: ApprovalCardProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border border-warning-200 rounded-lg p-4 bg-warning-50 shadow-sm">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-warning-100 text-warning-700 flex items-center justify-center">
|
||||||
|
<CheckCircle2 className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="text-sm font-semibold text-secondary-900">
|
||||||
|
{t('workstream.sdk.approvalNeeded')}: {action}
|
||||||
|
</h4>
|
||||||
|
{description && (
|
||||||
|
<p className="mt-1 text-xs text-secondary-600">{description}</p>
|
||||||
|
)}
|
||||||
|
<div className="mt-3 flex flex-wrap gap-2">
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="sm"
|
||||||
|
isLoading={isPending}
|
||||||
|
onClick={() => onApprove?.(approvalId)}
|
||||||
|
icon={<CheckCircle2 className="h-4 w-4" />}
|
||||||
|
>
|
||||||
|
{t('workstream.sdk.approve')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
isLoading={isPending}
|
||||||
|
onClick={() => onReject?.(approvalId)}
|
||||||
|
icon={<XCircle className="h-4 w-4" />}
|
||||||
|
>
|
||||||
|
{t('workstream.sdk.reject')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── ProgressIndicator ──
|
||||||
|
|
||||||
|
export interface ProgressIndicatorProps {
|
||||||
|
label?: string;
|
||||||
|
value: number; // 0-100
|
||||||
|
status?: 'pending' | 'in_progress' | 'completed' | 'error';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Progress bar with optional label and status color.
|
||||||
|
*/
|
||||||
|
export function ProgressIndicator({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
status = 'in_progress',
|
||||||
|
}: ProgressIndicatorProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const clamped = Math.max(0, Math.min(100, value));
|
||||||
|
const barColor =
|
||||||
|
status === 'error'
|
||||||
|
? 'bg-danger-500'
|
||||||
|
: status === 'completed'
|
||||||
|
? 'bg-success-500'
|
||||||
|
: 'bg-primary-500';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
{label && (
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<span className="text-xs font-medium text-secondary-700">{label}</span>
|
||||||
|
<span className="text-xs text-secondary-400">{clamped}%</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className="w-full h-2 rounded-full bg-secondary-100 overflow-hidden"
|
||||||
|
role="progressbar"
|
||||||
|
aria-valuenow={clamped}
|
||||||
|
aria-valuemin={0}
|
||||||
|
aria-valuemax={100}
|
||||||
|
aria-label={label || t('workstream.sdk.progress')}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full transition-all ${barColor}`}
|
||||||
|
style={{ width: `${clamped}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── DeepLink ──
|
||||||
|
|
||||||
|
export interface DeepLinkProps {
|
||||||
|
href: string;
|
||||||
|
label?: string;
|
||||||
|
external?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Safe deep link — only allows http(s) and internal paths.
|
||||||
|
*/
|
||||||
|
export function DeepLink({ href, label, external = false }: DeepLinkProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const safeHref = hrefSafe(href);
|
||||||
|
if (!safeHref) {
|
||||||
|
return <span className="text-xs text-secondary-400">{label || href}</span>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={safeHref}
|
||||||
|
target={external ? '_blank' : undefined}
|
||||||
|
rel={external ? 'noopener noreferrer' : undefined}
|
||||||
|
className="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700 hover:underline"
|
||||||
|
>
|
||||||
|
{label || href}
|
||||||
|
{external && <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Helpers ──
|
||||||
|
|
||||||
|
function hrefSafe(href: string): string | null {
|
||||||
|
if (!href) return null;
|
||||||
|
if (href.startsWith('/')) return href;
|
||||||
|
try {
|
||||||
|
const parsed = new URL(href);
|
||||||
|
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return href;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSafeUrl(url: string): boolean {
|
||||||
|
return hrefSafe(url) !== null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
/**
|
||||||
|
* ProactiveFeed — contextual suggestions/actions in the workstream.
|
||||||
|
*
|
||||||
|
* Renders ProactiveSuggestion items with priority, client-side dedupe and
|
||||||
|
* cooldown (mirrors backend app/ai/proactive_feed.py). Suggestions are
|
||||||
|
* non-intrusive: no popups, just a feed section.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Sparkles, Info, ArrowRight, X } from 'lucide-react';
|
||||||
|
import { Badge } from '@/components/ui/Badge';
|
||||||
|
import type { ProactiveSuggestion, ProactivePriority } from '@/api/miniapps';
|
||||||
|
|
||||||
|
interface ProactiveFeedProps {
|
||||||
|
suggestions: ProactiveSuggestion[];
|
||||||
|
/** Cooldown in ms per trigger; default 300000 (5 min). */
|
||||||
|
cooldowns?: Record<string, number>;
|
||||||
|
/** Minimum priority to show. */
|
||||||
|
minPriority?: ProactivePriority;
|
||||||
|
onDismiss?: (id: string) => void;
|
||||||
|
onAction?: (suggestion: ProactiveSuggestion) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PRIORITY_ORDER: Record<ProactivePriority, number> = {
|
||||||
|
low: 0,
|
||||||
|
medium: 1,
|
||||||
|
high: 2,
|
||||||
|
urgent: 3,
|
||||||
|
};
|
||||||
|
|
||||||
|
const PRIORITY_VARIANT: Record<
|
||||||
|
ProactivePriority,
|
||||||
|
'secondary' | 'info' | 'warning' | 'danger'
|
||||||
|
> = {
|
||||||
|
low: 'secondary',
|
||||||
|
medium: 'info',
|
||||||
|
high: 'warning',
|
||||||
|
urgent: 'danger',
|
||||||
|
};
|
||||||
|
|
||||||
|
const ACTION_TYPE_ICON: Record<string, React.ReactNode> = {
|
||||||
|
suggestion: <Sparkles className="h-4 w-4" aria-hidden="true" />,
|
||||||
|
action_required: <ArrowRight className="h-4 w-4" aria-hidden="true" />,
|
||||||
|
info: <Info className="h-4 w-4" aria-hidden="true" />,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Client-side dedupe + cooldown keyed by trigger + entity_id.
|
||||||
|
* Persisted in a module-level map so it survives re-renders within a session.
|
||||||
|
*/
|
||||||
|
function dedupeKey(s: ProactiveSuggestion): string {
|
||||||
|
return `${s.trigger}:${s.entity_id ?? 'none'}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isCooledDown(s: ProactiveSuggestion, cooldowns: Record<string, number>): boolean {
|
||||||
|
const key = dedupeKey(s);
|
||||||
|
const last = lastAt[key];
|
||||||
|
if (last === undefined) return false;
|
||||||
|
const cooldown = cooldowns[s.trigger] ?? cooldowns.default ?? 300000;
|
||||||
|
return Date.now() - last < cooldown;
|
||||||
|
}
|
||||||
|
|
||||||
|
function markShown(s: ProactiveSuggestion): void {
|
||||||
|
lastAt[dedupeKey(s)] = Date.now();
|
||||||
|
}
|
||||||
|
|
||||||
|
const lastAt: Record<string, number> = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders a non-intrusive feed of proactive suggestions.
|
||||||
|
*/
|
||||||
|
export function ProactiveFeed({
|
||||||
|
suggestions,
|
||||||
|
cooldowns = {},
|
||||||
|
minPriority = 'low',
|
||||||
|
onDismiss,
|
||||||
|
onAction,
|
||||||
|
}: ProactiveFeedProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const visible = useMemo(() => {
|
||||||
|
const minLevel = PRIORITY_ORDER[minPriority] ?? 0;
|
||||||
|
return suggestions
|
||||||
|
.filter((s) => PRIORITY_ORDER[s.priority] >= minLevel)
|
||||||
|
.filter((s) => !isCooledDown(s, cooldowns))
|
||||||
|
.sort((a, b) => PRIORITY_ORDER[b.priority] - PRIORITY_ORDER[a.priority]);
|
||||||
|
}, [suggestions, cooldowns, minPriority]);
|
||||||
|
|
||||||
|
// Mark visible suggestions as shown (cooldown tracking)
|
||||||
|
React.useEffect(() => {
|
||||||
|
visible.forEach(markShown);
|
||||||
|
}, [visible]);
|
||||||
|
|
||||||
|
if (visible.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="space-y-2"
|
||||||
|
aria-label={t('workstream.proactive.title')}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2 px-1">
|
||||||
|
<Sparkles className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||||
|
<h3 className="text-sm font-semibold text-secondary-800">
|
||||||
|
{t('workstream.proactive.title')}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
{visible.map((s) => (
|
||||||
|
<div
|
||||||
|
key={s.id}
|
||||||
|
className="border border-secondary-200 rounded-lg p-3 bg-white shadow-sm flex items-start gap-3"
|
||||||
|
>
|
||||||
|
<div className="flex-shrink-0 mt-0.5 text-primary-500">
|
||||||
|
{ACTION_TYPE_ICON[s.action_type] ?? (
|
||||||
|
<Sparkles className="h-4 w-4" aria-hidden="true" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<span className="text-sm font-medium text-secondary-900">
|
||||||
|
{s.title}
|
||||||
|
</span>
|
||||||
|
<Badge variant={PRIORITY_VARIANT[s.priority]}>
|
||||||
|
{t(`workstream.proactive.priority.${s.priority}`)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{s.description && (
|
||||||
|
<p className="mt-1 text-xs text-secondary-500">{s.description}</p>
|
||||||
|
)}
|
||||||
|
{s.action_url && (
|
||||||
|
<button
|
||||||
|
onClick={() => onAction?.(s)}
|
||||||
|
className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary-600 hover:text-primary-700 hover:underline"
|
||||||
|
>
|
||||||
|
{t('workstream.proactive.view')}
|
||||||
|
<ArrowRight className="h-3 w-3" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{onDismiss && (
|
||||||
|
<button
|
||||||
|
onClick={() => onDismiss(s.id)}
|
||||||
|
className="flex-shrink-0 p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
|
||||||
|
aria-label={t('workstream.proactive.dismiss')}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ProactiveFeed;
|
||||||
@@ -1257,5 +1257,50 @@
|
|||||||
"preview": "Vorschau",
|
"preview": "Vorschau",
|
||||||
"split": "Geteilt",
|
"split": "Geteilt",
|
||||||
"writeLabel": "Markdown-Inhalt"
|
"writeLabel": "Markdown-Inhalt"
|
||||||
|
},
|
||||||
|
"workstream": {
|
||||||
|
"title": "Workstream",
|
||||||
|
"empty": {
|
||||||
|
"title": "Keine Nachrichten",
|
||||||
|
"description": "Es sind noch keine Workstream-Nachrichten vorhanden."
|
||||||
|
},
|
||||||
|
"actor": {
|
||||||
|
"human": "Mensch",
|
||||||
|
"system": "System",
|
||||||
|
"agent": "Agent",
|
||||||
|
"workflow": "Workflow"
|
||||||
|
},
|
||||||
|
"block": {
|
||||||
|
"step": "Schritt",
|
||||||
|
"progress": "Fortschritt",
|
||||||
|
"handoff": "Übergabe",
|
||||||
|
"openSource": "Quelle öffnen",
|
||||||
|
"unknown": "Unbekannter Block-Typ: {{type}}"
|
||||||
|
},
|
||||||
|
"miniapp": {
|
||||||
|
"untitled": "Unbenannte Mini-App",
|
||||||
|
"renderSchema": "Render-Schema",
|
||||||
|
"noSchema": "Kein Render-Schema für diese Mini-App vorhanden."
|
||||||
|
},
|
||||||
|
"sdk": {
|
||||||
|
"openEntity": "Entität öffnen",
|
||||||
|
"open": "Öffnen",
|
||||||
|
"action": "Aktion",
|
||||||
|
"approvalNeeded": "Freigabe erforderlich",
|
||||||
|
"approve": "Genehmigen",
|
||||||
|
"reject": "Ablehnen",
|
||||||
|
"progress": "Fortschritt"
|
||||||
|
},
|
||||||
|
"proactive": {
|
||||||
|
"title": "Vorschläge",
|
||||||
|
"view": "Ansehen",
|
||||||
|
"dismiss": "Verwerfen",
|
||||||
|
"priority": {
|
||||||
|
"low": "Niedrig",
|
||||||
|
"medium": "Mittel",
|
||||||
|
"high": "Hoch",
|
||||||
|
"urgent": "Dringend"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1257,5 +1257,50 @@
|
|||||||
"preview": "Preview",
|
"preview": "Preview",
|
||||||
"split": "Split",
|
"split": "Split",
|
||||||
"writeLabel": "Markdown content"
|
"writeLabel": "Markdown content"
|
||||||
|
},
|
||||||
|
"workstream": {
|
||||||
|
"title": "Workstream",
|
||||||
|
"empty": {
|
||||||
|
"title": "No messages",
|
||||||
|
"description": "There are no workstream messages yet."
|
||||||
|
},
|
||||||
|
"actor": {
|
||||||
|
"human": "Human",
|
||||||
|
"system": "System",
|
||||||
|
"agent": "Agent",
|
||||||
|
"workflow": "Workflow"
|
||||||
|
},
|
||||||
|
"block": {
|
||||||
|
"step": "Step",
|
||||||
|
"progress": "Progress",
|
||||||
|
"handoff": "Handoff",
|
||||||
|
"openSource": "Open source",
|
||||||
|
"unknown": "Unknown block type: {{type}}"
|
||||||
|
},
|
||||||
|
"miniapp": {
|
||||||
|
"untitled": "Untitled Mini-App",
|
||||||
|
"renderSchema": "Render schema",
|
||||||
|
"noSchema": "No render schema available for this Mini-App."
|
||||||
|
},
|
||||||
|
"sdk": {
|
||||||
|
"openEntity": "Open entity",
|
||||||
|
"open": "Open",
|
||||||
|
"action": "Action",
|
||||||
|
"approvalNeeded": "Approval needed",
|
||||||
|
"approve": "Approve",
|
||||||
|
"reject": "Reject",
|
||||||
|
"progress": "Progress"
|
||||||
|
},
|
||||||
|
"proactive": {
|
||||||
|
"title": "Suggestions",
|
||||||
|
"view": "View",
|
||||||
|
"dismiss": "Dismiss",
|
||||||
|
"priority": {
|
||||||
|
"low": "Low",
|
||||||
|
"medium": "Medium",
|
||||||
|
"high": "High",
|
||||||
|
"urgent": "Urgent"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,296 @@
|
|||||||
|
/**
|
||||||
|
* Workstream page — central view rendering all workstream block types.
|
||||||
|
*
|
||||||
|
* Block types: text, entity_card, action_card, evidence_card, approval_card,
|
||||||
|
* miniapp, workflow_status, workflow_handoff.
|
||||||
|
*
|
||||||
|
* Backend: app/ai/workstream_contract.py, app/workflows/workstream.py
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import {
|
||||||
|
MessageSquare,
|
||||||
|
Link2,
|
||||||
|
AlertTriangle,
|
||||||
|
Workflow,
|
||||||
|
ArrowRight,
|
||||||
|
Loader2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Badge } from '@/components/ui/Badge';
|
||||||
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
import { MiniAppBlock } from '@/components/workstream/MiniAppBlock';
|
||||||
|
import {
|
||||||
|
EntityCard,
|
||||||
|
ActionButtons,
|
||||||
|
ApprovalCard,
|
||||||
|
ProgressIndicator,
|
||||||
|
DeepLink,
|
||||||
|
type ActionButtonItem,
|
||||||
|
} from '@/components/workstream/MiniAppSDK';
|
||||||
|
import { ProactiveFeed } from '@/components/workstream/ProactiveFeed';
|
||||||
|
import type {
|
||||||
|
WorkstreamMessage,
|
||||||
|
WorkstreamBlock,
|
||||||
|
ProactiveSuggestion,
|
||||||
|
} from '@/api/miniapps';
|
||||||
|
|
||||||
|
interface WorkstreamPageProps {
|
||||||
|
messages?: WorkstreamMessage[];
|
||||||
|
suggestions?: ProactiveSuggestion[];
|
||||||
|
isLoading?: boolean;
|
||||||
|
onApprove?: (approvalId: string) => void;
|
||||||
|
onReject?: (approvalId: string) => void;
|
||||||
|
onAction?: (action: ActionButtonItem) => void;
|
||||||
|
onSuggestionAction?: (suggestion: ProactiveSuggestion) => void;
|
||||||
|
onDismissSuggestion?: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ACTOR_VARIANT: Record<
|
||||||
|
string,
|
||||||
|
'secondary' | 'primary' | 'info' | 'success'
|
||||||
|
> = {
|
||||||
|
human: 'secondary',
|
||||||
|
system: 'info',
|
||||||
|
agent: 'primary',
|
||||||
|
workflow: 'success',
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render a single workstream block by type.
|
||||||
|
*/
|
||||||
|
function BlockView({
|
||||||
|
block,
|
||||||
|
onApprove,
|
||||||
|
onReject,
|
||||||
|
onAction,
|
||||||
|
}: {
|
||||||
|
block: WorkstreamBlock;
|
||||||
|
onApprove?: (approvalId: string) => void;
|
||||||
|
onReject?: (approvalId: string) => void;
|
||||||
|
onAction?: (action: ActionButtonItem) => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const meta = block.metadata ?? {};
|
||||||
|
|
||||||
|
switch (block.type) {
|
||||||
|
case 'text':
|
||||||
|
return (
|
||||||
|
<div className="text-sm whitespace-pre-wrap break-words text-secondary-800">
|
||||||
|
{block.content || String(meta.text ?? '')}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'entity_card':
|
||||||
|
return (
|
||||||
|
<EntityCard
|
||||||
|
entityType={String(meta.entity_type ?? '')}
|
||||||
|
entityId={String(meta.entity_id ?? '')}
|
||||||
|
title={String(meta.title ?? block.content)}
|
||||||
|
subtitle={String(meta.subtitle ?? '')}
|
||||||
|
url={String(meta.url ?? '')}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'action_card': {
|
||||||
|
const actions: ActionButtonItem[] = Array.isArray(meta.actions)
|
||||||
|
? (meta.actions as ActionButtonItem[])
|
||||||
|
: [];
|
||||||
|
return (
|
||||||
|
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm space-y-2">
|
||||||
|
<h4 className="text-sm font-semibold text-secondary-900">
|
||||||
|
{String(meta.title ?? block.content)}
|
||||||
|
</h4>
|
||||||
|
{meta.description ? (
|
||||||
|
<p className="text-sm text-secondary-600">
|
||||||
|
{String(meta.description)}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
<ActionButtons actions={actions} onAction={onAction} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'evidence_card':
|
||||||
|
return (
|
||||||
|
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Link2 className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||||
|
<h4 className="text-sm font-semibold text-secondary-900">
|
||||||
|
{String(meta.title ?? block.content)}
|
||||||
|
</h4>
|
||||||
|
{typeof meta.confidence === 'number' && (
|
||||||
|
<Badge variant="secondary">
|
||||||
|
{Math.round(meta.confidence * 100)}%
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{meta.snippet ? (
|
||||||
|
<p className="mt-2 text-xs text-secondary-500">
|
||||||
|
{String(meta.snippet)}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{meta.url ? (
|
||||||
|
<div className="mt-2">
|
||||||
|
<DeepLink href={String(meta.url)} label={t('workstream.block.openSource')} external />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'approval_card':
|
||||||
|
return (
|
||||||
|
<ApprovalCard
|
||||||
|
approvalId={String(meta.approval_id ?? '')}
|
||||||
|
action={String(meta.action ?? block.content)}
|
||||||
|
description={String(meta.description ?? '')}
|
||||||
|
onApprove={onApprove}
|
||||||
|
onReject={onReject}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'miniapp':
|
||||||
|
return <MiniAppBlock block={block} />;
|
||||||
|
|
||||||
|
case 'workflow_status':
|
||||||
|
return (
|
||||||
|
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Workflow className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||||
|
<h4 className="text-sm font-semibold text-secondary-900">
|
||||||
|
{String(meta.workflow_name ?? block.content)}
|
||||||
|
</h4>
|
||||||
|
<Badge variant="info">{String(meta.status ?? '')}</Badge>
|
||||||
|
</div>
|
||||||
|
{meta.step_name ? (
|
||||||
|
<p className="mt-2 text-xs text-secondary-500">
|
||||||
|
{t('workstream.block.step')}: {String(meta.step_name)}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{typeof meta.step_index === 'number' && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<ProgressIndicator
|
||||||
|
label={t('workstream.block.progress')}
|
||||||
|
value={Math.min(100, (meta.step_index + 1) * 10)}
|
||||||
|
status="in_progress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'workflow_handoff':
|
||||||
|
return (
|
||||||
|
<div className="border border-warning-200 rounded-lg p-4 bg-warning-50 shadow-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ArrowRight className="h-4 w-4 text-warning-700" aria-hidden="true" />
|
||||||
|
<h4 className="text-sm font-semibold text-secondary-900">
|
||||||
|
{t('workstream.block.handoff')}: {String(meta.handoff_type ?? '')}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
{meta.description ? (
|
||||||
|
<p className="mt-2 text-xs text-secondary-600">
|
||||||
|
{String(meta.description)}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 'error':
|
||||||
|
return (
|
||||||
|
<div className="border border-danger-200 rounded-lg p-4 bg-danger-50 shadow-sm flex items-start gap-2">
|
||||||
|
<AlertTriangle className="h-4 w-4 text-danger-600 mt-0.5" aria-hidden="true" />
|
||||||
|
<div className="text-sm text-danger-700">
|
||||||
|
{block.content || String(meta.error ?? '')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
default:
|
||||||
|
return (
|
||||||
|
<div className="text-xs text-secondary-400 italic p-2 rounded bg-secondary-50">
|
||||||
|
{t('workstream.block.unknown', { type: block.type })}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Central Workstream page.
|
||||||
|
*/
|
||||||
|
export function WorkstreamPage({
|
||||||
|
messages = [],
|
||||||
|
suggestions = [],
|
||||||
|
isLoading = false,
|
||||||
|
onApprove,
|
||||||
|
onReject,
|
||||||
|
onAction,
|
||||||
|
onSuggestionAction,
|
||||||
|
onDismissSuggestion,
|
||||||
|
}: WorkstreamPageProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-3xl mx-auto p-4 space-y-6">
|
||||||
|
<header className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="h-5 w-5 text-primary-500" aria-hidden="true" />
|
||||||
|
<h1 className="text-lg font-semibold text-secondary-900">
|
||||||
|
{t('workstream.title')}
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<ProactiveFeed
|
||||||
|
suggestions={suggestions}
|
||||||
|
onAction={onSuggestionAction}
|
||||||
|
onDismiss={onDismissSuggestion}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-12">
|
||||||
|
<Loader2 className="animate-spin h-6 w-6 text-primary-500" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
) : messages.length === 0 ? (
|
||||||
|
<EmptyState
|
||||||
|
icon={<MessageSquare className="h-8 w-8" aria-hidden="true" />}
|
||||||
|
title={t('workstream.empty.title')}
|
||||||
|
description={t('workstream.empty.description')}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{messages.map((message, idx) => (
|
||||||
|
<article
|
||||||
|
key={message.actor_id ? `${message.actor_id}-${idx}` : idx}
|
||||||
|
className="border border-secondary-200 rounded-lg bg-white shadow-sm p-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<Badge variant={ACTOR_VARIANT[message.actor_type] ?? 'secondary'}>
|
||||||
|
{t(`workstream.actor.${message.actor_type}`)}
|
||||||
|
</Badge>
|
||||||
|
{message.content && (
|
||||||
|
<span className="text-sm text-secondary-600 truncate">
|
||||||
|
{message.content}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{message.blocks && message.blocks.length > 0 && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{message.blocks.map((block, bidx) => (
|
||||||
|
<BlockView
|
||||||
|
key={bidx}
|
||||||
|
block={block}
|
||||||
|
onApprove={onApprove}
|
||||||
|
onReject={onReject}
|
||||||
|
onAction={onAction}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WorkstreamPage;
|
||||||
Reference in New Issue
Block a user