1

prisma/components/settings/ApiSection.tsx

@@ -0,0 +1,62 @@
+
+import React from 'react';
+import { Key, Globe } from 'lucide-react';
+import { AppConfig } from '../../types';
+
+interface ApiSectionProps {
+  config: AppConfig;
+  setConfig: (c: AppConfig) => void;
+}
+
+const ApiSection = ({ config, setConfig }: ApiSectionProps) => {
+  return (
+    <div className="space-y-4 pt-1">
+      <div className="flex items-center justify-between mb-2">
+         <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">API Connection</h3>
+         <label className="relative inline-flex items-center cursor-pointer">
+            <input 
+              type="checkbox" 
+              checked={config.enableCustomApi ?? false} 
+              onChange={(e) => setConfig({ ...config, enableCustomApi: e.target.checked })} 
+              className="sr-only peer" 
+            />
+            <div className="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+          </label>
+      </div>
+      
+      {config.enableCustomApi && (
+        <div className="space-y-4 p-4 bg-slate-50 rounded-lg border border-slate-100 animate-in fade-in slide-in-from-top-1 duration-200">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-slate-700 flex items-center gap-2">
+              <Key size={14} className="text-slate-400" />
+              Custom API Key
+            </label>
+            <input 
+              type="password"
+              placeholder="sk-..."
+              value={config.customApiKey || ''}
+              onChange={(e) => setConfig({ ...config, customApiKey: e.target.value })}
+              className="w-full bg-white border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none placeholder:text-slate-400"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-slate-700 flex items-center gap-2">
+              <Globe size={14} className="text-slate-400" />
+              Custom Base URL
+            </label>
+            <input 
+              type="text"
+              placeholder="https://generativelanguage.googleapis.com"
+              value={config.customBaseUrl || ''}
+              onChange={(e) => setConfig({ ...config, customBaseUrl: e.target.value })}
+              className="w-full bg-white border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none placeholder:text-slate-400"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ApiSection;

prisma/components/settings/GithubSection.tsx

@@ -0,0 +1,50 @@
+
+import React, { useState, useEffect } from 'react';
+import { Github, Star } from 'lucide-react';
+
+const GithubSection = ({ isOpen }: { isOpen: boolean }) => {
+  const [stars, setStars] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      fetch('https://api.github.com/repos/yeahhe365/Prisma')
+        .then(res => res.json())
+        .then(data => {
+          if (data && typeof data.stargazers_count === 'number') {
+            setStars(data.stargazers_count);
+          }
+        })
+        .catch(err => console.error("Error fetching stars:", err));
+    }
+  }, [isOpen]);
+
+  return (
+    <div className="border-t border-slate-100 pt-6">
+      <a 
+        href="https://github.com/yeahhe365/Prisma" 
+        target="_blank" 
+        rel="noopener noreferrer"
+        className="flex items-center justify-between p-3 rounded-lg border border-slate-200 bg-slate-50 hover:bg-slate-100 transition-colors group"
+      >
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-slate-900 text-white rounded-lg group-hover:scale-110 transition-transform">
+            <Github size={18} />
+          </div>
+          <div>
+            <p className="text-sm font-semibold text-slate-800">yeahhe365 / Prisma</p>
+            <p className="text-xs text-slate-500">Open source on GitHub</p>
+          </div>
+        </div>
+        
+        {stars !== null && (
+          <div className="flex items-center gap-1 px-2 py-1 bg-white border border-slate-200 rounded-md shadow-sm">
+            <Star size={14} className="text-amber-500 fill-amber-500" />
+            <span className="text-xs font-bold text-slate-700">{stars.toLocaleString()}</span>
+          </div>
+        )}
+      </a>
+    </div>
+  );
+};
+
+export default GithubSection;

prisma/components/settings/LevelSelect.tsx

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { ThinkingLevel } from '../../types';
+
+interface LevelSelectProps {
+  label: string;
+  value: ThinkingLevel;
+  validLevels: ThinkingLevel[];
+  onChange: (v: ThinkingLevel) => void;
+  desc: string;
+}
+
+const LevelSelect = ({ 
+  label, 
+  value, 
+  validLevels,
+  onChange,
+  desc 
+}: LevelSelectProps) => (
+  <div className="space-y-2">
+    <div className="flex justify-between items-baseline">
+      <label className="text-sm font-medium text-slate-700">{label}</label>
+      <span className="text-xs text-slate-500 uppercase tracking-wider bg-slate-100 border border-slate-200 px-2 py-0.5 rounded">{value}</span>
+    </div>
+    <div className="relative">
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as ThinkingLevel)}
+        className="w-full bg-slate-50 border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none appearance-none cursor-pointer transition-colors hover:border-slate-300"
+      >
+        {validLevels.map(l => (
+          <option key={l} value={l}>{l.charAt(0).toUpperCase() + l.slice(1)}</option>
+        ))}
+      </select>
+      <ChevronDown className="absolute right-3 top-3 text-slate-400 pointer-events-none" size={14} />
+    </div>
+    <p className="text-xs text-slate-500 leading-relaxed">{desc}</p>
+  </div>
+);
+
+export default LevelSelect;

prisma/components/settings/ThinkingSection.tsx

@@ -0,0 +1,69 @@
+
+import React from 'react';
+import { RefreshCw } from 'lucide-react';
+import { AppConfig, ModelOption } from '../../types';
+import { getValidThinkingLevels } from '../../config';
+import LevelSelect from './LevelSelect';
+
+interface ThinkingSectionProps {
+  config: AppConfig;
+  setConfig: (c: AppConfig) => void;
+  model: ModelOption;
+}
+
+const ThinkingSection = ({ config, setConfig, model }: ThinkingSectionProps) => {
+  const validLevels = getValidThinkingLevels(model);
+
+  return (
+    <div className="border-t border-slate-100 pt-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Thinking Process</h3>
+      </div>
+       
+       <div className="p-3 bg-indigo-50 border border-indigo-100 rounded-lg flex items-center justify-between">
+          <div className="flex items-center gap-2">
+             <RefreshCw size={16} className="text-indigo-600" />
+             <div>
+                <p className="text-sm font-medium text-indigo-900">Recursive Refinement</p>
+                <p className="text-[10px] text-indigo-600/80">Loops expert generation until satisfied.</p>
+             </div>
+          </div>
+          <label className="relative inline-flex items-center cursor-pointer">
+            <input 
+              type="checkbox" 
+              checked={config.enableRecursiveLoop ?? false} 
+              onChange={(e) => setConfig({ ...config, enableRecursiveLoop: e.target.checked })} 
+              className="sr-only peer" 
+            />
+            <div className="w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>
+          </label>
+       </div>
+
+      <LevelSelect 
+        label="Manager: Planning Strategy" 
+        value={config.planningLevel} 
+        validLevels={validLevels}
+        onChange={(v) => setConfig({ ...config, planningLevel: v })}
+        desc="Controls the depth of initial query analysis and expert delegation."
+      />
+      
+      <LevelSelect 
+        label="Experts: Execution Depth" 
+        value={config.expertLevel} 
+        validLevels={validLevels}
+        onChange={(v) => setConfig({ ...config, expertLevel: v })}
+        desc="Determines how deeply each expert persona thinks about their specific task."
+      />
+      
+      <LevelSelect 
+        label="Manager: Final Synthesis" 
+        value={config.synthesisLevel} 
+        validLevels={validLevels}
+        onChange={(v) => setConfig({ ...config, synthesisLevel: v })}
+        desc="Controls the reasoning effort for aggregating results into the final answer."
+      />
+    </div>
+  );
+};
+
+export default ThinkingSection;