import React, { useCallback, useEffect, useState } from 'react'; import { ScrollArea } from '../../ui/scroll-area'; import BackButton from '../../ui/BackButton'; import { FixedExtensionEntry, useConfig } from '../../ConfigContext'; import { ChevronRight } from 'lucide-react'; import PermissionModal from './PermissionModal'; import { Button } from '../../ui/button'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ permissionRules: { id: 'permissionSetting.permissionRules', defaultMessage: 'Permission Rules', }, permissionRulesDescription: { id: 'permissionSetting.permissionRulesDescription', defaultMessage: 'Hidden instructions that will be passed to the provider to help direct and add context to your responses.', }, extensionRules: { id: 'permissionSetting.extensionRules', defaultMessage: 'Extension rules', }, }); function RuleItem({ title, description }: { title: string; description: string }) { const [isModalOpen, setIsModalOpen] = useState(false); const handleModalClose = () => { setIsModalOpen(false); }; return ( <> {isModalOpen && } ); } function RulesSection({ title, rules }: { title: string; rules: React.ReactNode }) { return (

{title}

{rules}

); } export default function PermissionSettingsView({ onClose }: { onClose: () => void }) { const intl = useIntl(); const { getExtensions } = useConfig(); const [extensions, setExtensions] = useState([]); const fetchExtensions = useCallback(async () => { const extensionsList = await getExtensions(true); // Force refresh // Filter out disabled extensions const enabledExtensions = extensionsList.filter((extension) => extension.enabled); // TODO(Douwe): this should really be a real extension: enabledExtensions.push({ name: 'platform', type: 'builtin', description: 'platform', enabled: true, }); // Sort extensions by name to maintain consistent order const sortedExtensions = [...enabledExtensions].sort((a, b) => { // First sort by builtin if (a.type === 'builtin' && b.type !== 'builtin') return -1; if (a.type !== 'builtin' && b.type === 'builtin') return 1; // Then sort by bundled (handle null/undefined cases) const aBundled = 'bundled' in a && a.bundled === true; const bBundled = 'bundled' in b && b.bundled === true; if (aBundled && !bBundled) return -1; if (!aBundled && bBundled) return 1; // Finally sort alphabetically within each group return a.name.localeCompare(b.name); }); setExtensions(sortedExtensions); }, [getExtensions]); useEffect(() => { fetchExtensions(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

onClose()} className="mb-4" />

{intl.formatMessage(i18n.permissionRules)}

{intl.formatMessage(i18n.permissionRulesDescription)}

{/* Content Area */}

{/* Extension Rules Section */} {extensions.map((extension) => ( ))} } />

); }