- {currentMessageImageUrls.map((imageUrl, index) => (
-
- {/* Message Actions for images */}
+
+ {currentMessageImageUrls.length === 1 ? (
+
+
+ {/* Message Actions for single image */}
+ {isHovered && (
+
+ )}
+
+
+
+ ) : (
+
+ {/* Message Actions for multiple images */}
{isHovered && (
)}
-
+
+ {currentMessageImageUrls.map((imageUrl, index) => (
+
+ ))}
+
- ))}
+ )}
)}
diff --git a/src/app/routes/chat/-components/chat/ImagePreferences.tsx b/src/app/routes/chat/-components/chat/ImagePreferences.tsx
new file mode 100644
index 0000000..9ab30bf
--- /dev/null
+++ b/src/app/routes/chat/-components/chat/ImagePreferences.tsx
@@ -0,0 +1,157 @@
+import { Slider } from "@/app/components/ui/slider";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/components/ui/tooltip";
+import { cn } from "@/app/lib/utils";
+import { getModelById } from "@/server/ai/provider";
+import type { AspectRatio } from "@/server/ai/types/api";
+import { RectangleHorizontal, RectangleVertical, Square } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ImagePreferencesProps {
+ imageCount: number;
+ aspectRatio?: AspectRatio;
+ onImageCountChange: (count: number) => void;
+ onAspectRatioChange: (ratio: AspectRatio | undefined) => void;
+ currentProvider?: string;
+ currentModel?: string;
+ onClose: () => void;
+}
+
+// Aspect ratio icon mapping
+const AspectRatioIcons = {
+ "1:1": Square,
+ "16:9": RectangleHorizontal,
+ "9:16": RectangleVertical,
+ "4:3": RectangleHorizontal,
+ "3:4": RectangleVertical,
+};
+
+export function ImagePreferences({
+ imageCount,
+ aspectRatio,
+ onImageCountChange,
+ onAspectRatioChange,
+ currentProvider,
+ currentModel,
+ onClose,
+}: ImagePreferencesProps) {
+ const { t } = useTranslation();
+ const panelRef = useRef
(null);
+
+ // Get supported aspect ratios from current model
+ const supportedAspectRatios = (() => {
+ if (!currentProvider || !currentModel) return [];
+
+ try {
+ const model = getModelById(currentProvider, currentModel);
+ return model.supportedAspectRatios || [];
+ } catch {
+ return [];
+ }
+ })();
+
+ // Handle click outside to close panel
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
+ onClose();
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [onClose]);
+
+ return (
+
+
+ {/* Image Count Slider */}
+
+
+ {t("chat.imageCount")}
+ {imageCount}
+
+
onImageCountChange(value[0] || 1)}
+ max={4}
+ min={1}
+ step={1}
+ className="w-full"
+ />
+
+ 1
+ 4
+
+
+
+ {/* Aspect Ratio Selection */}
+ {supportedAspectRatios.length > 0 && (
+
+
{t("chat.aspectRatio")}
+
+ {/* Auto/None option */}
+
+
+
+
+
+
+ {t("chat.autoAspectRatio")}
+
+
+
+
+ {/* Supported aspect ratios */}
+ {supportedAspectRatios.map((ratio) => {
+ const IconComponent = AspectRatioIcons[ratio];
+ const isSelected = aspectRatio === ratio;
+ return (
+
+
+
+
+
+
+ {ratio}
+
+
+
+ );
+ })}
+
+
+ )}
+
+
+ 
+ 
+