crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/@settings/tabs/vercel/components/VercelConnection.tsx

@@ -0,0 +1,368 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import {
+  vercelConnection,
+  isConnecting,
+  isFetchingStats,
+  updateVercelConnection,
+  fetchVercelStats,
+  autoConnectVercel,
+} from '~/lib/stores/vercel';
+
+export default function VercelConnection() {
+  console.log('VercelConnection component mounted');
+
+  const connection = useStore(vercelConnection);
+  const connecting = useStore(isConnecting);
+  const fetchingStats = useStore(isFetchingStats);
+  const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
+  const hasInitialized = useRef(false);
+
+  console.log('VercelConnection initial state:', {
+    connection: {
+      user: connection.user,
+      token: connection.token ? '[TOKEN_EXISTS]' : '[NO_TOKEN]',
+    },
+    envToken: import.meta.env?.VITE_VERCEL_ACCESS_TOKEN ? '[ENV_TOKEN_EXISTS]' : '[NO_ENV_TOKEN]',
+  });
+
+  useEffect(() => {
+    // Prevent multiple initializations
+    if (hasInitialized.current) {
+      console.log('Vercel: Already initialized, skipping');
+      return;
+    }
+
+    const initializeConnection = async () => {
+      console.log('Vercel initializeConnection:', {
+        user: connection.user,
+        token: connection.token ? '[TOKEN_EXISTS]' : '[NO_TOKEN]',
+        envToken: import.meta.env?.VITE_VERCEL_ACCESS_TOKEN ? '[ENV_TOKEN_EXISTS]' : '[NO_ENV_TOKEN]',
+      });
+
+      hasInitialized.current = true;
+
+      // Auto-connect using environment variable if no existing connection but token exists
+      if (!connection.user && connection.token && import.meta.env?.VITE_VERCEL_ACCESS_TOKEN) {
+        console.log('Vercel: Attempting auto-connection');
+
+        const result = await autoConnectVercel();
+
+        if (result.success) {
+          toast.success('Connected to Vercel automatically');
+        } else {
+          console.error('Vercel auto-connection failed:', result.error);
+        }
+      } else if (connection.user && connection.token) {
+        // Fetch stats for existing connection
+        console.log('Vercel: Fetching stats for existing connection');
+        await fetchVercelStats(connection.token);
+      } else {
+        console.log('Vercel: No auto-connection conditions met');
+      }
+    };
+
+    initializeConnection();
+  }, []); // Empty dependency array to run only once
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    isConnecting.set(true);
+
+    try {
+      const response = await fetch('https://api.vercel.com/v2/user', {
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
+      }
+
+      const userData = (await response.json()) as any;
+      updateVercelConnection({
+        user: userData.user || userData, // Handle both possible structures
+        token: connection.token,
+      });
+
+      await fetchVercelStats(connection.token);
+      toast.success('Successfully connected to Vercel');
+    } catch (error) {
+      console.error('Auth error:', error);
+      logStore.logError('Failed to authenticate with Vercel', { error });
+      toast.error('Failed to connect to Vercel');
+      updateVercelConnection({ user: null, token: '' });
+    } finally {
+      isConnecting.set(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    updateVercelConnection({ user: null, token: '' });
+    toast.success('Disconnected from Vercel');
+  };
+
+  console.log('connection', connection);
+
+  return (
+    <motion.div
+      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <img
+              className="w-5 h-5 dark:invert"
+              height="24"
+              width="24"
+              crossOrigin="anonymous"
+              src={`https://cdn.simpleicons.org/vercel/black`}
+            />
+            <h3 className="text-base font-medium text-bolt-elements-textPrimary">Vercel Connection</h3>
+          </div>
+        </div>
+
+        {!connection.user ? (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
+              <input
+                type="password"
+                value={connection.token}
+                onChange={(e) => updateVercelConnection({ ...connection, token: e.target.value })}
+                disabled={connecting}
+                placeholder="Enter your Vercel personal access token"
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                  'border border-[#E5E5E5] dark:border-[#333333]',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href="https://vercel.com/account/tokens"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+                <div className="mt-2 text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 p-2 rounded">
+                  <p className="flex items-center gap-1">
+                    <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success" />
+                    <span className="font-medium">Tip:</span> You can also set{' '}
+                    <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 rounded text-xs">
+                      VITE_VERCEL_ACCESS_TOKEN
+                    </code>{' '}
+                    in your .env.local for automatic connection.
+                  </p>
+                </div>
+                {/* Debug info - remove this later */}
+                <div className="mt-2 text-xs text-gray-500">
+                  <p>Debug: Token present: {connection.token ? '✅' : '❌'}</p>
+                  <p>Debug: User present: {connection.user ? '✅' : '❌'}</p>
+                  <p>Debug: Env token: {import.meta.env?.VITE_VERCEL_ACCESS_TOKEN ? '✅' : '❌'}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={handleConnect}
+                disabled={connecting || !connection.token}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {connecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+
+              {/* Debug button - remove this later */}
+              <button
+                onClick={async () => {
+                  console.log('Manual auto-connect test');
+
+                  const result = await autoConnectVercel();
+
+                  if (result.success) {
+                    toast.success('Manual auto-connect successful');
+                  } else {
+                    toast.error(`Manual auto-connect failed: ${result.error}`);
+                  }
+                }}
+                className="px-3 py-2 rounded-lg text-xs bg-blue-500 text-white hover:bg-blue-600"
+              >
+                Test Auto-Connect
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={handleDisconnect}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-red-500 text-white',
+                    'hover:bg-red-600',
+                  )}
+                >
+                  <div className="i-ph:plug w-4 h-4" />
+                  Disconnect
+                </button>
+                <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                  Connected to Vercel
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
+              {/* Debug output */}
+              <pre className="hidden">{JSON.stringify(connection.user, null, 2)}</pre>
+
+              <img
+                src={`https://vercel.com/api/www/avatar?u=${connection.user?.username || connection.user?.user?.username}`}
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                alt="User Avatar"
+                className="w-12 h-12 rounded-full border-2 border-bolt-elements-borderColorActive"
+              />
+              <div>
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
+                  {connection.user?.username || connection.user?.user?.username || 'Vercel User'}
+                </h4>
+                <p className="text-sm text-bolt-elements-textSecondary">
+                  {connection.user?.email || connection.user?.user?.email || 'No email available'}
+                </p>
+              </div>
+            </div>
+
+            {fetchingStats ? (
+              <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+                <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                Fetching Vercel projects...
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => setIsProjectsExpanded(!isProjectsExpanded)}
+                  className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
+                >
+                  <div className="i-ph:buildings w-4 h-4" />
+                  Your Projects ({connection.stats?.totalProjects || 0})
+                  <div
+                    className={classNames(
+                      'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
+                      isProjectsExpanded ? 'rotate-180' : '',
+                    )}
+                  />
+                </button>
+                {isProjectsExpanded && connection.stats?.projects?.length ? (
+                  <div className="grid gap-3">
+                    {connection.stats.projects.map((project) => (
+                      <a
+                        key={project.id}
+                        href={`https://vercel.com/dashboard/${project.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="block p-4 rounded-lg border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-colors"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:globe w-4 h-4 text-bolt-elements-borderColorActive" />
+                              {project.name}
+                            </h5>
+                            <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                              {project.targets?.production?.alias && project.targets.production.alias.length > 0 ? (
+                                <>
+                                  <a
+                                    href={`https://${project.targets.production.alias.find((a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app')) || project.targets.production.alias[0]}`}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="hover:text-bolt-elements-borderColorActive"
+                                  >
+                                    {project.targets.production.alias.find(
+                                      (a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
+                                    ) || project.targets.production.alias[0]}
+                                  </a>
+                                  <span>•</span>
+                                  <span className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-3 h-3" />
+                                    {new Date(project.createdAt).toLocaleDateString()}
+                                  </span>
+                                </>
+                              ) : project.latestDeployments && project.latestDeployments.length > 0 ? (
+                                <>
+                                  <a
+                                    href={`https://${project.latestDeployments[0].url}`}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="hover:text-bolt-elements-borderColorActive"
+                                  >
+                                    {project.latestDeployments[0].url}
+                                  </a>
+                                  <span>•</span>
+                                  <span className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-3 h-3" />
+                                    {new Date(project.latestDeployments[0].created).toLocaleDateString()}
+                                  </span>
+                                </>
+                              ) : null}
+                            </div>
+                          </div>
+                          {project.framework && (
+                            <div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:code w-3 h-3" />
+                                {project.framework}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                ) : isProjectsExpanded ? (
+                  <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
+                    <div className="i-ph:info w-4 h-4" />
+                    No projects found in your Vercel account
+                  </div>
+                ) : null}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

tools/bolt.diy/app/components/@settings/tabs/vercel/components/index.ts

@@ -0,0 +1 @@
+export { default as VercelConnection } from './VercelConnection';

tools/bolt.diy/app/components/@settings/utils/tab-helpers.ts

@@ -0,0 +1,54 @@
+import type { TabVisibilityConfig } from '~/components/@settings/core/types';
+import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
+
+export const getVisibleTabs = (
+  tabConfiguration: { userTabs: TabVisibilityConfig[] },
+  notificationsEnabled: boolean,
+): TabVisibilityConfig[] => {
+  if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
+    console.warn('Invalid tab configuration, using defaults');
+    return DEFAULT_TAB_CONFIG as TabVisibilityConfig[];
+  }
+
+  // In user mode, only show visible user tabs
+  return tabConfiguration.userTabs
+    .filter((tab) => {
+      if (!tab || typeof tab.id !== 'string') {
+        console.warn('Invalid tab entry:', tab);
+        return false;
+      }
+
+      // Hide notifications tab if notifications are disabled
+      if (tab.id === 'notifications' && !notificationsEnabled) {
+        return false;
+      }
+
+      // Only show tabs that are explicitly visible and assigned to the user window
+      return tab.visible && tab.window === 'user';
+    })
+    .sort((a, b) => a.order - b.order);
+};
+
+export const reorderTabs = (
+  tabs: TabVisibilityConfig[],
+  startIndex: number,
+  endIndex: number,
+): TabVisibilityConfig[] => {
+  const result = Array.from(tabs);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  // Update order property
+  return result.map((tab, index) => ({
+    ...tab,
+    order: index,
+  }));
+};
+
+export const resetToDefaultConfig = (isDeveloperMode: boolean): TabVisibilityConfig[] => {
+  return DEFAULT_TAB_CONFIG.map((tab) => ({
+    ...tab,
+    visible: isDeveloperMode ? true : tab.window === 'user',
+    window: isDeveloperMode ? 'developer' : tab.window,
+  })) as TabVisibilityConfig[];
+};

tools/bolt.diy/app/components/chat/APIKeyManager.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { IconButton } from '~/components/ui/IconButton';
+import type { ProviderInfo } from '~/types/model';
+import Cookies from 'js-cookie';
+
+interface APIKeyManagerProps {
+  provider: ProviderInfo;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+  getApiKeyLink?: string;
+  labelForGetApiKey?: string;
+}
+
+// cache which stores whether the provider's API key is set via environment variable
+const providerEnvKeyStatusCache: Record<string, boolean> = {};
+
+const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};
+
+export function getApiKeysFromCookies() {
+  const storedApiKeys = Cookies.get('apiKeys');
+  let parsedKeys: Record<string, string> = {};
+
+  if (storedApiKeys) {
+    parsedKeys = apiKeyMemoizeCache[storedApiKeys];
+
+    if (!parsedKeys) {
+      parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys);
+    }
+  }
+
+  return parsedKeys;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempKey, setTempKey] = useState(apiKey);
+  const [isEnvKeySet, setIsEnvKeySet] = useState(false);
+
+  // Reset states and load saved key when provider changes
+  useEffect(() => {
+    // Load saved API key from cookies for this provider
+    const savedKeys = getApiKeysFromCookies();
+    const savedKey = savedKeys[provider.name] || '';
+
+    setTempKey(savedKey);
+    setApiKey(savedKey);
+    setIsEditing(false);
+  }, [provider.name]);
+
+  const checkEnvApiKey = useCallback(async () => {
+    // Check cache first
+    if (providerEnvKeyStatusCache[provider.name] !== undefined) {
+      setIsEnvKeySet(providerEnvKeyStatusCache[provider.name]);
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/check-env-key?provider=${encodeURIComponent(provider.name)}`);
+      const data = await response.json();
+      const isSet = (data as { isSet: boolean }).isSet;
+
+      // Cache the result
+      providerEnvKeyStatusCache[provider.name] = isSet;
+      setIsEnvKeySet(isSet);
+    } catch (error) {
+      console.error('Failed to check environment API key:', error);
+      setIsEnvKeySet(false);
+    }
+  }, [provider.name]);
+
+  useEffect(() => {
+    checkEnvApiKey();
+  }, [checkEnvApiKey]);
+
+  const handleSave = () => {
+    // Save to parent state
+    setApiKey(tempKey);
+
+    // Save to cookies
+    const currentKeys = getApiKeysFromCookies();
+    const newKeys = { ...currentKeys, [provider.name]: tempKey };
+    Cookies.set('apiKeys', JSON.stringify(newKeys));
+
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="flex items-center justify-between py-3 px-1">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
+          {!isEditing && (
+            <div className="flex items-center gap-2">
+              {apiKey ? (
+                <>
+                  <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                  <span className="text-xs text-green-500">Set via UI</span>
+                </>
+              ) : isEnvKeySet ? (
+                <>
+                  <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                  <span className="text-xs text-green-500">Set via environment variable</span>
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:x-circle-fill text-red-500 w-4 h-4" />
+                  <span className="text-xs text-red-500">Not Set (Please set via UI or ENV_VAR)</span>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {isEditing ? (
+          <div className="flex items-center gap-2">
+            <input
+              type="password"
+              value={tempKey}
+              placeholder="Enter API Key"
+              onChange={(e) => setTempKey(e.target.value)}
+              className="w-[300px] px-3 py-1.5 text-sm rounded border border-bolt-elements-borderColor 
+                        bg-bolt-elements-prompt-background text-bolt-elements-textPrimary 
+                        focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
+            />
+            <IconButton
+              onClick={handleSave}
+              title="Save API Key"
+              className="bg-green-500/10 hover:bg-green-500/20 text-green-500"
+            >
+              <div className="i-ph:check w-4 h-4" />
+            </IconButton>
+            <IconButton
+              onClick={() => setIsEditing(false)}
+              title="Cancel"
+              className="bg-red-500/10 hover:bg-red-500/20 text-red-500"
+            >
+              <div className="i-ph:x w-4 h-4" />
+            </IconButton>
+          </div>
+        ) : (
+          <>
+            {
+              <IconButton
+                onClick={() => setIsEditing(true)}
+                title="Edit API Key"
+                className="bg-blue-500/10 hover:bg-blue-500/20 text-blue-500"
+              >
+                <div className="i-ph:pencil-simple w-4 h-4" />
+              </IconButton>
+            }
+            {provider?.getApiKeyLink && !apiKey && (
+              <IconButton
+                onClick={() => window.open(provider?.getApiKeyLink)}
+                title="Get API Key"
+                className="bg-purple-500/10 hover:bg-purple-500/20 text-purple-500 flex items-center gap-2"
+              >
+                <span className="text-xs whitespace-nowrap">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+                <div className={`${provider?.icon || 'i-ph:key'} w-4 h-4`} />
+              </IconButton>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};