Skip to content

Commit 51b38ce

Browse files
gpickettgpickett
committed
added orginal images
1 parent 28c67c5 commit 51b38ce

5 files changed

Lines changed: 73 additions & 88 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -647,6 +647,7 @@ function App() {
647647
onProductsStartOver={handleProductsStartOver}
648648
onProductSelect={handleProductSelect}
649649
imageGenerationEnabled={imageGenerationEnabled}
650+
onNewConversation={handleNewConversation}
650651
/>
651652
</div>
652653

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

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ import {
99
import {
1010
Send20Regular,
1111
Stop24Regular,
12-
Attach20Regular,
13-
ThumbLike20Regular,
14-
ThumbDislike20Regular,
12+
Add20Regular,
1513
Copy20Regular,
1614
} from '@fluentui/react-icons';
1715
import ReactMarkdown from 'react-markdown';
@@ -43,6 +41,8 @@ interface ChatPanelProps {
4341
onProductSelect?: (product: Product) => void;
4442
// Feature flags
4543
imageGenerationEnabled?: boolean;
44+
// New chat
45+
onNewConversation?: () => void;
4646
}
4747

4848
export function ChatPanel({
@@ -63,6 +63,7 @@ export function ChatPanel({
6363
onProductsStartOver,
6464
onProductSelect,
6565
imageGenerationEnabled = true,
66+
onNewConversation,
6667
}: ChatPanelProps) {
6768
const [inputValue, setInputValue] = useState('');
6869
const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -278,11 +279,12 @@ export function ChatPanel({
278279

279280
{/* Icons on the right */}
280281
<div style={{ display: 'flex', alignItems: 'center', gap: '0px' }}>
281-
<Tooltip content="Attach file" relationship="label">
282+
<Tooltip content="New chat" relationship="label">
282283
<Button
283284
appearance="subtle"
284-
icon={<Attach20Regular />}
285+
icon={<Add20Regular />}
285286
size="small"
287+
onClick={onNewConversation}
286288
disabled={isLoading}
287289
style={{
288290
minWidth: '32px',
@@ -425,30 +427,6 @@ function MessageBubble({ message }: { message: ChatMessage }) {
425427
}}
426428
/>
427429
</Tooltip>
428-
<Tooltip content="Helpful" relationship="label">
429-
<Button
430-
appearance="subtle"
431-
icon={<ThumbLike20Regular />}
432-
size="small"
433-
style={{
434-
minWidth: '28px',
435-
height: '28px',
436-
color: tokens.colorNeutralForeground3,
437-
}}
438-
/>
439-
</Tooltip>
440-
<Tooltip content="Not helpful" relationship="label">
441-
<Button
442-
appearance="subtle"
443-
icon={<ThumbDislike20Regular />}
444-
size="small"
445-
style={{
446-
minWidth: '28px',
447-
height: '28px',
448-
color: tokens.colorNeutralForeground3,
449-
}}
450-
/>
451-
</Tooltip>
452430
</div>
453431
</div>
454432
)}

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

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ import {
1616
Copy20Regular,
1717
ArrowDownload20Regular,
1818
ShieldError20Regular,
19-
ThumbLike20Regular,
20-
ThumbDislike20Regular,
2119
} from '@fluentui/react-icons';
2220
import type { GeneratedContent, ComplianceViolation, Product } from '../types';
2321

@@ -165,11 +163,10 @@ export function InlineContentPreview({
165163
}
166164
};
167165

168-
// Get product display name with hex
166+
// Get product display name
169167
const getProductDisplayName = () => {
170168
if (selectedProduct) {
171-
const hex = selectedProduct.hex_value || 'EEEFEA';
172-
return `${selectedProduct.product_name} (${hex.toUpperCase()})`;
169+
return selectedProduct.product_name;
173170
}
174171
return text_content?.headline || 'Your Content';
175172
};
@@ -442,22 +439,6 @@ export function InlineContentPreview({
442439
style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
443440
/>
444441
</Tooltip>
445-
<Tooltip content="Helpful" relationship="label">
446-
<Button
447-
appearance="subtle"
448-
icon={<ThumbLike20Regular />}
449-
size="small"
450-
style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
451-
/>
452-
</Tooltip>
453-
<Tooltip content="Not helpful" relationship="label">
454-
<Button
455-
appearance="subtle"
456-
icon={<ThumbDislike20Regular />}
457-
size="small"
458-
style={{ minWidth: '32px', color: tokens.colorNeutralForeground3 }}
459-
/>
460-
</Tooltip>
461442
</div>
462443
</div>
463444

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

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
} from '@fluentui/react-components';
66
import {
77
Sparkle20Regular,
8+
Box20Regular,
89
} from '@fluentui/react-icons';
910
import type { Product } from '../types';
1011

@@ -28,13 +29,6 @@ export function ProductReview({
2829
const displayProducts = availableProducts.length > 0 ? availableProducts : products;
2930
const selectedProductIds = new Set(products.map(p => p.sku || p.product_name));
3031

31-
const getProductColor = (product: Product): string => {
32-
if (product.hex_value) return product.hex_value;
33-
const hash = product.product_name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
34-
const hue = hash % 360;
35-
return `hsl(${hue}, 30%, 85%)`;
36-
};
37-
3832
const isProductSelected = (product: Product): boolean => {
3933
return selectedProductIds.has(product.sku || product.product_name);
4034
};
@@ -73,7 +67,6 @@ export function ProductReview({
7367
<ProductCardGrid
7468
key={product.sku || index}
7569
product={product}
76-
color={getProductColor(product)}
7770
isSelected={isProductSelected(product)}
7871
onClick={() => handleProductClick(product)}
7972
/>
@@ -129,12 +122,11 @@ export function ProductReview({
129122

130123
interface ProductCardGridProps {
131124
product: Product;
132-
color: string;
133125
isSelected: boolean;
134126
onClick: () => void;
135127
}
136128

137-
function ProductCardGrid({ product, color, isSelected, onClick }: ProductCardGridProps) {
129+
function ProductCardGrid({ product, isSelected, onClick }: ProductCardGridProps) {
138130
return (
139131
<div
140132
className={`product-card ${isSelected ? 'selected' : ''}`}
@@ -152,17 +144,36 @@ function ProductCardGrid({ product, color, isSelected, onClick }: ProductCardGri
152144
transition: 'all 0.15s ease-in-out',
153145
}}
154146
>
155-
<div
156-
className="product-color-swatch"
157-
style={{
158-
width: '80px',
159-
height: '80px',
160-
borderRadius: '8px',
161-
backgroundColor: color,
162-
border: `1px solid ${tokens.colorNeutralStroke2}`,
163-
flexShrink: 0,
164-
}}
165-
/>
147+
{product.image_url ? (
148+
<img
149+
src={product.image_url}
150+
alt={product.product_name}
151+
style={{
152+
width: '80px',
153+
height: '80px',
154+
objectFit: 'cover',
155+
borderRadius: '8px',
156+
border: `1px solid ${tokens.colorNeutralStroke2}`,
157+
flexShrink: 0,
158+
}}
159+
/>
160+
) : (
161+
<div
162+
style={{
163+
width: '80px',
164+
height: '80px',
165+
borderRadius: '8px',
166+
backgroundColor: tokens.colorNeutralBackground3,
167+
border: `1px solid ${tokens.colorNeutralStroke2}`,
168+
flexShrink: 0,
169+
display: 'flex',
170+
alignItems: 'center',
171+
justifyContent: 'center',
172+
}}
173+
>
174+
<Box20Regular style={{ color: tokens.colorNeutralForeground3, fontSize: '24px' }} />
175+
</div>
176+
)}
166177

167178
<div className="product-info" style={{ flex: 1, minWidth: 0 }}>
168179
<Text

‎content-gen/src/frontend/src/components/SelectedProductView.tsx‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,14 @@ import {
55
} from '@fluentui/react-components';
66
import {
77
Checkmark20Regular,
8+
Box20Regular,
89
} from '@fluentui/react-icons';
910
import type { Product } from '../types';
1011

1112
interface SelectedProductViewProps {
1213
products: Product[];
1314
}
1415

15-
const getProductColor = (product: Product): string => {
16-
if (product.hex_value) return product.hex_value;
17-
const hash = product.product_name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
18-
const hue = hash % 360;
19-
return `hsl(${hue}, 30%, 85%)`;
20-
};
21-
2216
export function SelectedProductView({ products }: SelectedProductViewProps) {
2317
if (products.length === 0) return null;
2418

@@ -69,16 +63,36 @@ export function SelectedProductView({ products }: SelectedProductViewProps) {
6963
border: `1px solid ${tokens.colorNeutralStroke2}`,
7064
}}
7165
>
72-
<div
73-
style={{
74-
width: '56px',
75-
height: '56px',
76-
borderRadius: '6px',
77-
backgroundColor: getProductColor(product),
78-
border: `1px solid ${tokens.colorNeutralStroke2}`,
79-
flexShrink: 0,
80-
}}
81-
/>
66+
{product.image_url ? (
67+
<img
68+
src={product.image_url}
69+
alt={product.product_name}
70+
style={{
71+
width: '56px',
72+
height: '56px',
73+
objectFit: 'cover',
74+
borderRadius: '6px',
75+
border: `1px solid ${tokens.colorNeutralStroke2}`,
76+
flexShrink: 0,
77+
}}
78+
/>
79+
) : (
80+
<div
81+
style={{
82+
width: '56px',
83+
height: '56px',
84+
borderRadius: '6px',
85+
backgroundColor: tokens.colorNeutralBackground3,
86+
border: `1px solid ${tokens.colorNeutralStroke2}`,
87+
flexShrink: 0,
88+
display: 'flex',
89+
alignItems: 'center',
90+
justifyContent: 'center',
91+
}}
92+
>
93+
<Box20Regular style={{ color: tokens.colorNeutralForeground3 }} />
94+
</div>
95+
)}
8296

8397
<div style={{ flex: 1, minWidth: 0 }}>
8498
<Text

0 commit comments

Comments
 (0)