40 |
96 | );
97 | }
98 |
99 | export default Popup;
100 |
--------------------------------------------------------------------------------
/extension/src/components/pages/settings/api-keys.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | export function ApiKeys() {
4 | const [groqKey, setGroqKey] = useState('');
5 | const [isSaved, setIsSaved] = useState(false);
6 |
7 | useEffect(() => {
8 | // Load saved API key when component mounts
9 | chrome.storage.sync.get(['groqApiKey'], (result) => {
10 | if (result.groqApiKey) {
11 | setGroqKey(result.groqApiKey);
12 | }
13 | });
14 | }, []);
15 |
16 | const handleSave = async () => {
17 | await chrome.storage.sync.set({ groqApiKey: groqKey });
18 | setIsSaved(true);
19 | setTimeout(() => setIsSaved(false), 2000);
20 | };
21 |
22 | const handleClear = () => {
23 | setGroqKey('');
24 | chrome.storage.local.remove('groqApiKey');
25 | setIsSaved(true);
26 | setTimeout(() => setIsSaved(false), 2000);
27 | };
28 |
29 | return (
30 |
41 |
62 |
63 |
42 | 
47 |
51 |
47 | 48 | unbaited 49 |
50 |
52 |
53 | {isEnabled ? 'on' : 'off'}
54 |
55 |
61 | 64 | Control your feed with LLMs on X 65 |
66 | 67 | {hasApiKey === false && ( 68 |
69 |
76 | )}
77 |
78 | 70 | ⚠️ API key not set 71 |
72 |73 | Please set your Groq API key in the settings to use this extension. 74 |
75 |
79 |
87 |
88 |
95 | 80 | To use this extension, you need to: 81 |
82 |-
83 |
- Set up your API keys 84 |
- Customize system prompts (optional) 85 |
31 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/extension/src/components/pages/settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { ApiKeys } from './api-keys';
2 | import { PromptsSettings } from './prompts';
3 | import { useState, useEffect } from 'react';
4 | import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
5 | import { Label } from "@/components/ui/label"
6 | import {
7 | DropdownMenu,
8 | DropdownMenuContent,
9 | DropdownMenuItem,
10 | DropdownMenuLabel,
11 | DropdownMenuSeparator,
12 | DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu"
14 |
15 | const models = [
16 | { id: 'gemma2-9b-it', name: 'Gemma 2 9B', provider: 'Google' },
17 | { id: 'llama-3.3-70b-versatile', name: 'Llama 3.3 70B Versatile', provider: 'Meta' },
18 | { id: 'llama-3.1-8b-instant', name: 'Llama 3.1 8B Instant', provider: 'Meta' },
19 | { id: 'llama-guard-3-8b', name: 'Llama Guard 3 8B', provider: 'Meta' },
20 | { id: 'llama3-70b-8192', name: 'Llama 3 70B', provider: 'Meta' },
21 | { id: 'llama3-8b-8192', name: 'Llama 3 8B', provider: 'Meta' },
22 | ];
23 |
24 | export default function Settings() {
25 | const [displayMode, setDisplayMode] = useState<'blur' | 'hide'>('blur');
26 | const [selectedModel, setSelectedModel] = useState(models[0].id);
27 |
28 | useEffect(() => {
29 | // Load saved settings
30 | chrome.storage.sync.get(['displayMode', 'selectedModel'], (result) => {
31 | if (result.displayMode) {
32 | setDisplayMode(result.displayMode);
33 | }
34 | if (result.selectedModel) {
35 | setSelectedModel(result.selectedModel);
36 | }
37 | });
38 | }, []);
39 |
40 | const handleDisplayModeChange = (value: string) => {
41 | const mode = value as 'blur' | 'hide';
42 | setDisplayMode(mode);
43 | chrome.storage.sync.set({ displayMode: mode });
44 | };
45 |
46 | const handleModelChange = (modelId: string) => {
47 | setSelectedModel(modelId);
48 | chrome.storage.sync.set({ selectedModel: modelId });
49 | };
50 |
51 | const selectedModelName = models.find(m => m.id === selectedModel)?.id || 'Select Model';
52 |
53 | return (
54 |
32 |
48 |
49 | {isSaved && (
50 | API Keys
33 |
34 |
40 |
46 |
47 |
51 | ✓ Changes saved successfully
52 |
53 | )}
54 |
55 |
56 |
70 |
71 |
57 |
60 | setGroqKey(e.target.value)}
65 | className="w-full p-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-black"
66 | placeholder="Enter your Groq API key"
67 | />
68 |
69 |
72 |
82 | You can find your API key in the Groq Console:
73 | 79 | https://console.groq.com/keys 80 | 81 |
55 |
58 |
60 |
61 |
62 |
86 |
87 |
88 |
94 |
103 |
104 |
105 |
106 |
108 |
109 | );
110 | }
111 |
--------------------------------------------------------------------------------
/extension/src/components/pages/settings/prompts.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { Label } from '@/components/ui/label';
3 | import {
4 | DEFAULT_CRITERIA,
5 | SYSTEM_PROMPT_PREFIX,
6 | SYSTEM_PROMPT_SUFFIX
7 | } from '@/lib/constants';
8 |
9 | export function PromptsSettings() {
10 | const [criteria, setCriteria] = useState(DEFAULT_CRITERIA);
11 | const [isDefault, setIsDefault] = useState(true);
12 |
13 | useEffect(() => {
14 | chrome.storage.sync.get(['promptCriteria'], (result) => {
15 | if (result.promptCriteria) {
16 | setCriteria(result.promptCriteria);
17 | setIsDefault(false);
18 | }
19 | });
20 | }, []);
21 |
22 | const handleCriteriaChange = (value: string) => {
23 | setCriteria(value);
24 | setIsDefault(value === DEFAULT_CRITERIA);
25 | chrome.storage.sync.set({ promptCriteria: value });
26 | };
27 |
28 | const resetToDefault = () => {
29 | handleCriteriaChange(DEFAULT_CRITERIA);
30 | };
31 |
32 | return (
33 | Settings
56 | 57 |Model Selection
63 |
64 |
65 |
66 |
67 | {selectedModelName}
68 |
69 |
70 | Models
71 | handleModelChange(model.id)}
76 | className="flex justify-between font-mono"
77 | >
78 | {model.id}
79 | {model.provider}
80 |
81 | ))}
82 |
83 |
84 |
85 | Display Settings
89 |
95 |
98 |
99 |
102 |
34 |
35 |
45 |
46 | Prompt Settings
36 | {!isDefault && ( 37 | 43 | )} 44 |
47 |
48 |
56 |
57 |
49 |
50 | (fixed)
51 |
52 |
53 | {SYSTEM_PROMPT_PREFIX}
54 |
55 |
58 |
59 |
60 | (editable)
61 |
62 |