if-emotion-ux/components/OffTheRecordToggle.tsx
Danny Stocker aa61ef868a feat: Integrate with Open WebUI for AI
Replaces the Gemini service integration with support for Open WebUI. This change simplifies the AI backend by leveraging an existing solution, allowing for more flexible API connections and reducing direct dependency on specific AI models.

Updated dependencies, including React, to their latest versions to incorporate performance improvements and bug fixes.

Refactored color schemes and typography in the HTML to better align with the application's theme.

Adjusted type definitions for improved clarity and compatibility with the new backend integration.
2025-11-30 05:29:00 +01:00

37 lines
1.1 KiB
TypeScript

import React from 'react';
import { EyeOff, Eye } from 'lucide-react';
interface Props {
enabled: boolean;
onToggle: () => void;
}
export function OffTheRecordToggle({ enabled, onToggle }: Props) {
return (
<div className="flex flex-col items-center">
<button
onClick={onToggle}
className={`
flex items-center gap-2 px-4 py-2 rounded-full shadow-lg transition-all duration-300
${enabled
? 'bg-privacy-active text-white hover:bg-red-900'
: 'bg-white text-sergio-600 border border-sergio-300 hover:bg-sergio-50'
}
`}
title={enabled ? "Privacy Mode Active" : "Enable Privacy Mode"}
>
{enabled ? <EyeOff size={16} /> : <Eye size={16} />}
<span className="text-sm font-medium">
{enabled ? 'Off the Record' : 'Normal Mode'}
</span>
</button>
<div className={`
text-xs text-sergio-600 mt-2 text-center transition-all duration-300 overflow-hidden
${enabled ? 'opacity-100 max-h-10' : 'opacity-0 max-h-0'}
`}>
Not saved to history
</div>
</div>
);
}