Selector 组件

interface SelectorProps {
  image: Image;           // 当前编辑的图片
  threadId: string;       // 对话线程 ID
  source: ToolSource;     // 触发来源
  onComplete: () => void; // 完成回调
  onCancel: () => void;   // 取消回调
}

type ToolSource = 'ai' | 'toolbar';

export function FilterSelector({ image, threadId, source, onComplete, onCancel }: SelectorProps) {
  // 1. 本地状态
  const [selectedFilter, setSelectedFilter] = useState<Filter | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  // 2. 埋点
  const { trackUserInputConfirmed } = useAnalytics();

  // 3. 确认处理
  const handleConfirm = async () => {
    setIsProcessing(true);

    // 调用 API
    await applyFilter({ imageId: image.id, filterId: selectedFilter.id });

    // 埋点
    trackUserInputConfirmed('applyFilter', threadId, source, {
      image_id: image.id,
      filter_id: selectedFilter.id,
    });

    onComplete();
  };

  // 4. 渲染 UI
  return (
    <div>
      {/* 选择界面 */}
      <ActionButtons onConfirm={handleConfirm} onCancel={onCancel} />
    </div>
  );
}