- * {messages.map(m =>
- * );
- * ```
- */
-export function useAutoScroll(deps: React.DependencyList) {
- const endRef = useRef
- {/* Header */}
-
- );
-}
-
-export default App;
diff --git a/src/App/src/api/httpClient.ts b/src/App/src/api/httpClient.ts
deleted file mode 100644
index 6aaf83b48..000000000
--- a/src/App/src/api/httpClient.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Centralized HTTP client with interceptors.
- *
- * - Singleton — use the default `httpClient` export everywhere.
- * - Request interceptors automatically attach auth headers
- * (X-Ms-Client-Principal-Id) so callers never need to remember.
- * - Response interceptors provide uniform error handling.
- * - Built-in query-param serialization, configurable timeout, and base URL.
- */
-
-/* ------------------------------------------------------------------ */
-/* Types */
-/* ------------------------------------------------------------------ */
-
-/** Options accepted by every request method. */
-export interface RequestOptions extends Omit
- {/* Chat Panel - main area */}
-
-
-
-
- {/* Chat History Sidebar - RIGHT side */}
- {showChatHistory && (
-
-
- )}
-
- 
-
- Contoso
-
-
-
-
-
- :
-
-
-
- );
-});
-
-ChatHistory.displayName = 'ChatHistory';
diff --git a/src/App/src/components/ChatInput.tsx b/src/App/src/components/ChatInput.tsx
deleted file mode 100644
index 5a3efb41f..000000000
--- a/src/App/src/components/ChatInput.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-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 (
-
-
- Chat History
-
-
-
-
-
-
-
- {isLoading ? (
- onSelectConversation(conversation.id)}
- onDelete={handleDeleteConversation}
- onRename={handleRenameConversation}
- onRefresh={handleRefreshConversations}
- disabled={isGenerating}
- />
- ))}
-
- )}
-
-
-
- {/* Clear All Confirmation Dialog */}
-
-
-
- ) : error ? (
-
- {error}
-
- Retry
-
-
- ) : displayConversations.length === 0 ? (
-
- No conversations yet
-
- ) : (
- <>
- {visibleConversations.map((conversation) => (
-
- {hasMore && (
- dispatch(setShowAllAction(!showAll))}
- style={{
- fontSize: '13px',
- color: isGenerating ? tokens.colorNeutralForegroundDisabled : tokens.colorBrandForeground1,
- cursor: isGenerating ? 'not-allowed' : 'pointer',
- pointerEvents: isGenerating ? 'none' : 'auto',
- }}
- >
- {showAll ? 'Show less' : 'See all'}
-
- )}
-
-
-
- {/* Input Box */}
-
- {AI_DISCLAIMER}
-
-
- );
-});
-ChatInput.displayName = 'ChatInput';
diff --git a/src/App/src/components/ChatPanel.tsx b/src/App/src/components/ChatPanel.tsx
deleted file mode 100644
index a10709cae..000000000
--- a/src/App/src/components/ChatPanel.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-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 {
- onSendMessage: (message: string) => void;
- onStopGeneration?: () => void;
- onBriefConfirm?: () => void;
- onBriefCancel?: () => void;
- onGenerateContent?: () => void;
- onRegenerateContent?: () => void;
- onProductSelect?: (product: Product) => void;
- onNewConversation?: () => void;
-}
-
-export const ChatPanel = memo(function ChatPanel({
- onSendMessage,
- onStopGeneration,
- onBriefConfirm,
- onBriefCancel,
- onGenerateContent,
- onRegenerateContent,
- onProductSelect,
- onNewConversation,
-}: ChatPanelProps) {
- const messages = useAppSelector(selectMessages);
- const isLoading = useAppSelector(selectIsLoading);
- const generationStatus = useAppSelector(selectGenerationStatusLabel);
- const pendingBrief = useAppSelector(selectPendingBrief);
- const confirmedBrief = useAppSelector(selectConfirmedBrief);
- const generatedContent = useAppSelector(selectGeneratedContent);
- const selectedProducts = useAppSelector(selectSelectedProducts);
- const availableProducts = useAppSelector(selectAvailableProducts);
- const imageGenerationEnabled = useAppSelector(selectImageGenerationEnabled);
-
- const [inputValue, setInputValue] = useState('');
-
- // Auto-scroll to bottom when messages or state changes
- const messagesEndRef = useAutoScroll([
- messages, pendingBrief, confirmedBrief, generatedContent, isLoading, generationStatus,
- ]);
-
- // Determine if we should show inline components
- const showBriefReview = !!(pendingBrief && onBriefConfirm && onBriefCancel);
- const showProductReview = !!(confirmedBrief && !generatedContent && onGenerateContent);
- const showContentPreview = !!(generatedContent && onRegenerateContent);
- const showWelcome = messages.length === 0 && !showBriefReview && !showProductReview && !showContentPreview;
-
- // Handle suggestion click from welcome card
- const handleSuggestionClick = useCallback((prompt: string) => {
- setInputValue(prompt);
- }, []);
-
- return (
-
- 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 */}
-
- );
-});
-
-ChatPanel.displayName = 'ChatPanel';
diff --git a/src/App/src/components/ComplianceSection.tsx b/src/App/src/components/ComplianceSection.tsx
deleted file mode 100644
index 216a11f60..000000000
--- a/src/App/src/components/ComplianceSection.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-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 ? (
-
- {showWelcome ? (
- 0 ? selectedProducts[0] : undefined}
- imageGenerationEnabled={imageGenerationEnabled}
- />
- )}
-
- {/* Loading/Typing Indicator */}
- {isLoading && (
-
-
- {/* Input Area */}
-
-
- 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) => (
-
-
-
- {conversation.title || 'Untitled'}
-
-
-
-
-
- {/* Rename dialog */}
-
-
- {/* Delete dialog */}
-
-
- );
-});
-ConversationItem.displayName = 'ConversationItem';
diff --git a/src/App/src/components/ImagePreviewCard.tsx b/src/App/src/components/ImagePreviewCard.tsx
deleted file mode 100644
index b4e1ee50a..000000000
--- a/src/App/src/components/ImagePreviewCard.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-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/src/components/InlineContentPreview.tsx b/src/App/src/components/InlineContentPreview.tsx
deleted file mode 100644
index dc0f27491..000000000
--- a/src/App/src/components/InlineContentPreview.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { memo, useCallback, useMemo } from 'react';
-import {
- Text,
- Divider,
- tokens,
-} from '@fluentui/react-components';
-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;
- onRegenerate: () => void;
- isLoading?: boolean;
- selectedProduct?: Product;
- imageGenerationEnabled?: boolean;
-}
-
-export const InlineContentPreview = memo(function InlineContentPreview({
- content,
- onRegenerate,
- isLoading,
- selectedProduct,
- imageGenerationEnabled = true,
-}: InlineContentPreviewProps) {
- const { text_content, image_content, violations, requires_modification, error, image_error, text_error } = content;
- const { copied, copy } = useCopyToClipboard();
- const windowWidth = useWindowSize();
-
- const isSmall = windowWidth < 768;
-
- const handleCopyText = useCallback(() => {
- const textToCopy = [
- text_content?.headline && `✨ ${text_content.headline} ✨`,
- text_content?.body,
- text_content?.tagline,
- ].filter(Boolean).join('\n\n');
- copy(textToCopy);
- }, [text_content, copy]);
-
- const handleDownloadImage = useCallback(() => {
- if (!image_content?.image_url) return;
- 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 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}
-
- )}
-
-
- {/* Selection confirmation */}
- {selectedProduct && (
-
- You selected "{selectedProduct.product_name}". Here's what I've created – let me know if you need anything changed.
-
- )}
-
- {/* Sparkle Headline - Figma style */}
- {text_content?.headline && (
-
- ✨ Discover the serene elegance of {productDisplayName}.
-
- )}
-
- {/* Body Copy */}
- {text_content?.body && (
-
- {text_content.body}
-
- )}
-
- {/* Hashtags */}
- {text_content?.tagline && (
-
- {text_content.tagline}
-
- )}
-
- {/* Error Banner */}
- {(error || text_error) && !violations.some(v => v.message.toLowerCase().includes('filter')) && (
-
- );
-});
-InlineContentPreview.displayName = 'InlineContentPreview';
diff --git a/src/App/src/components/MessageBubble.tsx b/src/App/src/components/MessageBubble.tsx
deleted file mode 100644
index d4509a0c5..000000000
--- a/src/App/src/components/MessageBubble.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-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 (
-
-
- )}
-
- {/* Image Preview */}
- {imageGenerationEnabled && image_content?.image_url && (
-
-
- {getErrorMessage(error || text_error).title}
-
-
- {getErrorMessage(error || text_error).description}
-
-
-
-
- {getErrorMessage(image_error || error).title}
-
-
- Click Regenerate to try again
-
-
- )}
-
-
- {/* Agent badge for assistant messages */}
- {!isUser && message.agent && (
-
- {message.agent}
-
- )}
-
- {/* Message content with markdown */}
-
- );
-});
-MessageBubble.displayName = 'MessageBubble';
diff --git a/src/App/src/components/ProductCard.tsx b/src/App/src/components/ProductCard.tsx
deleted file mode 100644
index 873ae6620..000000000
--- a/src/App/src/components/ProductCard.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-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/src/components/ProductReview.tsx b/src/App/src/components/ProductReview.tsx
deleted file mode 100644
index a7fa7e9d3..000000000
--- a/src/App/src/components/ProductReview.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { memo, useMemo, useCallback } from 'react';
-import {
- Button,
- Text,
- tokens,
-} from '@fluentui/react-components';
-import {
- Sparkle20Regular,
-} from '@fluentui/react-icons';
-import type { Product } from '../types';
-import { AI_DISCLAIMER } from '../utils';
-import { ProductCard } from './ProductCard';
-
-interface ProductReviewProps {
- products: Product[];
- onConfirm: () => void;
- isAwaitingResponse?: boolean;
- availableProducts?: Product[];
- onProductSelect?: (product: Product) => void;
- disabled?: boolean;
-}
-
-export const ProductReview = memo(function ProductReview({
- products,
- onConfirm,
- isAwaitingResponse = false,
- availableProducts = [],
- onProductSelect,
- disabled = false,
-}: ProductReviewProps) {
- 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 = useCallback((product: Product): boolean => {
- return selectedProductIds.has(product.sku || product.product_name);
- }, [selectedProductIds]);
-
- 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
-
-
-
-
- );
-});
-ProductReview.displayName = 'ProductReview';
diff --git a/src/App/src/components/SelectedProductView.tsx b/src/App/src/components/SelectedProductView.tsx
deleted file mode 100644
index 743a5f86f..000000000
--- a/src/App/src/components/SelectedProductView.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { memo } from 'react';
-import {
- Badge,
- tokens,
-} from '@fluentui/react-components';
-import {
- Checkmark20Regular,
-} from '@fluentui/react-icons';
-import type { Product } from '../types';
-import { ProductCard } from './ProductCard';
-
-interface SelectedProductViewProps {
- products: Product[];
-}
-
-export const SelectedProductView = memo(function SelectedProductView({ products }: SelectedProductViewProps) {
- if (products.length === 0) return null;
-
- return (
-
-
- Here is the list of available paints:
-
-
-
- {displayProducts.length > 0 ? (
-
- {displayProducts.map((product, index) => (
- handleProductClick(product)}
- disabled={disabled}
- />
- ))}
-
- ) : (
-
-
- No products available.
-
-
- )}
-
- {displayProducts.length > 0 && (
-
- }
- onClick={onConfirm}
- disabled={isAwaitingResponse || products.length === 0}
- size="small"
- >
- Generate Content
-
- {products.length === 0 && (
-
- Select a product to continue
-
- )}
-
- )}
-
-
-
- {AI_DISCLAIMER}
-
-
-
-
- );
-});
-SelectedProductView.displayName = 'SelectedProductView';
diff --git a/src/App/src/components/SuggestionCard.tsx b/src/App/src/components/SuggestionCard.tsx
deleted file mode 100644
index 55e8e1570..000000000
--- a/src/App/src/components/SuggestionCard.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { memo } from 'react';
-import {
- Card,
- Text,
- tokens,
-} from '@fluentui/react-components';
-
-export interface SuggestionCardProps {
- title: string;
- icon: string;
- isSelected?: boolean;
- onClick: () => void;
-}
-
-/**
- * A single suggestion prompt card shown on the WelcomeCard screen.
- * Handles its own hover / selected styling.
- */
-export const SuggestionCard = memo(function SuggestionCard({
- title,
- icon,
- isSelected = false,
- onClick,
-}: SuggestionCardProps) {
- return (
-
-
-
-
- {products.map((product, index) => (
-
-
-
-
- 
-
-
-
- {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/src/components/ViolationCard.tsx b/src/App/src/components/ViolationCard.tsx
deleted file mode 100644
index 479bbbfd6..000000000
--- a/src/App/src/components/ViolationCard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-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/src/components/WelcomeCard.tsx b/src/App/src/components/WelcomeCard.tsx
deleted file mode 100644
index b56b781c4..000000000
--- a/src/App/src/components/WelcomeCard.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { memo, useMemo } from 'react';
-import {
- 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 SuggestionData {
- title: string;
- icon: string;
-}
-
-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.",
- 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.",
- icon: SecondPromptIcon,
- }
-];
-
-interface WelcomeCardProps {
- onSuggestionClick: (prompt: string) => void;
- currentInput?: string;
-}
-
-export const WelcomeCard = memo(function WelcomeCard({ onSuggestionClick, currentInput = '' }: WelcomeCardProps) {
- const selectedIndex = useMemo(
- () => suggestions.findIndex(s => s.title === currentInput),
- [currentInput],
- );
-
- return (
-
-
- {violation.message}
-
-
- {violation.suggestion}
-
-
-
- {/* Welcome card with suggestions inside */}
-
- );
-});
-WelcomeCard.displayName = 'WelcomeCard';
diff --git a/src/App/src/hooks/index.ts b/src/App/src/hooks/index.ts
deleted file mode 100644
index f23f96430..000000000
--- a/src/App/src/hooks/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 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/src/hooks/useAutoScroll.ts b/src/App/src/hooks/useAutoScroll.ts
deleted file mode 100644
index 8b1a2a9d1..000000000
--- a/src/App/src/hooks/useAutoScroll.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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 (
- *
- {/* Header with icon and welcome message */}
-
-
-
- Welcome to your Content Generation Accelerator
-
-
- Here are the options I can assist you with today
-
-
-
- {/* Suggestion cards - vertical layout */}
-
- {suggestions.map((suggestion, index) => {
- const isSelected = index === selectedIndex;
- return (
- onSuggestionClick(suggestion.title)}
- />
- );
- })}
-
-
- * {messages.map(m =>
- * );
- * ```
- */
-export function useAutoScroll(deps: React.DependencyList) {
- const endRef = useRef
+ {/* Header */}
+
+
+
+ {/* Main Content */}
+
+ );
+}
+
+export default App;
diff --git a/src/app/frontend/src/api/index.ts b/src/app/frontend/src/api/index.ts
new file mode 100644
index 000000000..36781b77b
--- /dev/null
+++ b/src/app/frontend/src/api/index.ts
@@ -0,0 +1,252 @@
+/**
+ * API service for interacting with the Content Generation backend
+ */
+
+import type {
+ AgentResponse,
+ AppConfig,
+ MessageRequest,
+ MessageResponse,
+} from '../types';
+
+const API_BASE = '/api';
+
+/**
+ * Send a message or action to the /api/chat endpoint
+ */
+export async function sendMessage(
+ request: MessageRequest,
+ signal?: AbortSignal
+): Promise
+
+
+ Contoso
+
+
+
+
+ :
+
+
+ {/* Chat Panel - main area */}
+
+
+
+
+ {/* Chat History Sidebar - RIGHT side */}
+ {showChatHistory && (
+
+
+ )}
+
I've captured {populatedFields} of 9 key areas. Would you like to add more details?
- You are missing: {missingFields.map(f => BRIEF_FIELD_LABELS[f]).join(', ')}.
+ You are missing: {missingFields.map(f => fieldLabels[f]).join(', ')}.
You can tell me things like:
);
-});
-BriefReview.displayName = 'BriefReview';
+}
diff --git a/src/app/frontend/src/components/ChatHistory.tsx b/src/app/frontend/src/components/ChatHistory.tsx
new file mode 100644
index 000000000..f258d2a48
--- /dev/null
+++ b/src/app/frontend/src/components/ChatHistory.tsx
@@ -0,0 +1,643 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+ Button,
+ Text,
+ Spinner,
+ tokens,
+ Link,
+ Menu,
+ MenuTrigger,
+ MenuPopover,
+ MenuList,
+ MenuItem,
+ Input,
+ Dialog,
+ DialogSurface,
+ DialogTitle,
+ DialogBody,
+ DialogActions,
+ DialogContent,
+} from '@fluentui/react-components';
+import {
+ Chat24Regular,
+ MoreHorizontal20Regular,
+ Compose20Regular,
+ Delete20Regular,
+ Edit20Regular,
+ DismissCircle20Regular,
+} from '@fluentui/react-icons';
+
+interface ConversationSummary {
+ id: string;
+ title: string;
+ lastMessage: string;
+ timestamp: string;
+ messageCount: number;
+}
+
+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 = [],
+ onSelectConversation,
+ onNewConversation,
+ refreshTrigger = 0,
+ isGenerating = false
+}: ChatHistoryProps) {
+ const [conversations, setConversations] = useStateYou can tell me things like:
-
@@ -154,10 +177,9 @@ export const BriefReview = memo(function BriefReview({
paddingTop: '8px',
}}>
+
+ );
+}
+
+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
+
+ Chat History
+
+
+
+
+
+
+
+ {isLoading ? (
+ onSelectConversation(conversation.id)}
+ onDelete={handleDeleteConversation}
+ onRename={handleRenameConversation}
+ onRefresh={loadConversations}
+ disabled={isGenerating}
+ />
+ ))}
+
+ )}
+
+
+
+ {/* Clear All Confirmation Dialog */}
+
+
+
+ ) : error ? (
+
+ {error}
+
+ Retry
+
+
+ ) : displayConversations.length === 0 ? (
+
+ No conversations yet
+
+ ) : (
+ <>
+ {visibleConversations.map((conversation) => (
+
+ {hasMore && (
+ setShowAll(!showAll)}
+ style={{
+ fontSize: '13px',
+ color: isGenerating ? tokens.colorNeutralForegroundDisabled : tokens.colorBrandForeground1,
+ cursor: isGenerating ? 'not-allowed' : 'pointer',
+ pointerEvents: isGenerating ? 'none' : 'auto',
+ }}
+ >
+ {showAll ? 'Show less' : 'See all'}
+
+ )}
+
+
+
+
+ {conversation.title || 'Untitled'}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/frontend/src/components/ChatPanel.tsx b/src/app/frontend/src/components/ChatPanel.tsx
new file mode 100644
index 000000000..bf757acf9
--- /dev/null
+++ b/src/app/frontend/src/components/ChatPanel.tsx
@@ -0,0 +1,437 @@
+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 { BriefReview } from './BriefReview';
+import { ConfirmedBriefView } from './ConfirmedBriefView';
+import { SelectedProductView } from './SelectedProductView';
+import { ProductReview } from './ProductReview';
+import { InlineContentPreview } from './InlineContentPreview';
+import { WelcomeCard } from './WelcomeCard';
+
+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,
+ 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
+ {/* Messages Area */}
+
+ );
+}
+
+// Copy function for messages
+const handleCopy = (text: string) => {
+ navigator.clipboard.writeText(text).catch((err) => {
+ console.error('Failed to copy text:', err);
+ });
+};
+
+function MessageBubble({ message }: { message: ChatMessage }) {
+ const isUser = message.role === 'user';
+ const [copied, setCopied] = useState(false);
+
+ const onCopy = () => {
+ handleCopy(message.content);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+ {showWelcome ? (
+ {})}
+ isAwaitingResponse={isLoading}
+ onProductSelect={onProductSelect}
+ disabled={isLoading}
+ />
+ )}
+
+ {/* Inline Content Preview */}
+ {showContentPreview && (
+ 0 ? selectedProducts[0] : undefined}
+ imageGenerationEnabled={imageGenerationEnabled}
+ />
+ )}
+
+ {/* Loading/Typing Indicator - Coral Style */}
+ {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
+
+
+
+ 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 */}
+
+ );
+}
diff --git a/src/App/src/components/ConfirmedBriefView.tsx b/src/app/frontend/src/components/ConfirmedBriefView.tsx
similarity index 74%
rename from src/App/src/components/ConfirmedBriefView.tsx
rename to src/app/frontend/src/components/ConfirmedBriefView.tsx
index e6697151a..e7feb9416 100644
--- a/src/App/src/components/ConfirmedBriefView.tsx
+++ b/src/app/frontend/src/components/ConfirmedBriefView.tsx
@@ -1,4 +1,3 @@
-import { memo } from 'react';
import {
Text,
Badge,
@@ -8,13 +7,24 @@ import {
Checkmark20Regular,
} from '@fluentui/react-icons';
import type { CreativeBrief } from '../types';
-import { BRIEF_DISPLAY_ORDER } from '../utils';
interface ConfirmedBriefViewProps {
brief: CreativeBrief;
}
-export const ConfirmedBriefView = memo(function ConfirmedBriefView({ brief }: ConfirmedBriefViewProps) {
+const briefFields: { key: keyof CreativeBrief; label: string }[] = [
+ { key: 'overview', label: 'Overview' },
+ { key: 'objectives', label: 'Objectives' },
+ { key: 'target_audience', label: 'Target Audience' },
+ { key: 'key_message', label: 'Key Message' },
+ { key: 'tone_and_style', label: 'Tone & Style' },
+ { key: 'deliverable', label: 'Deliverable' },
+ { key: 'timelines', label: 'Timelines' },
+ { key: 'visual_guidelines', label: 'Visual Guidelines' },
+ { key: 'cta', label: 'Call to Action' },
+];
+
+export function ConfirmedBriefView({ brief }: ConfirmedBriefViewProps) {
return (
+
+ {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,
+ }}
+ />
+
+
+
- {BRIEF_DISPLAY_ORDER.map(({ key, label }) => {
+ {briefFields.map(({ key, label }) => {
const value = brief[key];
if (!value?.trim()) return null;
@@ -78,5 +88,4 @@ export const ConfirmedBriefView = memo(function ConfirmedBriefView({ brief }: Co
);
-});
-ConfirmedBriefView.displayName = 'ConfirmedBriefView';
+}
diff --git a/src/app/frontend/src/components/InlineContentPreview.tsx b/src/app/frontend/src/components/InlineContentPreview.tsx
new file mode 100644
index 000000000..3ee0eead2
--- /dev/null
+++ b/src/app/frontend/src/components/InlineContentPreview.tsx
@@ -0,0 +1,561 @@
+import { useState, useEffect } 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';
+
+interface InlineContentPreviewProps {
+ content: GeneratedContent;
+ onRegenerate: () => void;
+ isLoading?: boolean;
+ selectedProduct?: Product;
+ 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({
+ content,
+ onRegenerate,
+ isLoading,
+ selectedProduct,
+ imageGenerationEnabled = true,
+}: InlineContentPreviewProps) {
+ const { text_content, image_content, violations, requires_modification, error, image_error, text_error } = content;
+ const [copied, setCopied] = useState(false);
+ 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 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);
+ };
+
+ const handleDownloadImage = async () => {
+ 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();
+ }
+ }
+ };
+
+ // Get product display name
+ const getProductDisplayName = () => {
+ if (selectedProduct) {
+ return selectedProduct.product_name;
+ }
+ return text_content?.headline || 'Your Content';
+ };
+
+ return (
+
+ {/* Selection confirmation */}
+ {selectedProduct && (
+
+ You selected "{selectedProduct.product_name}". Here's what I've created – let me know if you need anything changed.
+
+ )}
+
+ {/* Sparkle Headline - Figma style */}
+ {text_content?.headline && (
+
+ ✨ Discover the serene elegance of {getProductDisplayName()}.
+
+ )}
+
+ {/* Body Copy */}
+ {text_content?.body && (
+
+ {text_content.body}
+
+ )}
+
+ {/* Hashtags */}
+ {text_content?.tagline && (
+
+ {text_content.tagline}
+
+ )}
+
+ {/* Error Banner */}
+ {(error || text_error) && !violations.some(v => v.message.toLowerCase().includes('filter')) && (
+
+ AI-generated content may be incorrect
+
+
+ {/* Collapsible Compliance Section */}
+ {violations.length > 0 && (
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
+function ViolationCard({ violation }: { violation: ComplianceViolation }) {
+ const getSeverityStyles = () => {
+ switch (violation.severity) {
+ case 'error':
+ return {
+ icon:
+
+ )}
+
+ {/* Image Preview - with bottom banner for text */}
+ {imageGenerationEnabled && image_content?.image_url && (
+
+
+ {getErrorMessage(error || text_error).title}
+
+
+ {getErrorMessage(error || text_error).description}
+
+
+
+ {/* Image container */}
+
+ )}
+
+ {/* Image Error State */}
+ {imageGenerationEnabled && !image_content?.image_url && (image_error || error) && (
+
+ 
+
+ {/* 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}
+
+ )}
+
+
+
+ {getErrorMessage(image_error || error).title}
+
+
+ Click Regenerate to try again
+
+
+ )}
+
+
+
+ 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}
+
+ );
+}
diff --git a/src/app/frontend/src/components/ProductReview.tsx b/src/app/frontend/src/components/ProductReview.tsx
new file mode 100644
index 000000000..9c0d9e960
--- /dev/null
+++ b/src/app/frontend/src/components/ProductReview.tsx
@@ -0,0 +1,227 @@
+import {
+ Button,
+ Text,
+ tokens,
+} from '@fluentui/react-components';
+import {
+ Sparkle20Regular,
+ Box20Regular,
+} from '@fluentui/react-icons';
+import type { Product } from '../types';
+
+interface ProductReviewProps {
+ products: Product[];
+ onConfirm: () => void;
+ onStartOver: () => void;
+ isAwaitingResponse?: boolean;
+ availableProducts?: Product[];
+ onProductSelect?: (product: Product) => void;
+ disabled?: boolean;
+}
+
+export 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 isProductSelected = (product: Product): boolean => {
+ return selectedProductIds.has(product.sku || product.product_name);
+ };
+
+ const handleProductClick = (product: Product) => {
+ if (onProductSelect) {
+ onProductSelect(product);
+ }
+ };
+
+ return (
+
+
+ {violation.message}
+
+
+ {violation.suggestion}
+
+
+
+
+ );
+}
+
+interface ProductCardGridProps {
+ product: Product;
+ isSelected: boolean;
+ onClick: () => void;
+ disabled?: boolean;
+}
+
+function ProductCardGrid({ product, isSelected, onClick, disabled = false }: ProductCardGridProps) {
+ return (
+
+
+ Here is the list of available paints:
+
+
+
+ {displayProducts.length > 0 ? (
+
+ {displayProducts.map((product, index) => (
+ handleProductClick(product)}
+ disabled={disabled}
+ />
+ ))}
+
+ ) : (
+
+
+ No products available.
+
+
+ )}
+
+ {displayProducts.length > 0 && (
+
+ }
+ onClick={onConfirm}
+ disabled={isAwaitingResponse || products.length === 0}
+ size="small"
+ >
+ Generate Content
+
+ {products.length === 0 && (
+
+ Select a product to continue
+
+ )}
+
+ )}
+
+
+
+ AI-generated content may be incorrect
+
+
+
+ {product.image_url ? (
+
+ ) : (
+
+ );
+}
diff --git a/src/app/frontend/src/components/SelectedProductView.tsx b/src/app/frontend/src/components/SelectedProductView.tsx
new file mode 100644
index 000000000..a4c4540f6
--- /dev/null
+++ b/src/app/frontend/src/components/SelectedProductView.tsx
@@ -0,0 +1,138 @@
+import {
+ Text,
+ Badge,
+ tokens,
+} from '@fluentui/react-components';
+import {
+ Checkmark20Regular,
+ Box20Regular,
+} from '@fluentui/react-icons';
+import type { Product } from '../types';
+
+interface SelectedProductViewProps {
+ products: Product[];
+}
+
+export function SelectedProductView({ products }: SelectedProductViewProps) {
+ if (products.length === 0) return null;
+
+ return (
+
+
+ )}
+
+
+
+ {product.product_name}
+
+
+ {product.tags || product.description || 'soft white, airy, minimal, fresh'}
+
+
+ ${product.price?.toFixed(2) || '59.95'} USD
+
+
+
+
+ );
+}
diff --git a/src/app/frontend/src/components/WelcomeCard.tsx b/src/app/frontend/src/components/WelcomeCard.tsx
new file mode 100644
index 000000000..ab5740708
--- /dev/null
+++ b/src/app/frontend/src/components/WelcomeCard.tsx
@@ -0,0 +1,158 @@
+import {
+ Card,
+ Text,
+ tokens,
+} from '@fluentui/react-components';
+import FirstPromptIcon from '../styles/images/firstprompt.png';
+import SecondPromptIcon from '../styles/images/secondprompt.png';
+
+interface SuggestionCard {
+ title: string;
+ prompt: string;
+ icon: string;
+}
+
+const suggestions: SuggestionCard[] = [
+ {
+ 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,
+ }
+];
+
+interface WelcomeCardProps {
+ onSuggestionClick: (prompt: string) => void;
+ currentInput?: string;
+}
+
+export function WelcomeCard({ onSuggestionClick, currentInput = '' }: WelcomeCardProps) {
+ const selectedIndex = suggestions.findIndex(s => s.prompt === currentInput);
+ return (
+
+
+
+
+ {products.map((product, index) => (
+
+
+ {product.image_url ? (
+
+ ) : (
+
+ ))}
+
+
+ )}
+
+
+
+ {product.product_name}
+
+
+ {product.tags || product.description || 'soft white, airy, minimal, fresh'}
+
+
+ ${product.price?.toFixed(2) || '59.95'} USD
+
+
+
+ {/* Welcome card with suggestions inside */}
+
+ );
+}
diff --git a/src/App/src/main.tsx b/src/app/frontend/src/main.tsx
similarity index 60%
rename from src/App/src/main.tsx
rename to src/app/frontend/src/main.tsx
index db4a8119d..e59c93df9 100644
--- a/src/App/src/main.tsx
+++ b/src/app/frontend/src/main.tsx
@@ -1,17 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
-import { Provider } from 'react-redux';
-import { store } from './store';
import App from './App';
import './styles/global.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
+ {/* Header with icon and welcome message */}
+
+
+
+ Welcome to your Content Generation Accelerator
+
+
+ Here are the options I can assist you with today
+
+
+
+ {/* Suggestion cards - vertical layout */}
+
+ {suggestions.map((suggestion, index) => {
+ 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;
+ }
+ }}
+ >
+
+ );
+ })}
+
+
+
+
+ 
+
+
+
+ {suggestion.title}
+
+
+