feat: Add chat history toggle button and SamplePrompt icon

- Added toggle button in header to show/hide chat history panel
- Replaced Fluent UI icons with SamplePrompt.png for suggestion cards
- Added vite-env.d.ts for image import type declarations

Author: hunterjam

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

@@ -2,8 +2,14 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import {
   Text,
   Avatar,
+  Button,
+  Tooltip,
   tokens,
 } from '@fluentui/react-components';
+import {
+  History24Regular,
+  History24Filled,
+} from '@fluentui/react-icons';
 import { v4 as uuidv4 } from 'uuid';
 
 import { ChatPanel } from './components/ChatPanel';
@@ -51,6 +57,9 @@ function App() {
   // Trigger for refreshing chat history
   const [historyRefreshTrigger, setHistoryRefreshTrigger] = useState(0);
 
+  // Toggle for showing/hiding chat history panel
+  const [showChatHistory, setShowChatHistory] = useState(true);
+
   // Abort controller for cancelling ongoing requests
   const abortControllerRef = useRef<AbortController | null>(null);
 
@@ -594,12 +603,22 @@ function App() {
             Contoso
           </Text>
         </div>
-        <Avatar 
-          name={userId || 'User'}
-          initials={getUserInitials()}
-          color="colorful"
-          size={36}
-        />
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <Tooltip content={showChatHistory ? 'Hide chat history' : 'Show chat history'} relationship="label">
+            <Button
+              appearance="subtle"
+              icon={showChatHistory ? <History24Filled /> : <History24Regular />}
+              onClick={() => setShowChatHistory(!showChatHistory)}
+              aria-label={showChatHistory ? 'Hide chat history' : 'Show chat history'}
+            />
+          </Tooltip>
+          <Avatar 
+            name={userId || 'User'}
+            initials={getUserInitials()}
+            color="colorful"
+            size={36}
+          />
+        </div>
       </header>
 
       {/* Main Content */}
@@ -626,15 +645,17 @@ function App() {
         </div>
 
         {/* Chat History Sidebar - RIGHT side */}
-        <div className="history-panel">
-          <ChatHistory
+        {showChatHistory && (
+          <div className="history-panel">
+            <ChatHistory
             currentConversationId={conversationId}
             currentMessages={messages}
             onSelectConversation={handleSelectConversation}
             onNewConversation={handleNewConversation}
-            refreshTrigger={historyRefreshTrigger}
-          />
-        </div>
+              refreshTrigger={historyRefreshTrigger}
+            />
+          </div>
+        )}
       </div>
     </div>
   );

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

@@ -3,11 +3,7 @@ import {
   Text,
   tokens,
 } from '@fluentui/react-components';
-import {
-  Image24Regular,
-  TextBulletList24Regular,
-  Sparkle24Regular,
-} from '@fluentui/react-icons';
+import SamplePromptIcon from '../styles/images/SamplePrompt.png';
 
 // Copilot-style hexagon icon
 function CopilotIcon() {
@@ -35,30 +31,26 @@ function CopilotIcon() {
 }
 
 interface SuggestionCard {
-  icon: React.ReactNode;
   title: string;
   description: string;
   prompt: string;
 }
 
 const suggestions: SuggestionCard[] = [
   {
-    icon: <TextBulletList24Regular />,
-    title: 'Create a marketing campaign',
+    title: 'Generate ad copy and image ideas for a Facebook campaign promoting Paint for Home Décor.',
     description: 'Generate compelling copy for your next campaign',
-    prompt: 'I need to create a marketing campaign for a new product launch targeting young professionals.',
+    prompt: 'Generate ad copy and image ideas for a Facebook campaign promoting Paint for Home Décor.',
   },
   {
-    icon: <Image24Regular />,
-    title: 'Generate visual content',
-    description: 'Create images for social media or ads',
-    prompt: 'Generate a hero image for our summer sale campaign featuring outdoor products.',
+    title: 'Summarize my creative brief and suggest mood, audience, and image style for the campaign.',
+    description: 'Summarize your creative brief for better insights',
+    prompt: 'Summarize my creative brief and suggest mood, audience, and image style for the campaign.',
   },
   {
-    icon: <Sparkle24Regular />,
-    title: 'Draft a creative brief',
-    description: 'Build a comprehensive creative brief',
-    prompt: 'Help me create a creative brief for a holiday marketing campaign with the objective of increasing brand awareness.',
+    title: 'Create a multi-modal content plan with visuals and captions based on brand guidelines.',
+    description: 'Create a content plan with visuals and captions',
+    prompt: 'Create a multi-modal content plan with visuals and captions based on brand guidelines.',
   },
 ];
 
@@ -155,19 +147,24 @@ export function WelcomeCard({ onSuggestionClick }: WelcomeCardProps) {
                 gap: 'clamp(8px, 1.5vw, 12px)',
               }}>
                 <div style={{ 
-                  color: tokens.colorBrandForeground1, 
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
                   width: 'clamp(32px, 5vw, 40px)',
                   height: 'clamp(32px, 5vw, 40px)',
                   minWidth: '32px',
                   minHeight: '32px',
-                  backgroundColor: tokens.colorBrandBackground2,
-                  borderRadius: '8px',
                   flexShrink: 0,
                 }}>
-                  {suggestion.icon}
+                  <img 
+                    src={SamplePromptIcon} 
+                    alt="Sample prompt" 
+                    style={{ 
+                      width: '100%', 
+                      height: '100%', 
+                      objectFit: 'contain' 
+                    }} 
+                  />
                 </div>
                 <div style={{ minWidth: 0, flex: 1 }}>
                   <Text 

content-gen/src/frontend/src/styles/images/SamplePrompt.png

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}