refactor(frontend): GenerationStatus enum, delete dead code, dedup validation, hooks barrel

Author: Shubhangi-Microsoft

content-gen/src/app/frontend/src/App.tsx

@@ -11,9 +11,7 @@ import {
   selectUserName,
   selectShowChatHistory,
 } from './store';
-import { useChatOrchestrator } from './hooks/useChatOrchestrator';
-import { useContentGeneration } from './hooks/useContentGeneration';
-import { useConversationActions } from './hooks/useConversationActions';
+import { useChatOrchestrator, useContentGeneration, useConversationActions } from './hooks';
 
 
 function App() {

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

@@ -37,10 +37,10 @@ export const ChatInput = memo(function ChatInput({
 
   // Support both controlled & uncontrolled modes
   const inputValue = controlledValue ?? internalValue;
-  const setInputValue = (v: string) => {
+  const setInputValue = useCallback((v: string) => {
     controlledOnChange?.(v);
     if (controlledValue === undefined) setInternalValue(v);
-  };
+  }, [controlledOnChange, controlledValue]);
 
   const handleSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();

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

@@ -9,12 +9,12 @@ import { WelcomeCard } from './WelcomeCard';
 import { MessageBubble } from './MessageBubble';
 import { TypingIndicator } from './TypingIndicator';
 import { ChatInput } from './ChatInput';
-import { useAutoScroll } from '../hooks/useAutoScroll';
+import { useAutoScroll } from '../hooks';
 import {
   useAppSelector,
   selectMessages,
   selectIsLoading,
-  selectGenerationStatus,
+  selectGenerationStatusLabel,
   selectPendingBrief,
   selectConfirmedBrief,
   selectGeneratedContent,
@@ -46,7 +46,7 @@ export const ChatPanel = memo(function ChatPanel({
 }: ChatPanelProps) {
   const messages = useAppSelector(selectMessages);
   const isLoading = useAppSelector(selectIsLoading);
-  const generationStatus = useAppSelector(selectGenerationStatus);
+  const generationStatus = useAppSelector(selectGenerationStatusLabel);
   const pendingBrief = useAppSelector(selectPendingBrief);
   const confirmedBrief = useAppSelector(selectConfirmedBrief);
   const generatedContent = useAppSelector(selectGeneratedContent);
@@ -84,8 +84,6 @@ export const ChatPanel = memo(function ChatPanel({
     setInputValue(prompt);
   }, []);
 
-  const isInputDisabled = useMemo(() => isLoading, [isLoading]);
-
   return (
     <div className="chat-container">
       {/* Messages Area */}
@@ -171,7 +169,7 @@ export const ChatPanel = memo(function ChatPanel({
       <ChatInput
         onSendMessage={onSendMessage}
         onNewConversation={onNewConversation}
-        disabled={isInputDisabled}
+        disabled={isLoading}
         value={inputValue}
         onChange={setInputValue}
       />

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

@@ -23,6 +23,23 @@ import {
 } 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;
@@ -61,21 +78,13 @@ export const ConversationItem = memo(function ConversationItem({
   }, [conversation.title]);
 
   const handleRenameConfirm = useCallback(async () => {
-    const trimmedValue = renameValue.trim();
-
-    if (trimmedValue.length < 5) {
-      setRenameError('Conversation name must be at least 5 characters');
-      return;
-    }
-    if (trimmedValue.length > 50) {
-      setRenameError('Conversation name cannot exceed 50 characters');
-      return;
-    }
-    if (!/[a-zA-Z0-9]/.test(trimmedValue)) {
-      setRenameError('Conversation name must contain at least one letter or number');
+    const error = validateConversationName(renameValue);
+    if (error) {
+      setRenameError(error);
       return;
     }
 
+    const trimmedValue = renameValue.trim();
     if (trimmedValue === conversation.title) {
       setIsRenameDialogOpen(false);
       setRenameError('');
@@ -194,21 +203,11 @@ export const ConversationItem = memo(function ConversationItem({
               <Input
                 ref={renameInputRef}
                 value={renameValue}
-                maxLength={50}
+                maxLength={NAME_MAX_LENGTH}
                 onChange={(e) => {
                   const newValue = e.target.value;
                   setRenameValue(newValue);
-                  if (newValue.trim() === '') {
-                    setRenameError('Conversation name cannot be empty or contain only spaces');
-                  } else if (newValue.trim().length < 5) {
-                    setRenameError('Conversation name must be at least 5 characters');
-                  } else if (!/[a-zA-Z0-9]/.test(newValue)) {
-                    setRenameError('Conversation name must contain at least one letter or number');
-                  } else if (newValue.length > 50) {
-                    setRenameError('Conversation name cannot exceed 50 characters');
-                  } else {
-                    setRenameError('');
-                  }
+                  setRenameError(validateConversationName(newValue));
                 }}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && renameValue.trim()) {
@@ -228,7 +227,7 @@ export const ConversationItem = memo(function ConversationItem({
                   display: 'block',
                 }}
               >
-                Maximum 50 characters ({renameValue.length}/50)
+                Maximum {NAME_MAX_LENGTH} characters ({renameValue.length}/{NAME_MAX_LENGTH})
               </Text>
               {renameError && (
                 <Text
@@ -257,11 +256,7 @@ export const ConversationItem = memo(function ConversationItem({
             <Button
               appearance="primary"
               onClick={handleRenameConfirm}
-              disabled={
-                renameValue.trim().length < 5 ||
-                !/[a-zA-Z0-9]/.test(renameValue) ||
-                renameValue.length > 50
-              }
+              disabled={!!validateConversationName(renameValue)}
             >
               Rename
             </Button>

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

@@ -6,9 +6,8 @@ import {
 } from '@fluentui/react-components';
 import { ShieldError20Regular } from '@fluentui/react-icons';
 import type { GeneratedContent, Product } from '../types';
-import { useWindowSize } from '../hooks/useWindowSize';
+import { useWindowSize, useCopyToClipboard } from '../hooks';
 import { isContentFilterError, getErrorMessage, downloadImage } from '../utils';
-import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
 import { ImagePreviewCard } from './ImagePreviewCard';
 import { ComplianceSection } from './ComplianceSection';
 

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

@@ -9,7 +9,7 @@ import {
 import { Copy20Regular } from '@fluentui/react-icons';
 import ReactMarkdown from 'react-markdown';
 import type { ChatMessage } from '../types';
-import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
+import { useCopyToClipboard } from '../hooks';
 
 export interface MessageBubbleProps {
   message: ChatMessage;

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

@@ -7,7 +7,6 @@ import {
 
 export interface SuggestionCardProps {
   title: string;
-  prompt: string;
   icon: string;
   isSelected?: boolean;
   onClick: () => void;

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

@@ -1,4 +1,4 @@
-import { memo, useMemo, useCallback } from 'react';
+import { memo, useMemo } from 'react';
 import {
   Text,
   tokens,
@@ -7,13 +7,13 @@ 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.",
@@ -37,9 +37,6 @@ export const WelcomeCard = memo(function WelcomeCard({ onSuggestionClick, curren
     [currentInput],
   );
 
-  const handleSuggestionClick = useCallback((prompt: string) => {
-    onSuggestionClick(prompt);
-  }, [onSuggestionClick]);
   return (
     <div style={{
       display: 'flex',
@@ -100,10 +97,9 @@ export const WelcomeCard = memo(function WelcomeCard({ onSuggestionClick, curren
             <SuggestionCard
               key={index}
               title={suggestion.title}
-              prompt={suggestion.prompt}
               icon={suggestion.icon}
               isSelected={isSelected}
-              onClick={() => handleSuggestionClick(suggestion.prompt)}
+              onClick={() => onSuggestionClick(suggestion.prompt)}
             />
             );
           })}

content-gen/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';