+ * {messages.map(m =>
+ * );
+ * ```
+ */
+export function useAutoScroll(deps: React.DependencyList) {
+ const endRef = useRef
{/* Header */}
-
-
-
+ ([]);
- const [isLoading, setIsLoading] = useState(true);
- const [error, setError] = useState(null);
- const [showAll, setShowAll] = useState(false);
- const [isClearAllDialogOpen, setIsClearAllDialogOpen] = useState(false);
- const [isClearing, setIsClearing] = useState(false);
+ const dispatch = useAppDispatch();
+ const conversations = useAppSelector(selectConversations);
+ const isLoading = useAppSelector(selectIsHistoryLoading);
+ const error = useAppSelector(selectHistoryError);
+ const showAll = useAppSelector(selectShowAll);
+ const isClearAllDialogOpen = useAppSelector(selectIsClearAllDialogOpen);
+ const isClearing = useAppSelector(selectIsClearing);
+ const currentConversationId = useAppSelector(selectConversationId);
+ const currentConversationTitle = useAppSelector(selectConversationTitle);
+ const currentMessages = useAppSelector(selectMessages);
+ const isGenerating = useAppSelector(selectIsLoading);
+ const refreshTrigger = useAppSelector(selectHistoryRefreshTrigger);
+
const INITIAL_COUNT = 5;
const handleClearAllConversations = useCallback(async () => {
- setIsClearing(true);
try {
- const response = await fetch('/api/conversations', {
- method: 'DELETE',
- });
- if (response.ok) {
- setConversations([]);
- onNewConversation();
- setIsClearAllDialogOpen(false);
- } else {
- console.error('Failed to clear all conversations');
- }
- } catch (err) {
- console.error('Error clearing all conversations:', err);
- } finally {
- setIsClearing(false);
+ await dispatch(clearAllConversations()).unwrap();
+ onNewConversation();
+ } catch {
+ // Error clearing all conversations
}
- }, [onNewConversation]);
+ }, [dispatch, onNewConversation]);
const handleDeleteConversation = useCallback(async (conversationId: string) => {
try {
- const response = await fetch(`/api/conversations/${conversationId}`, {
- method: 'DELETE',
- });
- if (response.ok) {
- setConversations(prev => prev.filter(c => c.id !== conversationId));
- if (conversationId === currentConversationId) {
- onNewConversation();
- }
- } else {
- console.error('Failed to delete conversation');
+ await dispatch(deleteConversation(conversationId)).unwrap();
+ if (conversationId === currentConversationId) {
+ onNewConversation();
}
- } catch (err) {
- console.error('Error deleting conversation:', err);
+ } catch {
+ // Error deleting conversation
}
- }, [currentConversationId, onNewConversation]);
+ }, [dispatch, currentConversationId, onNewConversation]);
const handleRenameConversation = useCallback(async (conversationId: string, newTitle: string) => {
try {
- const response = await fetch(`/api/conversations/${conversationId}`, {
- method: 'PUT',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ title: newTitle }),
- });
-
- if (response.ok) {
- setConversations(prev => prev.map(c =>
- c.id === conversationId ? { ...c, title: newTitle } : c
- ));
- } else {
- console.error('Failed to rename conversation');
- }
- } catch (err) {
- console.error('Error renaming conversation:', err);
- }
- }, []);
-
- const loadConversations = useCallback(async () => {
- setIsLoading(true);
- setError(null);
- try {
- // Backend gets user from auth headers, no need to pass user_id
- const response = await fetch('/api/conversations');
- if (response.ok) {
- const data = await response.json();
- setConversations(data.conversations || []);
- } else {
- // If no conversations endpoint, use empty list
- setConversations([]);
- }
- } catch (err) {
- console.error('Error loading conversations:', err);
- setError('Unable to load conversation history');
- setConversations([]);
- } finally {
- setIsLoading(false);
+ await dispatch(renameConversation({ conversationId, newTitle })).unwrap();
+ } catch {
+ // Error renaming conversation
}
- }, []);
+ }, [dispatch]);
useEffect(() => {
- loadConversations();
- }, [loadConversations, refreshTrigger]);
+ dispatch(fetchConversations());
+ }, [dispatch, refreshTrigger]);
// Reset showAll when conversations change significantly
useEffect(() => {
- setShowAll(false);
- }, [refreshTrigger]);
+ dispatch(setShowAllAction(false));
+ }, [dispatch, refreshTrigger]);
// Build the current session conversation summary if it has messages
- const currentSessionConversation: ConversationSummary | null =
+ const currentSessionConversation = useMemo(() =>
currentMessages.length > 0 && currentConversationTitle ? {
id: currentConversationId,
title: currentConversationTitle,
lastMessage: currentMessages[currentMessages.length - 1]?.content?.substring(0, 100) || '',
timestamp: new Date().toISOString(),
messageCount: currentMessages.length,
- } : null;
+ } : null,
+ [currentMessages, currentConversationId, currentConversationTitle],
+ );
// Merge current session with saved conversations, updating the current one with live data
- const displayConversations = (() => {
- // Find if current conversation exists in saved list
+ const displayConversations = useMemo(() => {
const existingIndex = conversations.findIndex(c => c.id === currentConversationId);
if (existingIndex >= 0 && currentSessionConversation) {
- // Update the saved conversation with current session data (live message count)
const updated = [...conversations];
updated[existingIndex] = {
...updated[existingIndex],
@@ -178,15 +133,21 @@ export function ChatHistory({
};
return updated;
} else if (currentSessionConversation) {
- // Add current session at the top if it has messages and isn't saved yet
return [currentSessionConversation, ...conversations];
}
return conversations;
- })();
+ }, [conversations, currentConversationId, currentSessionConversation, currentMessages]);
- const visibleConversations = showAll ? displayConversations : displayConversations.slice(0, INITIAL_COUNT);
+ const visibleConversations = useMemo(
+ () => showAll ? displayConversations : displayConversations.slice(0, INITIAL_COUNT),
+ [showAll, displayConversations],
+ );
const hasMore = displayConversations.length > INITIAL_COUNT;
+ const handleRefreshConversations = useCallback(() => {
+ dispatch(fetchConversations());
+ }, [dispatch]);
+
return (
);
-}
-
-interface ConversationItemProps {
- conversation: ConversationSummary;
- isActive: boolean;
- onSelect: () => void;
- onDelete: (conversationId: string) => void;
- onRename: (conversationId: string, newTitle: string) => void;
- onRefresh: () => void;
- disabled?: boolean;
-}
-
-function ConversationItem({
- conversation,
- isActive,
- onSelect,
- onDelete,
- onRename,
- onRefresh,
- disabled = false,
-}: ConversationItemProps) {
- const [isMenuOpen, setIsMenuOpen] = useState(false);
- const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
- const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
- const [renameValue, setRenameValue] = useState(conversation.title || '');
- const [renameError, setRenameError] = useState
- 
-
- Contoso
-
-
-
-
- :
-
-
{/* Chat Panel - main area */}
{
+ /** Query parameters – appended to the URL automatically. */
+ params?: Record;
+ /** Per-request timeout in ms (default: client-level `timeout`). */
+ timeout?: number;
+}
+
+type RequestInterceptor = (url: string, init: RequestInit) => RequestInit | Promise;
+type ResponseInterceptor = (response: Response) => Response | Promise;
+
+/* ------------------------------------------------------------------ */
+/* HttpClient */
+/* ------------------------------------------------------------------ */
+
+export class HttpClient {
+ private baseUrl: string;
+ private defaultTimeout: number;
+ private requestInterceptors: RequestInterceptor[] = [];
+ private responseInterceptors: ResponseInterceptor[] = [];
+
+ constructor(baseUrl = '', timeout = 60_000) {
+ this.baseUrl = baseUrl;
+ this.defaultTimeout = timeout;
+ }
+
+ /* ---------- interceptor registration ---------- */
+
+ onRequest(fn: RequestInterceptor): void {
+ this.requestInterceptors.push(fn);
+ }
+
+ onResponse(fn: ResponseInterceptor): void {
+ this.responseInterceptors.push(fn);
+ }
+
+ /* ---------- public request helpers ---------- */
+
+ async get(path: string, opts: RequestOptions = {}): Promise {
+ const res = await this.request(path, { ...opts, method: 'GET' });
+ return res.json() as Promise;
+ }
+
+ async post(path: string, body?: unknown, opts: RequestOptions = {}): Promise {
+ const res = await this.request(path, {
+ ...opts,
+ method: 'POST',
+ body: body != null ? JSON.stringify(body) : undefined,
+ headers: {
+ ...(body != null ? { 'Content-Type': 'application/json' } : {}),
+ ...opts.headers,
+ },
+ });
+ return res.json() as Promise;
+ }
+
+ async put(path: string, body?: unknown, opts: RequestOptions = {}): Promise {
+ const res = await this.request(path, {
+ ...opts,
+ method: 'PUT',
+ body: body != null ? JSON.stringify(body) : undefined,
+ headers: {
+ ...(body != null ? { 'Content-Type': 'application/json' } : {}),
+ ...opts.headers,
+ },
+ });
+ return res.json() as Promise;
+ }
+
+ async delete(path: string, opts: RequestOptions = {}): Promise {
+ const res = await this.request(path, { ...opts, method: 'DELETE' });
+ return res.json() as Promise;
+ }
+
+ /**
+ * Low-level request that returns the raw `Response`.
+ * Useful for streaming (SSE) endpoints where the caller needs `response.body`.
+ */
+ async raw(path: string, opts: RequestOptions & { method?: string; body?: BodyInit | null } = {}): Promise {
+ return this.request(path, opts);
+ }
+
+ /* ---------- internal plumbing ---------- */
+
+ private buildUrl(path: string, params?: Record): string {
+ const url = `${this.baseUrl}${path}`;
+ if (!params) return url;
+
+ const qs = new URLSearchParams();
+ for (const [key, value] of Object.entries(params)) {
+ if (value !== undefined) {
+ qs.set(key, String(value));
+ }
+ }
+ const queryString = qs.toString();
+ return queryString ? `${url}?${queryString}` : url;
+ }
+
+ private async request(path: string, opts: RequestOptions & { method?: string; body?: BodyInit | null } = {}): Promise {
+ const { params, timeout, ...fetchOpts } = opts;
+ const url = this.buildUrl(path, params);
+ const effectiveTimeout = timeout ?? this.defaultTimeout;
+
+ // Build the init object
+ let init: RequestInit = { ...fetchOpts };
+
+ // Run request interceptors
+ for (const interceptor of this.requestInterceptors) {
+ init = await interceptor(url, init);
+ }
+
+ // Timeout via AbortController (merged with caller-supplied signal)
+ const timeoutCtrl = new AbortController();
+ const callerSignal = init.signal;
+
+ // If caller already passed a signal, listen for its abort
+ if (callerSignal) {
+ if (callerSignal.aborted) {
+ timeoutCtrl.abort(callerSignal.reason);
+ } else {
+ callerSignal.addEventListener('abort', () => timeoutCtrl.abort(callerSignal.reason), { once: true });
+ }
+ }
+
+ const timer = effectiveTimeout > 0
+ ? setTimeout(() => timeoutCtrl.abort(new DOMException('Request timed out', 'TimeoutError')), effectiveTimeout)
+ : undefined;
+
+ init.signal = timeoutCtrl.signal;
+
+ try {
+ let response = await fetch(url, init);
+
+ // Run response interceptors
+ for (const interceptor of this.responseInterceptors) {
+ response = await interceptor(response);
+ }
+
+ return response;
+ } finally {
+ if (timer !== undefined) clearTimeout(timer);
+ }
+ }
+}
+
+/* ------------------------------------------------------------------ */
+/* Singleton instance with default interceptors */
+/* ------------------------------------------------------------------ */
+
+const httpClient = new HttpClient('/api');
+
+/**
+ * Client for Azure platform endpoints (/.auth/me, etc.) — no base URL prefix.
+ * Shares the same interceptor pattern but targets the host root.
+ */
+export const platformClient = new HttpClient('', 10_000);
+
+// ---- request interceptor: auth headers ----
+httpClient.onRequest(async (_url, init) => {
+ const headers = new Headers(init.headers);
+
+ // Attach userId from Redux store (lazy import to avoid circular deps).
+ // Falls back to 'anonymous' if store isn't ready yet.
+ try {
+ const { store } = await import('../store/store');
+ const state = store?.getState?.();
+ const userId: string = state?.app?.userId ?? 'anonymous';
+ headers.set('X-Ms-Client-Principal-Id', userId);
+ } catch {
+ headers.set('X-Ms-Client-Principal-Id', 'anonymous');
+ }
+
+ return { ...init, headers };
+});
+
+// ---- response interceptor: uniform error handling ----
+httpClient.onResponse((response) => {
+ if (!response.ok) {
+ // Don't throw for streaming endpoints — callers handle those manually.
+ // Clone so the body remains readable for callers that want custom handling.
+ const cloned = response.clone();
+ console.error(
+ `[httpClient] ${response.status} ${response.statusText} – ${cloned.url}`,
+ );
+ }
+ return response;
+});
+
+export default httpClient;
diff --git a/src/app/frontend/src/api/index.ts b/src/app/frontend/src/api/index.ts
index 36781b77b..b0c229ce9 100644
--- a/src/app/frontend/src/api/index.ts
+++ b/src/app/frontend/src/api/index.ts
@@ -3,89 +3,124 @@
*/
import type {
+ CreativeBrief,
+ Product,
AgentResponse,
+ ParsedBriefResponse,
AppConfig,
- MessageRequest,
- MessageResponse,
} from '../types';
+import httpClient from './httpClient';
+export { default as httpClient } from './httpClient';
+import { getGenerationStage } from '../utils';
-const API_BASE = '/api';
+/** Normalize optional userId to a safe fallback. */
+function normalizeUserId(userId?: string): string {
+ return userId || 'anonymous';
+}
/**
- * Send a message or action to the /api/chat endpoint
+ * Get application configuration including feature flags
*/
-export async function sendMessage(
- request: MessageRequest,
- signal?: AbortSignal
-): Promise {
- const response = await fetch(`${API_BASE}/chat`, {
- signal,
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(request),
- });
-
- if (!response.ok) {
- throw new Error(`Message request failed: ${response.statusText}`);
- }
-
- return response.json();
+export async function getAppConfig(): Promise {
+ return httpClient.get('/config');
}
/**
- * Get application configuration including feature flags
+ * Parse a free-text creative brief into structured format
*/
-export async function getAppConfig(): Promise {
- const response = await fetch(`${API_BASE}/config`);
+export async function parseBrief(
+ briefText: string,
+ conversationId?: string,
+ userId?: string,
+ signal?: AbortSignal
+): Promise {
+ return httpClient.post('/chat', {
+ message: briefText,
+ conversation_id: conversationId,
+ user_id: normalizeUserId(userId),
+ }, { signal });
+}
- if (!response.ok) {
- throw new Error(`Failed to get config: ${response.statusText}`);
- }
+/**
+ * Confirm a parsed creative brief
+ */
+export async function confirmBrief(
+ brief: CreativeBrief,
+ conversationId?: string,
+ userId?: string
+): Promise<{ status: string; conversation_id: string; brief: CreativeBrief }> {
+ return httpClient.post('/brief/confirm', {
+ brief,
+ conversation_id: conversationId,
+ user_id: normalizeUserId(userId),
+ });
+}
- return response.json();
+/**
+ * Select or modify products via natural language
+ */
+export async function selectProducts(
+ request: string,
+ currentProducts: Product[],
+ conversationId?: string,
+ userId?: string,
+ signal?: AbortSignal
+): Promise<{ products: Product[]; action: string; message: string; conversation_id: string }> {
+ return httpClient.post('/chat', {
+ message: request,
+ current_products: currentProducts,
+ conversation_id: conversationId,
+ user_id: normalizeUserId(userId),
+ }, { signal });
}
/**
- * Request for content generation
+ * Stream chat messages from the agent orchestration.
+ *
+ * Note: The /chat endpoint returns JSON (not SSE), so we perform a standard
+ * POST request and yield the single AgentResponse result.
*/
-export interface GenerateRequest {
- conversation_id: string;
- user_id: string;
- brief: Record;
- products: Array>;
- generate_images: boolean;
+export async function* streamChat(
+ message: string,
+ conversationId?: string,
+ userId?: string,
+ signal?: AbortSignal
+): AsyncGenerator {
+ const result = await httpClient.post(
+ '/chat',
+ {
+ message,
+ conversation_id: conversationId,
+ user_id: normalizeUserId(userId),
+ },
+ { signal },
+ );
+
+ // Preserve async-iterator interface by yielding the single JSON response.
+ yield result;
}
/**
* Generate content from a confirmed brief
*/
export async function* streamGenerateContent(
- request: GenerateRequest,
+ brief: CreativeBrief,
+ products?: Product[],
+ generateImages: boolean = true,
+ conversationId?: string,
+ userId?: string,
signal?: AbortSignal
): AsyncGenerator {
// Use polling-based approach for reliability with long-running tasks
- const startResponse = await fetch(`${API_BASE}/generate/start`, {
- signal,
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- brief: request.brief,
- products: request.products || [],
- generate_images: request.generate_images,
- conversation_id: request.conversation_id,
- user_id: request.user_id || 'anonymous',
- }),
- });
-
- if (!startResponse.ok) {
- throw new Error(`Content generation failed to start: ${startResponse.statusText}`);
- }
-
- const startData = await startResponse.json();
+ const startData = await httpClient.post<{ task_id: string }>('/generate/start', {
+ brief,
+ products: products || [],
+ generate_images: generateImages,
+ conversation_id: conversationId,
+ user_id: normalizeUserId(userId),
+ }, { signal });
const taskId = startData.task_id;
- console.log(`Generation started with task ID: ${taskId}`);
-
// Yield initial status
yield {
type: 'status',
@@ -113,12 +148,10 @@ export async function* streamGenerateContent(
}
try {
- const statusResponse = await fetch(`${API_BASE}/generate/status/${taskId}`, { signal });
- if (!statusResponse.ok) {
- throw new Error(`Failed to get task status: ${statusResponse.statusText}`);
- }
-
- const statusData = await statusResponse.json();
+ const statusData = await httpClient.get<{ status: string; result?: unknown; error?: string }>(
+ `/generate/status/${taskId}`,
+ { signal },
+ );
if (statusData.status === 'completed') {
// Yield the final result
@@ -131,31 +164,8 @@ export async function* streamGenerateContent(
} else if (statusData.status === 'failed') {
throw new Error(statusData.error || 'Generation failed');
} else if (statusData.status === 'running') {
- // Determine progress stage based on elapsed time
- // Typical generation: 0-10s briefing, 10-25s copy, 25-45s image, 45-60s compliance
const elapsedSeconds = attempts;
- let stage: number;
- let stageMessage: string;
-
- if (elapsedSeconds < 10) {
- stage = 0;
- stageMessage = 'Analyzing creative brief...';
- } else if (elapsedSeconds < 25) {
- stage = 1;
- stageMessage = 'Generating marketing copy...';
- } else if (elapsedSeconds < 35) {
- stage = 2;
- stageMessage = 'Creating image prompt...';
- } else if (elapsedSeconds < 55) {
- stage = 3;
- stageMessage = 'Generating image with AI...';
- } else if (elapsedSeconds < 70) {
- stage = 4;
- stageMessage = 'Running compliance check...';
- } else {
- stage = 5;
- stageMessage = 'Finalizing content...';
- }
+ const { stage, message: stageMessage } = getGenerationStage(elapsedSeconds);
// Send status update every second for smoother progress
yield {
@@ -167,7 +177,6 @@ export async function* streamGenerateContent(
} as AgentResponse;
}
} catch (error) {
- console.error(`Error polling task ${taskId}:`, error);
// Continue polling on transient errors
if (attempts >= maxAttempts) {
throw error;
@@ -177,76 +186,73 @@ export async function* streamGenerateContent(
throw new Error('Generation timed out after 10 minutes');
}
-
/**
- * Poll for task completion using task_id
- * Used for both content generation and image regeneration
+ * Regenerate image with a modification request
+ * Used when user wants to change the generated image after initial content generation
*/
-export async function* pollTaskStatus(
- taskId: string,
+export async function* streamRegenerateImage(
+ modificationRequest: string,
+ _brief: CreativeBrief,
+ products?: Product[],
+ _previousImagePrompt?: string,
+ conversationId?: string,
+ userId?: string,
signal?: AbortSignal
): AsyncGenerator {
+ // Image regeneration uses the unified /chat endpoint with MODIFY_IMAGE intent,
+ // which returns a task_id for polling via /generate/status.
+ const startData = await httpClient.post<{ action_type: string; data: { task_id: string; poll_url: string }; conversation_id: string }>(
+ '/chat',
+ {
+ message: modificationRequest,
+ conversation_id: conversationId,
+ user_id: normalizeUserId(userId),
+ selected_products: products || [],
+ has_generated_content: true,
+ },
+ { signal },
+ );
+
+ const taskId = startData.data?.task_id;
+ if (!taskId) {
+ // If no task_id, the response is the final result itself
+ yield { type: 'agent_response', content: JSON.stringify(startData), is_final: true } as AgentResponse;
+ return;
+ }
+
+ yield { type: 'status', content: 'Regeneration started...', is_final: false } as AgentResponse;
+
let attempts = 0;
- const maxAttempts = 600; // 10 minutes max with 1-second polling
- const pollInterval = 1000; // 1 second
-
+ const maxAttempts = 600;
+ const pollInterval = 1000;
+
while (attempts < maxAttempts) {
if (signal?.aborted) {
- throw new DOMException('Operation cancelled by user', 'AbortError');
+ throw new DOMException('Regeneration cancelled by user', 'AbortError');
}
-
+
await new Promise(resolve => setTimeout(resolve, pollInterval));
attempts++;
-
+
if (signal?.aborted) {
- throw new DOMException('Operation cancelled by user', 'AbortError');
+ throw new DOMException('Regeneration cancelled by user', 'AbortError');
}
-
- try {
- const statusResponse = await fetch(`${API_BASE}/generate/status/${taskId}`, { signal });
- if (!statusResponse.ok) {
- throw new Error(`Failed to get task status: ${statusResponse.statusText}`);
- }
-
- const statusData = await statusResponse.json();
-
- if (statusData.status === 'completed') {
- yield {
- type: 'agent_response',
- content: JSON.stringify(statusData.result),
- is_final: true,
- } as AgentResponse;
- return;
- } else if (statusData.status === 'failed') {
- throw new Error(statusData.error || 'Task failed');
- } else {
- // Yield heartbeat with progress
- const elapsedSeconds = attempts;
- let stageMessage: string;
-
- if (elapsedSeconds < 10) {
- stageMessage = 'Starting regeneration...';
- } else if (elapsedSeconds < 30) {
- stageMessage = 'Generating new image...';
- } else if (elapsedSeconds < 50) {
- stageMessage = 'Processing image...';
- } else {
- stageMessage = 'Finalizing...';
- }
-
- yield {
- type: 'heartbeat',
- content: stageMessage,
- elapsed: elapsedSeconds,
- is_final: false,
- } as AgentResponse;
- }
- } catch (error) {
- if (attempts >= maxAttempts) {
- throw error;
- }
+
+ const statusData = await httpClient.get<{ status: string; result?: unknown; error?: string }>(
+ `/generate/status/${taskId}`,
+ { signal },
+ );
+
+ if (statusData.status === 'completed') {
+ yield { type: 'agent_response', content: JSON.stringify(statusData.result), is_final: true } as AgentResponse;
+ return;
+ } else if (statusData.status === 'failed') {
+ throw new Error(statusData.error || 'Regeneration failed');
+ } else {
+ const { stage, message: stageMessage } = getGenerationStage(attempts);
+ yield { type: 'heartbeat', content: stageMessage, count: stage, elapsed: attempts, is_final: false } as AgentResponse;
}
}
-
- throw new Error('Task timed out after 10 minutes');
+
+ throw new Error('Regeneration timed out after 10 minutes');
}
\ No newline at end of file
diff --git a/src/app/frontend/src/components/AppHeader.tsx b/src/app/frontend/src/components/AppHeader.tsx
new file mode 100644
index 000000000..810f0a072
--- /dev/null
+++ b/src/app/frontend/src/components/AppHeader.tsx
@@ -0,0 +1,68 @@
+import { memo } from 'react';
+import {
+ Text,
+ Avatar,
+ Button,
+ Tooltip,
+ tokens,
+} from '@fluentui/react-components';
+import {
+ History24Regular,
+ History24Filled,
+} from '@fluentui/react-icons';
+import ContosoLogo from '../styles/images/contoso.svg';
+
+export interface AppHeaderProps {
+ userName?: string | null;
+ showChatHistory: boolean;
+ onToggleChatHistory: () => void;
+}
+
+/**
+ * Top-level application header with logo, title, history toggle and avatar.
+ */
+export const AppHeader = memo(function AppHeader({ userName, showChatHistory, onToggleChatHistory }: AppHeaderProps) {
+ return (
+
+
+ );
+});
+AppHeader.displayName = 'AppHeader';
diff --git a/src/app/frontend/src/components/BriefReview.tsx b/src/app/frontend/src/components/BriefReview.tsx
index 6ea755905..b4a1ce1de 100644
--- a/src/app/frontend/src/components/BriefReview.tsx
+++ b/src/app/frontend/src/components/BriefReview.tsx
@@ -1,9 +1,11 @@
+import { memo, useMemo } from 'react';
import {
Button,
Text,
tokens,
} from '@fluentui/react-components';
import type { CreativeBrief } from '../types';
+import { BRIEF_FIELD_LABELS, BRIEF_DISPLAY_ORDER, BRIEF_FIELD_KEYS, AI_DISCLAIMER } from '../utils';
interface BriefReviewProps {
brief: CreativeBrief;
@@ -12,47 +14,22 @@ interface BriefReviewProps {
isAwaitingResponse?: boolean;
}
-// Mapping of field keys to user-friendly labels for the 9 key areas
-const fieldLabels: Record = {
- overview: 'Overview',
- objectives: 'Objectives',
- target_audience: 'Target Audience',
- key_message: 'Key Message',
- tone_and_style: 'Tone and Style',
- deliverable: 'Deliverable',
- timelines: 'Timelines',
- visual_guidelines: 'Visual Guidelines',
- cta: 'Call to Action',
-};
-
-export function BriefReview({
+export const BriefReview = memo(function BriefReview({
brief,
onConfirm,
onStartOver,
isAwaitingResponse = false,
}: BriefReviewProps) {
- const allFields: (keyof CreativeBrief)[] = [
- 'overview', 'objectives', 'target_audience', 'key_message',
- 'tone_and_style', 'deliverable', 'timelines', 'visual_guidelines', 'cta'
- ];
- const populatedFields = allFields.filter(key => brief[key]?.trim()).length;
- const missingFields = allFields.filter(key => !brief[key]?.trim());
-
- // Define the order and labels for display in the card
- const displayOrder: { key: keyof CreativeBrief; label: string }[] = [
- { key: 'overview', label: 'Campaign Objective' },
- { key: 'objectives', label: 'Objectives' },
- { key: 'target_audience', label: 'Target Audience' },
- { key: 'key_message', label: 'Key Message' },
- { key: 'tone_and_style', label: 'Tone & Style' },
- { key: 'visual_guidelines', label: 'Visual Guidelines' },
- { key: 'deliverable', label: 'Deliverables' },
- { key: 'timelines', label: 'Timelines' },
- { key: 'cta', label: 'Call to Action' },
- ];
+ const { populatedFields, missingFields, populatedDisplayFields } = useMemo(() => {
+ const populated = BRIEF_FIELD_KEYS.filter(key => brief[key]?.trim()).length;
+ const missing = BRIEF_FIELD_KEYS.filter(key => !brief[key]?.trim());
- // Filter to only populated fields
- const populatedDisplayFields = displayOrder.filter(({ key }) => brief[key]?.trim());
+ return {
+ populatedFields: populated,
+ missingFields: missing,
+ populatedDisplayFields: BRIEF_DISPLAY_ORDER.filter(({ key }) => brief[key]?.trim()),
+ };
+ }, [brief]);
return (
);
-}
+});
+BriefReview.displayName = 'BriefReview';
diff --git a/src/app/frontend/src/components/ChatHistory.tsx b/src/app/frontend/src/components/ChatHistory.tsx
index f258d2a48..c393fdec9 100644
--- a/src/app/frontend/src/components/ChatHistory.tsx
+++ b/src/app/frontend/src/components/ChatHistory.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useEffect, useCallback, useMemo, memo } from 'react';
import {
Button,
Text,
@@ -10,7 +10,6 @@ import {
MenuPopover,
MenuList,
MenuItem,
- Input,
Dialog,
DialogSurface,
DialogTitle,
@@ -22,154 +21,110 @@ import {
Chat24Regular,
MoreHorizontal20Regular,
Compose20Regular,
- Delete20Regular,
- Edit20Regular,
DismissCircle20Regular,
} from '@fluentui/react-icons';
-
-interface ConversationSummary {
- id: string;
- title: string;
- lastMessage: string;
- timestamp: string;
- messageCount: number;
-}
+import {
+ useAppDispatch,
+ useAppSelector,
+ fetchConversations,
+ deleteConversation,
+ renameConversation,
+ clearAllConversations,
+ setShowAll as setShowAllAction,
+ setIsClearAllDialogOpen,
+ selectConversations,
+ selectIsHistoryLoading,
+ selectHistoryError,
+ selectShowAll,
+ selectIsClearAllDialogOpen,
+ selectIsClearing,
+ selectConversationId,
+ selectConversationTitle,
+ selectMessages,
+ selectIsLoading,
+ selectHistoryRefreshTrigger,
+} from '../store';
+import type { ConversationSummary } from '../store';
+import { ConversationItem } from './ConversationItem';
interface ChatHistoryProps {
- currentConversationId: string;
- currentConversationTitle?: string | null;
- currentMessages?: { role: string; content: string }[]; // Current session messages
onSelectConversation: (conversationId: string) => void;
onNewConversation: () => void;
- refreshTrigger?: number; // Increment to trigger refresh
- isGenerating?: boolean; // True when content generation is in progress
}
-export function ChatHistory({
- currentConversationId,
- currentConversationTitle,
- currentMessages = [],
+export const ChatHistory = memo(function ChatHistory({
onSelectConversation,
onNewConversation,
- refreshTrigger = 0,
- isGenerating = false
}: ChatHistoryProps) {
- const [conversations, setConversations] = useState
+
+
+ Contoso
+
+
+
+
+
+ :
+
+
I've captured {populatedFields} of 9 key areas. Would you like to add more details?
- You are missing: {missingFields.map(f => fieldLabels[f]).join(', ')}.
+ You are missing: {missingFields.map(f => BRIEF_FIELD_LABELS[f]).join(', ')}.
You can tell me things like:
You can tell me things like:
-
@@ -177,9 +154,10 @@ export function BriefReview({
paddingTop: '8px',
}}>
}
- onClick={() => setIsClearAllDialogOpen(true)}
+ onClick={() => dispatch(setIsClearAllDialogOpen(true))}
disabled={displayConversations.length === 0}
>
Clear all chat history
@@ -276,7 +237,7 @@ export function ChatHistory({
}}>
{error}
Retry
@@ -304,7 +265,7 @@ export function ChatHistory({
onSelect={() => onSelectConversation(conversation.id)}
onDelete={handleDeleteConversation}
onRename={handleRenameConversation}
- onRefresh={loadConversations}
+ onRefresh={handleRefreshConversations}
disabled={isGenerating}
/>
))}
@@ -327,7 +288,7 @@ export function ChatHistory({
}}>
{hasMore && (
setShowAll(!showAll)}
+ onClick={isGenerating ? undefined : () => dispatch(setShowAllAction(!showAll))}
style={{
fontSize: '13px',
color: isGenerating ? tokens.colorNeutralForegroundDisabled : tokens.colorBrandForeground1,
@@ -339,15 +300,15 @@ export function ChatHistory({
)}
{/* Clear All Confirmation Dialog */}
-
-
- {conversation.title || 'Untitled'}
-
-
-
-
-
-
+});
-
-
- );
-}
+ChatHistory.displayName = 'ChatHistory';
diff --git a/src/app/frontend/src/components/ChatInput.tsx b/src/app/frontend/src/components/ChatInput.tsx
new file mode 100644
index 000000000..5a3efb41f
--- /dev/null
+++ b/src/app/frontend/src/components/ChatInput.tsx
@@ -0,0 +1,149 @@
+import { memo, useState, useCallback } from 'react';
+import {
+ Button,
+ Text,
+ Tooltip,
+ tokens,
+} from '@fluentui/react-components';
+import { AI_DISCLAIMER } from '../utils';
+import {
+ Send20Regular,
+ Add20Regular,
+} from '@fluentui/react-icons';
+
+export interface ChatInputProps {
+ /** Called with the trimmed message text when the user submits. */
+ onSendMessage: (message: string) => void;
+ /** Called when the user clicks the "New chat" button. */
+ onNewConversation?: () => void;
+ /** Disables the input and buttons while a request is in flight. */
+ disabled?: boolean;
+ /** Allows the parent to drive the input value (e.g. from WelcomeCard suggestions). */
+ value?: string;
+ /** Notifies the parent when the user types. */
+ onChange?: (value: string) => void;
+}
+
+/**
+ * Chat input bar with send & new-chat buttons, plus an AI disclaimer.
+ */
+export const ChatInput = memo(function ChatInput({
+ onSendMessage,
+ onNewConversation,
+ disabled = false,
+ value: controlledValue,
+ onChange: controlledOnChange,
+}: ChatInputProps) {
+ const [internalValue, setInternalValue] = useState('');
+
+ // Support both controlled & uncontrolled modes
+ const inputValue = controlledValue ?? internalValue;
+ const setInputValue = useCallback((v: string) => {
+ controlledOnChange?.(v);
+ if (controlledValue === undefined) setInternalValue(v);
+ }, [controlledOnChange, controlledValue]);
+
+ const handleSubmit = useCallback((e: React.FormEvent) => {
+ e.preventDefault();
+ if (inputValue.trim() && !disabled) {
+ onSendMessage(inputValue.trim());
+ setInputValue('');
+ }
+ }, [inputValue, disabled, onSendMessage, setInputValue]);
+
+ const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmit(e);
+ }
+ }, [handleSubmit]);
+
+ return (
+
+ {/* Input Box */}
+
+ {AI_DISCLAIMER}
+
+
+ );
+});
+ChatInput.displayName = 'ChatInput';
diff --git a/src/app/frontend/src/components/ChatPanel.tsx b/src/app/frontend/src/components/ChatPanel.tsx
index bf757acf9..a10709cae 100644
--- a/src/app/frontend/src/components/ChatPanel.tsx
+++ b/src/app/frontend/src/components/ChatPanel.tsx
@@ -1,105 +1,82 @@
-import { useState, useRef, useEffect } from 'react';
-import {
- Button,
- Text,
- Badge,
- tokens,
- Tooltip,
-} from '@fluentui/react-components';
-import {
- Send20Regular,
- Stop24Regular,
- Add20Regular,
- Copy20Regular,
-} from '@fluentui/react-icons';
-import ReactMarkdown from 'react-markdown';
-import type { ChatMessage, CreativeBrief, Product, GeneratedContent } from '../types';
+import { useState, useCallback, memo } from 'react';
+import type { Product } from '../types';
import { BriefReview } from './BriefReview';
import { ConfirmedBriefView } from './ConfirmedBriefView';
import { SelectedProductView } from './SelectedProductView';
import { ProductReview } from './ProductReview';
import { InlineContentPreview } from './InlineContentPreview';
import { WelcomeCard } from './WelcomeCard';
+import { MessageBubble } from './MessageBubble';
+import { TypingIndicator } from './TypingIndicator';
+import { ChatInput } from './ChatInput';
+import { useAutoScroll } from '../hooks';
+import {
+ useAppSelector,
+ selectMessages,
+ selectIsLoading,
+ selectGenerationStatusLabel,
+ selectPendingBrief,
+ selectConfirmedBrief,
+ selectGeneratedContent,
+ selectSelectedProducts,
+ selectAvailableProducts,
+ selectImageGenerationEnabled,
+} from '../store';
interface ChatPanelProps {
- messages: ChatMessage[];
onSendMessage: (message: string) => void;
- isLoading: boolean;
- generationStatus?: string;
onStopGeneration?: () => void;
- // Inline component props
- pendingBrief?: CreativeBrief | null;
- confirmedBrief?: CreativeBrief | null;
- generatedContent?: GeneratedContent | null;
- selectedProducts?: Product[];
- availableProducts?: Product[];
onBriefConfirm?: () => void;
onBriefCancel?: () => void;
onGenerateContent?: () => void;
onRegenerateContent?: () => void;
- onProductsStartOver?: () => void;
onProductSelect?: (product: Product) => void;
- // Feature flags
- imageGenerationEnabled?: boolean;
- // New chat
onNewConversation?: () => void;
}
-export function ChatPanel({
- messages,
+export const ChatPanel = memo(function ChatPanel({
onSendMessage,
- isLoading,
- generationStatus,
onStopGeneration,
- pendingBrief,
- confirmedBrief,
- generatedContent,
- selectedProducts = [],
- availableProducts = [],
onBriefConfirm,
onBriefCancel,
onGenerateContent,
onRegenerateContent,
- onProductsStartOver,
onProductSelect,
- imageGenerationEnabled = true,
onNewConversation,
}: ChatPanelProps) {
- const [inputValue, setInputValue] = useState('');
- const messagesEndRef = useRef
+ setInputValue(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder="Type a message"
+ disabled={disabled}
+ style={{
+ flex: 1,
+ border: 'none',
+ outline: 'none',
+ backgroundColor: 'transparent',
+ fontFamily: 'var(--fontFamilyBase)',
+ fontSize: '14px',
+ color: tokens.colorNeutralForeground1,
+ }}
+ />
+
+ {/* Icons on the right */}
+
+
+ {/* Disclaimer */}
+
+
+ }
+ size="small"
+ onClick={onNewConversation}
+ disabled={disabled}
+ style={{
+ minWidth: '32px',
+ height: '32px',
+ color: tokens.colorNeutralForeground3,
+ }}
+ />
+
+
+ {/* Vertical divider */}
+
+
+ }
+ size="small"
+ onClick={handleSubmit}
+ disabled={!inputValue.trim() || disabled}
+ style={{
+ minWidth: '32px',
+ height: '32px',
+ color: inputValue.trim() ? tokens.colorBrandForeground1 : tokens.colorNeutralForeground4,
+ }}
+ />
+
+
{/* Messages Area */}
)}
@@ -145,8 +122,7 @@ export function ChatPanel({
{})}
+ onConfirm={onGenerateContent!}
isAwaitingResponse={isLoading}
onProductSelect={onProductSelect}
disabled={isLoading}
@@ -156,79 +132,20 @@ export function ChatPanel({
{/* Inline Content Preview */}
{showContentPreview && (
0 ? selectedProducts[0] : undefined}
imageGenerationEnabled={imageGenerationEnabled}
/>
)}
- {/* Loading/Typing Indicator - Coral Style */}
+ {/* Loading/Typing Indicator */}
{isLoading && (
-
- {/* Input Area - Simple single-line like Figma */}
-
-
- {generationStatus || 'Thinking...'}
-
- {onStopGeneration && (
-
- }
- onClick={onStopGeneration}
- size="small"
- style={{
- color: tokens.colorPaletteRedForeground1,
- minWidth: '32px',
- marginLeft: 'auto',
- }}
- >
- Stop
-
-
- )}
-
+
-
-
-
-
-
-
-
- {/* Input Box */}
-
- AI generated content may be incorrect
-
-
+ {/* Input Area */}
+
- setInputValue(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter' && !e.shiftKey) {
- e.preventDefault();
- handleSubmit(e);
- }
- }}
- placeholder="Type a message"
- disabled={isLoading}
- style={{
- flex: 1,
- border: 'none',
- outline: 'none',
- backgroundColor: 'transparent',
- fontFamily: 'var(--fontFamilyBase)',
- fontSize: '14px',
- color: tokens.colorNeutralForeground1,
- }}
- />
-
- {/* Icons on the right */}
-
-
- {/* Disclaimer - Outside the input box */}
-
-
- }
- size="small"
- onClick={onNewConversation}
- disabled={isLoading || messages.length === 0}
- style={{
- minWidth: '32px',
- height: '32px',
- color: tokens.colorNeutralForeground3,
- }}
- />
-
-
- {/* Vertical divider */}
-
-
- }
- size="small"
- onClick={handleSubmit}
- disabled={!inputValue.trim() || isLoading}
- style={{
- minWidth: '32px',
- height: '32px',
- color: inputValue.trim() ? tokens.colorBrandForeground1 : tokens.colorNeutralForeground4,
- }}
- />
-
-
- {/* Agent badge for assistant messages */}
- {!isUser && message.agent && (
-
- {message.agent}
-
- )}
-
- {/* Message content with markdown */}
-
- );
-}
+ChatPanel.displayName = 'ChatPanel';
diff --git a/src/app/frontend/src/components/ComplianceSection.tsx b/src/app/frontend/src/components/ComplianceSection.tsx
new file mode 100644
index 000000000..216a11f60
--- /dev/null
+++ b/src/app/frontend/src/components/ComplianceSection.tsx
@@ -0,0 +1,193 @@
+import { memo } from 'react';
+import { AI_DISCLAIMER } from '../utils';
+import {
+ Text,
+ Badge,
+ Button,
+ Tooltip,
+ Accordion,
+ AccordionItem,
+ AccordionHeader,
+ AccordionPanel,
+ tokens,
+} from '@fluentui/react-components';
+import {
+ ArrowSync20Regular,
+ CheckmarkCircle20Regular,
+ Warning20Regular,
+ Info20Regular,
+ ErrorCircle20Regular,
+ Copy20Regular,
+} from '@fluentui/react-icons';
+import type { ComplianceViolation } from '../types';
+import { ViolationCard } from './ViolationCard';
+
+export interface ComplianceSectionProps {
+ violations: ComplianceViolation[];
+ requiresModification: boolean;
+ /** Callback to copy generated text. */
+ onCopyText: () => void;
+ /** Callback to regenerate content. */
+ onRegenerate: () => void;
+ /** Whether regeneration is in progress. */
+ isLoading?: boolean;
+ /** Whether the copy-text button shows "Copied!". */
+ copied?: boolean;
+}
+
+/**
+ * Compliance callout (action-needed / review-recommended), status footer
+ * with badges and actions, and the collapsible violations accordion.
+ */
+export const ComplianceSection = memo(function ComplianceSection({
+ violations,
+ requiresModification,
+ onCopyText,
+ onRegenerate,
+ isLoading,
+ copied = false,
+}: ComplianceSectionProps) {
+ return (
+ <>
+ {/* User guidance callout */}
+ {requiresModification ? (
+
-
- {message.content}
-
+});
- {/* Footer for assistant messages - Coral style */}
- {!isUser && (
-
-
-
- AI-generated content may be incorrect
-
-
-
- )}
-
-
- }
- size="small"
- onClick={onCopy}
- style={{
- minWidth: '28px',
- height: '28px',
- color: tokens.colorNeutralForeground3,
- }}
- />
-
-
-
+
+ Action needed: This content has compliance issues that must be
+ addressed before use. Please review the details in the Compliance Guidelines
+ section below and regenerate with modifications, or manually edit the content to
+ resolve the flagged items.
+
+
+ ) : violations.length > 0 ? (
+
+
+ Optional review: This content is approved but has minor
+ suggestions for improvement. You can use it as-is or review the recommendations
+ in the Compliance Guidelines section below.
+
+
+ ) : null}
+
+ {/* Footer with actions */}
+
+
+
+ {/* AI disclaimer */}
+
+ {requiresModification ? (
+
+
+
+
+ }
+ size="small"
+ onClick={onCopyText}
+ style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
+ />
+
+
+ }
+ size="small"
+ onClick={onRegenerate}
+ disabled={isLoading}
+ style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
+ />
+
+
+
+ {requiresModification ? (
+
+ Compliance Guidelines ({violations.length}{' '}
+ {violations.length === 1 ? 'item' : 'items'})
+
+
+
+ {violations.map((violation, index) => (
+
+
- {briefFields.map(({ key, label }) => {
+ {BRIEF_DISPLAY_ORDER.map(({ key, label }) => {
const value = brief[key];
if (!value?.trim()) return null;
@@ -88,4 +78,5 @@ export function ConfirmedBriefView({ brief }: ConfirmedBriefViewProps) {
);
-}
+});
+ConfirmedBriefView.displayName = 'ConfirmedBriefView';
diff --git a/src/app/frontend/src/components/ConversationItem.tsx b/src/app/frontend/src/components/ConversationItem.tsx
new file mode 100644
index 000000000..c40d89d1d
--- /dev/null
+++ b/src/app/frontend/src/components/ConversationItem.tsx
@@ -0,0 +1,292 @@
+import { memo, useState, useEffect, useRef, useCallback } from 'react';
+import {
+ Button,
+ Text,
+ tokens,
+ Menu,
+ MenuTrigger,
+ MenuPopover,
+ MenuList,
+ MenuItem,
+ Input,
+ Dialog,
+ DialogSurface,
+ DialogTitle,
+ DialogBody,
+ DialogActions,
+ DialogContent,
+} from '@fluentui/react-components';
+import {
+ MoreHorizontal20Regular,
+ Delete20Regular,
+ Edit20Regular,
+} from '@fluentui/react-icons';
+import type { ConversationSummary } from '../store';
+
+/* ------------------------------------------------------------------ */
+/* Validation constants & helper */
+/* ------------------------------------------------------------------ */
+
+const NAME_MIN_LENGTH = 5;
+const NAME_MAX_LENGTH = 50;
+
+/** Returns an error message, or `''` when the value is valid. */
+function validateConversationName(value: string): string {
+ const trimmed = value.trim();
+ if (trimmed === '') return 'Conversation name cannot be empty or contain only spaces';
+ if (trimmed.length < NAME_MIN_LENGTH) return `Conversation name must be at least ${NAME_MIN_LENGTH} characters`;
+ if (value.length > NAME_MAX_LENGTH) return `Conversation name cannot exceed ${NAME_MAX_LENGTH} characters`;
+ if (!/[a-zA-Z0-9]/.test(trimmed)) return 'Conversation name must contain at least one letter or number';
+ return '';
+}
+
+export interface ConversationItemProps {
+ conversation: ConversationSummary;
+ isActive: boolean;
+ onSelect: () => void;
+ onDelete: (conversationId: string) => void;
+ onRename: (conversationId: string, newTitle: string) => void;
+ onRefresh: () => void;
+ disabled?: boolean;
+}
+
+/**
+ * A single row in the chat-history sidebar —
+ * title, context-menu (rename / delete) and confirmation dialogs.
+ */
+export const ConversationItem = memo(function ConversationItem({
+ conversation,
+ isActive,
+ onSelect,
+ onDelete,
+ onRename,
+ onRefresh,
+ disabled = false,
+}: ConversationItemProps) {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+ const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+ const [renameValue, setRenameValue] = useState(conversation.title || '');
+ const [renameError, setRenameError] = useState
+
+ {conversation.title || 'Untitled'}
+
+
+
+
+
+ {/* Rename dialog */}
+
+
+ {/* Delete dialog */}
+
+
+ );
+});
+ConversationItem.displayName = 'ConversationItem';
diff --git a/src/app/frontend/src/components/ImagePreviewCard.tsx b/src/app/frontend/src/components/ImagePreviewCard.tsx
new file mode 100644
index 000000000..b4e1ee50a
--- /dev/null
+++ b/src/app/frontend/src/components/ImagePreviewCard.tsx
@@ -0,0 +1,99 @@
+import { memo } from 'react';
+import {
+ Button,
+ Text,
+ Tooltip,
+ tokens,
+} from '@fluentui/react-components';
+import { ArrowDownload20Regular } from '@fluentui/react-icons';
+
+export interface ImagePreviewCardProps {
+ imageUrl: string;
+ altText?: string;
+ productName?: string;
+ tagline?: string;
+ isSmall?: boolean;
+ onDownload: () => void;
+}
+
+/**
+ * Image preview with download button overlay and a product-name / tagline
+ * text banner below the image.
+ */
+export const ImagePreviewCard = memo(function ImagePreviewCard({
+ imageUrl,
+ altText = 'Generated marketing image',
+ productName = 'Your Product',
+ tagline,
+ isSmall = false,
+ onDownload,
+}: ImagePreviewCardProps) {
+ return (
+
+ {/* Image container */}
+
+ );
+});
+ImagePreviewCard.displayName = 'ImagePreviewCard';
diff --git a/src/app/frontend/src/components/InlineContentPreview.tsx b/src/app/frontend/src/components/InlineContentPreview.tsx
index 3ee0eead2..dc0f27491 100644
--- a/src/app/frontend/src/components/InlineContentPreview.tsx
+++ b/src/app/frontend/src/components/InlineContentPreview.tsx
@@ -1,27 +1,15 @@
-import { useState, useEffect } from 'react';
+import { memo, useCallback, useMemo } from 'react';
import {
- Button,
Text,
- Badge,
Divider,
tokens,
- Tooltip,
- Accordion,
- AccordionItem,
- AccordionHeader,
- AccordionPanel,
} from '@fluentui/react-components';
-import {
- ArrowSync20Regular,
- CheckmarkCircle20Regular,
- Warning20Regular,
- Info20Regular,
- ErrorCircle20Regular,
- Copy20Regular,
- ArrowDownload20Regular,
- ShieldError20Regular,
-} from '@fluentui/react-icons';
-import type { GeneratedContent, ComplianceViolation, Product } from '../types';
+import { ShieldError20Regular } from '@fluentui/react-icons';
+import type { GeneratedContent, Product } from '../types';
+import { useWindowSize, useCopyToClipboard } from '../hooks';
+import { isContentFilterError, getErrorMessage, downloadImage } from '../utils';
+import { ImagePreviewCard } from './ImagePreviewCard';
+import { ComplianceSection } from './ComplianceSection';
interface InlineContentPreviewProps {
content: GeneratedContent;
@@ -31,20 +19,7 @@ interface InlineContentPreviewProps {
imageGenerationEnabled?: boolean;
}
-// Custom hook for responsive breakpoints
-function useWindowSize() {
- const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
-
- useEffect(() => {
- const handleResize = () => setWindowWidth(window.innerWidth);
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, []);
-
- return windowWidth;
-}
-
-export function InlineContentPreview({
+export const InlineContentPreview = memo(function InlineContentPreview({
content,
onRegenerate,
isLoading,
@@ -52,141 +27,36 @@ export function InlineContentPreview({
imageGenerationEnabled = true,
}: InlineContentPreviewProps) {
const { text_content, image_content, violations, requires_modification, error, image_error, text_error } = content;
- const [copied, setCopied] = useState(false);
+ const { copied, copy } = useCopyToClipboard();
const windowWidth = useWindowSize();
const isSmall = windowWidth < 768;
- // Helper to detect content filter errors
- const isContentFilterError = (errorMessage?: string): boolean => {
- if (!errorMessage) return false;
- const filterPatterns = [
- 'content_filter', 'ContentFilter', 'content management policy',
- 'ResponsibleAI', 'responsible_ai_policy', 'content filtering',
- 'filtered', 'safety system', 'self_harm', 'sexual', 'violence', 'hate',
- ];
- return filterPatterns.some(pattern =>
- errorMessage.toLowerCase().includes(pattern.toLowerCase())
- );
- };
-
- const getErrorMessage = (errorMessage?: string): { title: string; description: string } => {
- if (isContentFilterError(errorMessage)) {
- return {
- title: 'Content Filtered',
- description: 'Your request was blocked by content safety filters. Please try modifying your creative brief.',
- };
- }
- return {
- title: 'Generation Failed',
- description: errorMessage || 'An error occurred. Please try again.',
- };
- };
-
- const handleCopyText = () => {
+ const handleCopyText = useCallback(() => {
const textToCopy = [
text_content?.headline && `✨ ${text_content.headline} ✨`,
text_content?.body,
text_content?.tagline,
].filter(Boolean).join('\n\n');
-
- navigator.clipboard.writeText(textToCopy);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- };
+ copy(textToCopy);
+ }, [text_content, copy]);
- const handleDownloadImage = async () => {
+ const handleDownloadImage = useCallback(() => {
if (!image_content?.image_url) return;
-
- try {
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
- if (!ctx) return;
-
- const img = new Image();
- img.crossOrigin = 'anonymous';
-
- img.onload = () => {
- // Calculate banner height
- const bannerHeight = Math.max(60, img.height * 0.1);
- const padding = Math.max(16, img.width * 0.03);
-
- // Set canvas size to include bottom banner
- canvas.width = img.width;
- canvas.height = img.height + bannerHeight;
-
- // Draw the image at the top
- ctx.drawImage(img, 0, 0);
-
- // Draw white banner at the bottom
- ctx.fillStyle = '#ffffff';
- ctx.fillRect(0, img.height, img.width, bannerHeight);
-
- // Draw banner border line
- ctx.strokeStyle = '#e5e5e5';
- ctx.lineWidth = 1;
- ctx.beginPath();
- ctx.moveTo(0, img.height);
- ctx.lineTo(img.width, img.height);
- ctx.stroke();
-
- // Draw text in the banner
- const headlineText = selectedProduct?.product_name || text_content?.headline || 'Your Product';
- const headlineFontSize = Math.max(18, Math.min(36, img.width * 0.04));
- const taglineText = text_content?.tagline || '';
- const taglineFontSize = Math.max(12, Math.min(20, img.width * 0.025));
-
- // Draw headline
- ctx.font = `600 ${headlineFontSize}px Georgia, serif`;
- ctx.fillStyle = '#1a1a1a';
- ctx.fillText(headlineText, padding, img.height + padding + headlineFontSize * 0.8, img.width - padding * 2);
-
- // Draw tagline if available
- if (taglineText) {
- ctx.font = `400 italic ${taglineFontSize}px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
- ctx.fillStyle = '#666666';
- ctx.fillText(taglineText, padding, img.height + padding + headlineFontSize + taglineFontSize * 0.8 + 4, img.width - padding * 2);
- }
-
- canvas.toBlob((blob) => {
- if (blob) {
- const url = URL.createObjectURL(blob);
- const link = document.createElement('a');
- link.href = url;
- link.download = 'generated-marketing-image.png';
- link.click();
- URL.revokeObjectURL(url);
- }
- }, 'image/png');
- };
-
- img.onerror = () => {
- if (image_content?.image_url) {
- const link = document.createElement('a');
- link.href = image_content.image_url;
- link.download = 'generated-image.png';
- link.click();
- }
- };
-
- img.src = image_content.image_url;
- } catch {
- if (image_content?.image_url) {
- const link = document.createElement('a');
- link.href = image_content.image_url;
- link.download = 'generated-image.png';
- link.click();
- }
- }
- };
+ downloadImage(
+ image_content.image_url,
+ selectedProduct?.product_name || text_content?.headline || 'Your Product',
+ text_content?.tagline,
+ );
+ }, [image_content, selectedProduct, text_content]);
// Get product display name
- const getProductDisplayName = () => {
+ const productDisplayName = useMemo(() => {
if (selectedProduct) {
return selectedProduct.product_name;
}
return text_content?.headline || 'Your Content';
- };
+ }, [selectedProduct, text_content?.headline]);
return (
+ 
+
+
+ }
+ size="small"
+ onClick={onDownload}
+ style={{
+ position: 'absolute',
+ bottom: '8px',
+ right: '8px',
+ backgroundColor: 'rgba(255,255,255,0.9)',
+ minWidth: '32px',
+ }}
+ />
+
+
+
+ {/* Text banner below image */}
+
+
+ {productName}
+
+ {tagline && (
+
+ {tagline}
+
+ )}
+
+
- ✨ Discover the serene elegance of {getProductDisplayName()}.
+ ✨ Discover the serene elegance of {productDisplayName}.
)}
@@ -285,74 +155,16 @@ export function InlineContentPreview({
)}
- {/* Image Preview - with bottom banner for text */}
+ {/* Image Preview */}
{imageGenerationEnabled && image_content?.image_url && (
-
- {/* Image container */}
-
+
- 
-
- {/* Download button on image */}
-
- }
- size="small"
- onClick={handleDownloadImage}
- style={{
- position: 'absolute',
- bottom: '8px',
- right: '8px',
- backgroundColor: 'rgba(255,255,255,0.9)',
- minWidth: '32px',
- }}
- />
-
-
-
- {/* Text banner below image */}
-
-
- {selectedProduct?.product_name || text_content?.headline || 'Your Product'}
-
- {text_content?.tagline && (
-
- {text_content.tagline}
-
- )}
-
-
-
- Action needed: This content has compliance issues that must be addressed before use.
- Please review the details in the Compliance Guidelines section below and regenerate with modifications,
- or manually edit the content to resolve the flagged items.
-
-
- ) : violations.length > 0 ? (
-
-
- Optional review: This content is approved but has minor suggestions for improvement.
- You can use it as-is or review the recommendations in the Compliance Guidelines section below.
-
-
- ) : null}
-
- {/* Footer with actions */}
-
-
-
- {/* AI disclaimer */}
-
- {/* Approval Status Badge */}
- {requires_modification ? (
-
-
-
-
- }
- size="small"
- onClick={handleCopyText}
- style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
- />
-
-
- }
- size="small"
- onClick={onRegenerate}
- disabled={isLoading}
- style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
- />
-
-
-
- {requires_modification ? (
-
- Compliance Guidelines ({violations.length} {violations.length === 1 ? 'item' : 'items'})
-
-
-
- {violations.map((violation, index) => (
-
-
- {icon}
-
);
-}
+});
+InlineContentPreview.displayName = 'InlineContentPreview';
diff --git a/src/app/frontend/src/components/MessageBubble.tsx b/src/app/frontend/src/components/MessageBubble.tsx
new file mode 100644
index 000000000..d4509a0c5
--- /dev/null
+++ b/src/app/frontend/src/components/MessageBubble.tsx
@@ -0,0 +1,120 @@
+import { memo, useCallback } from 'react';
+import {
+ Text,
+ Badge,
+ Button,
+ Tooltip,
+ tokens,
+} from '@fluentui/react-components';
+import { Copy20Regular } from '@fluentui/react-icons';
+import ReactMarkdown from 'react-markdown';
+import type { ChatMessage } from '../types';
+import { useCopyToClipboard } from '../hooks';
+import { AI_DISCLAIMER } from '../utils';
+
+export interface MessageBubbleProps {
+ message: ChatMessage;
+}
+
+/**
+ * Renders a single chat message — user or assistant.
+ *
+ * - User messages: right-aligned, brand-coloured bubble.
+ * - Assistant messages: left-aligned, full-width, with optional agent badge,
+ * markdown rendering, copy button and AI disclaimer.
+ */
+export const MessageBubble = memo(function MessageBubble({ message }: MessageBubbleProps) {
+ const isUser = message.role === 'user';
+ const { copied, copy } = useCopyToClipboard();
+ const handleCopy = useCallback(() => copy(message.content), [copy, message.content]);
+
+ return (
+
-
- {violation.message}
-
-
- {violation.suggestion}
-
-
+ {/* Compliance + Footer + Accordion */}
+
+ {/* Agent badge for assistant messages */}
+ {!isUser && message.agent && (
+
+ {message.agent}
+
+ )}
+
+ {/* Message content with markdown */}
+
+ );
+});
+MessageBubble.displayName = 'MessageBubble';
diff --git a/src/app/frontend/src/components/ProductCard.tsx b/src/app/frontend/src/components/ProductCard.tsx
new file mode 100644
index 000000000..873ae6620
--- /dev/null
+++ b/src/app/frontend/src/components/ProductCard.tsx
@@ -0,0 +1,136 @@
+import { memo } from 'react';
+import {
+ Text,
+ tokens,
+} from '@fluentui/react-components';
+import { Box20Regular } from '@fluentui/react-icons';
+import type { Product } from '../types';
+
+export interface ProductCardProps {
+ product: Product;
+ /** Visual size variant — "normal" for product review grid, "compact" for selected-product view. */
+ size?: 'normal' | 'compact';
+ /** Whether the card is currently selected (shows brand border). */
+ isSelected?: boolean;
+ /** Click handler. Omit for read-only cards. */
+ onClick?: () => void;
+ disabled?: boolean;
+}
+
+/**
+ * Reusable product card with image/placeholder, name, tags and price.
+ * Used by both ProductReview (selectable) and SelectedProductView (read-only).
+ */
+export const ProductCard = memo(function ProductCard({
+ product,
+ size = 'normal',
+ isSelected = false,
+ onClick,
+ disabled = false,
+}: ProductCardProps) {
+ const isCompact = size === 'compact';
+ const imgSize = isCompact ? 56 : 80;
+ const isInteractive = !!onClick && !disabled;
+
+ return (
+
+ {message.content}
+
+ {/* Footer for assistant messages */}
+ {!isUser && (
+
+
+
+ {AI_DISCLAIMER}
+
+
+
+ )}
+
+
+ }
+ size="small"
+ onClick={handleCopy}
+ style={{
+ minWidth: '28px',
+ height: '28px',
+ color: tokens.colorNeutralForeground3,
+ }}
+ />
+
+
+
+ {/* Image or placeholder */}
+ {product.image_url ? (
+ 
+ ) : (
+
+ );
+});
+ProductCard.displayName = 'ProductCard';
diff --git a/src/app/frontend/src/components/ProductReview.tsx b/src/app/frontend/src/components/ProductReview.tsx
index 9c0d9e960..a7fa7e9d3 100644
--- a/src/app/frontend/src/components/ProductReview.tsx
+++ b/src/app/frontend/src/components/ProductReview.tsx
@@ -1,3 +1,4 @@
+import { memo, useMemo, useCallback } from 'react';
import {
Button,
Text,
@@ -5,41 +6,46 @@ import {
} from '@fluentui/react-components';
import {
Sparkle20Regular,
- Box20Regular,
} from '@fluentui/react-icons';
import type { Product } from '../types';
+import { AI_DISCLAIMER } from '../utils';
+import { ProductCard } from './ProductCard';
interface ProductReviewProps {
products: Product[];
onConfirm: () => void;
- onStartOver: () => void;
isAwaitingResponse?: boolean;
availableProducts?: Product[];
onProductSelect?: (product: Product) => void;
disabled?: boolean;
}
-export function ProductReview({
+export const ProductReview = memo(function ProductReview({
products,
onConfirm,
- onStartOver: _onStartOver,
isAwaitingResponse = false,
availableProducts = [],
onProductSelect,
disabled = false,
}: ProductReviewProps) {
- const displayProducts = availableProducts.length > 0 ? availableProducts : products;
- const selectedProductIds = new Set(products.map(p => p.sku || p.product_name));
+ const displayProducts = useMemo(
+ () => availableProducts.length > 0 ? availableProducts : products,
+ [availableProducts, products],
+ );
+ const selectedProductIds = useMemo(
+ () => new Set(products.map(p => p.sku || p.product_name)),
+ [products],
+ );
- const isProductSelected = (product: Product): boolean => {
+ const isProductSelected = useCallback((product: Product): boolean => {
return selectedProductIds.has(product.sku || product.product_name);
- };
+ }, [selectedProductIds]);
- const handleProductClick = (product: Product) => {
+ const handleProductClick = useCallback((product: Product) => {
if (onProductSelect) {
onProductSelect(product);
}
- };
+ }, [onProductSelect]);
return (
+
+ )}
+
+ {/* Product info */}
+
+
+ {product.product_name}
+
+
+ {product.tags || product.description || 'soft white, airy, minimal, fresh'}
+
+
+ ${product.price?.toFixed(2) || '59.95'} USD
+
+
+
{displayProducts.map((product, index) => (
-
- AI-generated content may be incorrect
-
-
-
- );
-}
-
-interface ProductCardGridProps {
- product: Product;
- isSelected: boolean;
- onClick: () => void;
- disabled?: boolean;
-}
-
-function ProductCardGrid({ product, isSelected, onClick, disabled = false }: ProductCardGridProps) {
- return (
-
- {product.image_url ? (
-
- ) : (
-
);
-}
+});
+ProductReview.displayName = 'ProductReview';
diff --git a/src/app/frontend/src/components/SelectedProductView.tsx b/src/app/frontend/src/components/SelectedProductView.tsx
index a4c4540f6..743a5f86f 100644
--- a/src/app/frontend/src/components/SelectedProductView.tsx
+++ b/src/app/frontend/src/components/SelectedProductView.tsx
@@ -1,19 +1,19 @@
+import { memo } from 'react';
import {
- Text,
Badge,
tokens,
} from '@fluentui/react-components';
import {
Checkmark20Regular,
- Box20Regular,
} from '@fluentui/react-icons';
import type { Product } from '../types';
+import { ProductCard } from './ProductCard';
interface SelectedProductViewProps {
products: Product[];
}
-export function SelectedProductView({ products }: SelectedProductViewProps) {
+export const SelectedProductView = memo(function SelectedProductView({ products }: SelectedProductViewProps) {
if (products.length === 0) return null;
return (
@@ -50,89 +50,14 @@ export function SelectedProductView({ products }: SelectedProductViewProps) {
overflowY: 'auto',
}}>
{products.map((product, index) => (
-
-
- )}
-
-
-
- {product.product_name}
-
-
- {product.tags || product.description || 'soft white, airy, minimal, fresh'}
-
-
- ${product.price?.toFixed(2) || '59.95'} USD
+ {AI_DISCLAIMER}
- {product.image_url ? (
-
- ) : (
-
+
-
- )}
-
-
-
- {product.product_name}
-
-
- {product.tags || product.description || 'soft white, airy, minimal, fresh'}
-
-
- ${product.price?.toFixed(2) || '59.95'} USD
-
-
-
+
+
+ 
+
+
+
+ {title}
+
+
+
+
+ {statusText || 'Thinking...'}
+
+
+ {onStop && (
+
+ }
+ onClick={onStop}
+ size="small"
+ style={{
+ color: tokens.colorPaletteRedForeground1,
+ minWidth: '32px',
+ marginLeft: 'auto',
+ }}
+ >
+ Stop
+
+
+ )}
+
+ );
+});
+TypingIndicator.displayName = 'TypingIndicator';
diff --git a/src/app/frontend/src/components/ViolationCard.tsx b/src/app/frontend/src/components/ViolationCard.tsx
new file mode 100644
index 000000000..479bbbfd6
--- /dev/null
+++ b/src/app/frontend/src/components/ViolationCard.tsx
@@ -0,0 +1,64 @@
+import { memo, useMemo } from 'react';
+import {
+ Text,
+} from '@fluentui/react-components';
+import {
+ ErrorCircle20Regular,
+ Warning20Regular,
+ Info20Regular,
+} from '@fluentui/react-icons';
+import type { ComplianceViolation } from '../types';
+
+export interface ViolationCardProps {
+ violation: ComplianceViolation;
+}
+
+/**
+ * A single compliance violation row with severity-coloured icon and background.
+ */
+export const ViolationCard = memo(function ViolationCard({ violation }: ViolationCardProps) {
+ const { icon, bg } = useMemo(() => {
+ switch (violation.severity) {
+ case 'error':
+ return {
+ icon:
+
+
+
+
+
+
+
+
+ {icon}
+
+ );
+});
+ViolationCard.displayName = 'ViolationCard';
diff --git a/src/app/frontend/src/components/WelcomeCard.tsx b/src/app/frontend/src/components/WelcomeCard.tsx
index ab5740708..b56b781c4 100644
--- a/src/app/frontend/src/components/WelcomeCard.tsx
+++ b/src/app/frontend/src/components/WelcomeCard.tsx
@@ -1,26 +1,24 @@
+import { memo, useMemo } from 'react';
import {
- Card,
Text,
tokens,
} from '@fluentui/react-components';
+import { SuggestionCard } from './SuggestionCard';
import FirstPromptIcon from '../styles/images/firstprompt.png';
import SecondPromptIcon from '../styles/images/secondprompt.png';
-interface SuggestionCard {
+interface SuggestionData {
title: string;
- prompt: string;
icon: string;
}
-const suggestions: SuggestionCard[] = [
+const suggestions: SuggestionData[] = [
{
title: "I need to create a social media post about paint products for home remodels. The campaign is titled \"Brighten Your Springtime\" and the audience is new homeowners. I need marketing copy plus an image. The image should be an informal living room with tasteful furnishings.",
- prompt: "I need to create a social media post about paint products for home remodels. The campaign is titled \"Brighten Your Springtime\" and the audience is new homeowners. I need marketing copy plus an image. The image should be an informal living room with tasteful furnishings.",
icon: FirstPromptIcon,
},
{
title: "Generate a social media campaign with ad copy and an image. This is for \"Back to School\" and the audience is parents of school age children. Tone is playful and humorous. The image must have minimal kids accessories in a children's bedroom. Show the room in a wide view.",
- prompt: "Generate a social media campaign with ad copy and an image. This is for \"Back to School\" and the audience is parents of school age children. Tone is playful and humorous. The image must have minimal kids accessories in a children's bedroom. Show the room in a wide view.",
icon: SecondPromptIcon,
}
];
@@ -30,8 +28,12 @@ interface WelcomeCardProps {
currentInput?: string;
}
-export function WelcomeCard({ onSuggestionClick, currentInput = '' }: WelcomeCardProps) {
- const selectedIndex = suggestions.findIndex(s => s.prompt === currentInput);
+export const WelcomeCard = memo(function WelcomeCard({ onSuggestionClick, currentInput = '' }: WelcomeCardProps) {
+ const selectedIndex = useMemo(
+ () => suggestions.findIndex(s => s.title === currentInput),
+ [currentInput],
+ );
+
return (
+
+ {violation.message}
+
+
+ {violation.suggestion}
+
+
+ {
const isSelected = index === selectedIndex;
return (
- onSuggestionClick(suggestion.prompt)}
- style={{
- padding: 'clamp(12px, 2vw, 16px)',
- cursor: 'pointer',
- backgroundColor: isSelected ? tokens.colorBrandBackground2 : tokens.colorNeutralBackground1,
- border: 'none',
- borderRadius: '16px',
- transition: 'all 0.2s ease',
- }}
- onMouseEnter={(e) => {
- if (!isSelected) {
- e.currentTarget.style.backgroundColor = tokens.colorBrandBackground2;
- }
- }}
- onMouseLeave={(e) => {
- if (!isSelected) {
- e.currentTarget.style.backgroundColor = tokens.colorNeutralBackground1;
- }
- }}
- >
-
+ title={suggestion.title}
+ icon={suggestion.icon}
+ isSelected={isSelected}
+ onClick={() => onSuggestionClick(suggestion.title)}
+ />
);
})}
);
-}
+});
+WelcomeCard.displayName = 'WelcomeCard';
diff --git a/src/app/frontend/src/hooks/index.ts b/src/app/frontend/src/hooks/index.ts
new file mode 100644
index 000000000..f23f96430
--- /dev/null
+++ b/src/app/frontend/src/hooks/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Barrel export for all custom hooks.
+ * Import hooks from '../hooks' instead of individual files.
+ */
+export { useAutoScroll } from './useAutoScroll';
+export { useChatOrchestrator } from './useChatOrchestrator';
+export { useContentGeneration } from './useContentGeneration';
+export { useConversationActions } from './useConversationActions';
+export { useCopyToClipboard } from './useCopyToClipboard';
+export { useWindowSize } from './useWindowSize';
diff --git a/src/app/frontend/src/hooks/useAutoScroll.ts b/src/app/frontend/src/hooks/useAutoScroll.ts
new file mode 100644
index 000000000..8b1a2a9d1
--- /dev/null
+++ b/src/app/frontend/src/hooks/useAutoScroll.ts
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Scrolls a sentinel element into view whenever any dependency changes.
+ *
+ * @param deps - React dependency list that triggers the scroll.
+ * @returns A ref to attach to a zero-height element at the bottom of the
+ * scrollable container (the "scroll anchor").
+ *
+ * @example
+ * ```tsx
+ * const endRef = useAutoScroll([messages, isLoading]);
+ * return (
+ *
-
-
- 
-
-
-
- {suggestion.title}
-
-
-
+ * {messages.map(m =>
+ * );
+ * ```
+ */
+export function useAutoScroll(deps: React.DependencyList) {
+ const endRef = useRef