refactor: extract AI_DISCLAIMER constant, remove dead selector and trivial useMemo

Author: Shubhangi-Microsoft

content-gen/src/app/frontend/src/components/BriefReview.tsx

@@ -5,7 +5,7 @@ import {
   tokens,
 } from '@fluentui/react-components';
 import type { CreativeBrief } from '../types';
-import { BRIEF_FIELD_LABELS, BRIEF_DISPLAY_ORDER, BRIEF_FIELD_KEYS } from '../utils';
+import { BRIEF_FIELD_LABELS, BRIEF_DISPLAY_ORDER, BRIEF_FIELD_KEYS, AI_DISCLAIMER } from '../utils';
 
 interface BriefReviewProps {
   brief: CreativeBrief;
@@ -154,7 +154,7 @@ export const BriefReview = memo(function BriefReview({
         paddingTop: '8px',
       }}>
         <Text size={100} style={{ color: tokens.colorNeutralForeground4 }}>
-          AI-generated content may be incorrect
+          {AI_DISCLAIMER}
         </Text>
       </div>
     </div>

content-gen/src/app/frontend/src/components/ChatHistory.tsx

@@ -142,10 +142,7 @@ export const ChatHistory = memo(function ChatHistory({
     () => showAll ? displayConversations : displayConversations.slice(0, INITIAL_COUNT),
     [showAll, displayConversations],
   );
-  const hasMore = useMemo(
-    () => displayConversations.length > INITIAL_COUNT,
-    [displayConversations.length],
-  );
+  const hasMore = displayConversations.length > INITIAL_COUNT;
 
   const handleRefreshConversations = useCallback(() => {
     dispatch(fetchConversations());

content-gen/src/app/frontend/src/components/ChatInput.tsx

@@ -5,6 +5,7 @@ import {
   Tooltip,
   tokens,
 } from '@fluentui/react-components';
+import { AI_DISCLAIMER } from '../utils';
 import {
   Send20Regular,
   Add20Regular,
@@ -140,7 +141,7 @@ export const ChatInput = memo(function ChatInput({
           fontSize: '12px',
         }}
       >
-        AI generated content may be incorrect
+        {AI_DISCLAIMER}
       </Text>
     </div>
   );

content-gen/src/app/frontend/src/components/ChatPanel.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, memo } from 'react';
+import { useState, useCallback, memo } from 'react';
 import type { Product } from '../types';
 import { BriefReview } from './BriefReview';
 import { ConfirmedBriefView } from './ConfirmedBriefView';
@@ -62,22 +62,10 @@ export const ChatPanel = memo(function ChatPanel({
   ]);
 
   // Determine if we should show inline components
-  const showBriefReview = useMemo(
-    () => !!(pendingBrief && onBriefConfirm && onBriefCancel),
-    [pendingBrief, onBriefConfirm, onBriefCancel],
-  );
-  const showProductReview = useMemo(
-    () => !!(confirmedBrief && !generatedContent && onGenerateContent),
-    [confirmedBrief, generatedContent, onGenerateContent],
-  );
-  const showContentPreview = useMemo(
-    () => !!(generatedContent && onRegenerateContent),
-    [generatedContent, onRegenerateContent],
-  );
-  const showWelcome = useMemo(
-    () => messages.length === 0 && !showBriefReview && !showProductReview && !showContentPreview,
-    [messages.length, showBriefReview, showProductReview, showContentPreview],
-  );
+  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) => {

content-gen/src/app/frontend/src/components/ComplianceSection.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { AI_DISCLAIMER } from '../utils';
 import {
   Text,
   Badge,
@@ -145,7 +146,7 @@ export const ComplianceSection = memo(function ComplianceSection({
           marginTop: '8px',
         }}
       >
-        AI-generated content may be incorrect
+        {AI_DISCLAIMER}
       </Text>
 
       {/* Collapsible Compliance Accordion */}

content-gen/src/app/frontend/src/components/MessageBubble.tsx

@@ -10,6 +10,7 @@ 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;
@@ -91,7 +92,7 @@ export const MessageBubble = memo(function MessageBubble({ message }: MessageBub
                 fontSize: '11px',
               }}
             >
-              AI-generated content may be incorrect
+              {AI_DISCLAIMER}
             </Text>
 
             <div className="assistant-actions" style={{ display: 'flex', gap: '4px' }}>

content-gen/src/app/frontend/src/components/ProductCard.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import {
   Text,
   tokens,
@@ -30,7 +30,7 @@ export const ProductCard = memo(function ProductCard({
 }: ProductCardProps) {
   const isCompact = size === 'compact';
   const imgSize = isCompact ? 56 : 80;
-  const isInteractive = useMemo(() => !!onClick && !disabled, [onClick, disabled]);
+  const isInteractive = !!onClick && !disabled;
 
   return (
     <div

content-gen/src/app/frontend/src/components/ProductReview.tsx

@@ -8,6 +8,7 @@ import {
   Sparkle20Regular,
 } from '@fluentui/react-icons';
 import type { Product } from '../types';
+import { AI_DISCLAIMER } from '../utils';
 import { ProductCard } from './ProductCard';
 
 interface ProductReviewProps {
@@ -126,7 +127,7 @@ export const ProductReview = memo(function ProductReview({
         paddingTop: '8px',
       }}>
         <Text size={100} style={{ color: tokens.colorNeutralForeground4 }}>
-          AI-generated content may be incorrect
+          {AI_DISCLAIMER}
         </Text>
       </div>
     </div>

content-gen/src/app/frontend/src/store/selectors.ts

@@ -9,7 +9,6 @@ import type { RootState } from './store';
 export const selectUserId = (state: RootState) => state.app.userId;
 export const selectUserName = (state: RootState) => state.app.userName;
 export const selectIsLoading = (state: RootState) => state.app.isLoading;
-export const selectGenerationStatus = (state: RootState) => state.app.generationStatus;
 export const selectGenerationStatusLabel = (state: RootState) => state.app.generationStatusLabel;
 export const selectImageGenerationEnabled = (state: RootState) => state.app.imageGenerationEnabled;
 export const selectShowChatHistory = (state: RootState) => state.app.showChatHistory;

content-gen/src/app/frontend/src/utils/index.ts

@@ -27,3 +27,6 @@ export { isContentFilterError, getErrorMessage } from './contentErrors';
 
 // Image download
 export { downloadImage } from './downloadImage';
+
+// Shared UI constants
+export const AI_DISCLAIMER = 'AI-generated content may be incorrect';