iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Connections Tabs

Browse Source 
Added a connections tab, now you can enter GitHub creds and store them in cookies like the API Keys
This commit is contained in:
Dustin Loring
2024-12-09 09:26:39 -05:00
parent 178653dbed
commit 9aaa3b560c
3 changed files with 79 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/components/settings/SettingsWindow.tsx
View File

@@ -18,7 +18,7 @@ interface SettingsProps {
onClose: () => void;
}
type TabType = 'chat-history' | 'providers' | 'features' | 'debug';
type TabType = 'chat-history' | 'providers' | 'features' | 'debug' | 'connection';
// Providers that support base URL configuration
const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
@@ -30,6 +30,8 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
const [searchTerm, setSearchTerm] = useState('');
const [isDeleting, setIsDeleting] = useState(false);
const [isJustSayEnabled, setIsJustSayEnabled] = useState(false);
const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || '');
const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || '');
// Load base URLs from cookies
const [baseUrls, setBaseUrls] = useState(() => {
@@ -68,6 +70,7 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
{ id: 'chat-history', label: 'Chat History', icon: 'i-ph:book' },
{ id: 'providers', label: 'Providers', icon: 'i-ph:key' },
{ id: 'features', label: 'Features', icon: 'i-ph:star' },
{ id: 'connection', label: 'Connection', icon: 'i-ph:link' },
...(isDebugEnabled ? [{ id: 'debug' as TabType, label: 'Debug Tab', icon: 'i-ph:bug' }] : []),
];
@@ -192,6 +195,18 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
const versionHash = commit.commit; // Get the version hash from commit.json
const handleSaveConnection = () => {
Cookies.set('githubUsername', githubUsername);
Cookies.set('githubToken', githubToken);
toast.success('GitHub credentials saved successfully!');
};
const handleTestConnection = () => {
// Implement the logic to test the GitHub connection here
// For example, you could make an API call to GitHub to verify the credentials
toast.info('Testing GitHub connection...');
};
return (
<RadixDialog.Root open={open}>
<RadixDialog.Portal>
@@ -431,6 +446,45 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
<p className="text-bolt-elements-textSecondary">Version Hash: {versionHash}</p>
</div>
)}
{activeTab === 'connection' && (
<div className="p-4 mb-4 border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-3">
<h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">GitHub Connection</h3>
<div className="flex mb-4">
<div className="flex-1 mr-2">
<label className="block text-sm text-bolt-elements-textSecondary mb-1">GitHub Username:</label>
<input
type="text"
value={githubUsername}
onChange={(e) => setGithubUsername(e.target.value)}
className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
/>
</div>
<div className="flex-1">
<label className="block text-sm text-bolt-elements-textSecondary mb-1">Personal Access Token:</label>
<input
type="password"
value={githubToken}
onChange={(e) => setGithubToken(e.target.value)}
className="w-full bg-white dark:bg-bolt-elements-background-depth-4 relative px-2 py-1.5 rounded-md focus:outline-none placeholder-bolt-elements-textTertiary text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary border border-bolt-elements-borderColor"
/>
</div>
</div>
<div className="flex mb-4">
<button
onClick={handleSaveConnection}
className="bg-bolt-elements-button-primary-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-primary-backgroundHover text-bolt-elements-button-primary-text"
>
Save Connection
</button>
<button
onClick={handleTestConnection}
className="bg-blue-500 rounded-lg px-4 py-2 transition-colors duration-200 hover:bg-blue-600 text-white"
>
Test Connection
</button>
</div>
</div>
)}
</div>
</div>
</div>