diff --git a/src/components/robot/pages/RobotCreate.tsx b/src/components/robot/pages/RobotCreate.tsx
index a64564e6..b45db930 100644
--- a/src/components/robot/pages/RobotCreate.tsx
+++ b/src/components/robot/pages/RobotCreate.tsx
@@ -611,14 +611,46 @@ const RobotCreate: React.FC = () => {
value={outputFormats}
label="Output Formats *"
onChange={(e) => {
- const value = typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value;
+ const value =
+ typeof e.target.value === 'string'
+ ? e.target.value.split(',')
+ : e.target.value;
setOutputFormats(value);
}}
renderValue={(selected) => {
if (selected.length === 0) {
return Select formats;
}
- return `${selected.length} format${selected.length > 1 ? 's' : ''} selected`;
+
+ const OUTPUT_FORMAT_LABELS: Record = {
+ markdown: 'Markdown',
+ html: 'HTML',
+ 'screenshot-visible': 'Screenshot (Visible)',
+ 'screenshot-fullpage': 'Screenshot (Full Page)',
+ };
+
+ const labels = selected.map(
+ (value) => OUTPUT_FORMAT_LABELS[value] ?? value
+ );
+
+ const MAX_ITEMS = 2; // Show only first 2, then ellipsis
+
+ const display =
+ labels.length > MAX_ITEMS
+ ? `${labels.slice(0, MAX_ITEMS).join(', ')}…`
+ : labels.join(', ');
+
+ return (
+
+ {display}
+
+ );
}}
MenuProps={{
PaperProps: {
@@ -748,4 +780,4 @@ const modalStyle = {
height: 'fit-content',
display: 'block',
padding: '20px',
-};
\ No newline at end of file
+};