crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/chat/NetlifyDeploymentLink.client.tsx

@@ -0,0 +1,51 @@
+import { useStore } from '@nanostores/react';
+import { netlifyConnection, fetchNetlifyStats } from '~/lib/stores/netlify';
+import { chatId } from '~/lib/persistence/useChatHistory';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useEffect } from 'react';
+
+export function NetlifyDeploymentLink() {
+  const connection = useStore(netlifyConnection);
+  const currentChatId = useStore(chatId);
+
+  useEffect(() => {
+    if (connection.token && currentChatId) {
+      fetchNetlifyStats(connection.token);
+    }
+  }, [connection.token, currentChatId]);
+
+  const deployedSite = connection.stats?.sites?.find((site) => site.name.includes(`bolt-diy-${currentChatId}`));
+
+  if (!deployedSite) {
+    return null;
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <a
+            href={deployedSite.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#00AD9F] z-50"
+            onClick={(e) => {
+              e.stopPropagation(); // This is to prevent click from bubbling up
+            }}
+          >
+            <div className="i-ph:link w-4 h-4 hover:text-blue-400" />
+          </a>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="px-3 py-2 rounded bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary text-xs z-50"
+            sideOffset={5}
+          >
+            {deployedSite.url}
+            <Tooltip.Arrow className="fill-bolt-elements-background-depth-3" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}

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

@@ -0,0 +1,110 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useState } from 'react';
+import type { ProgressAnnotation } from '~/types/context';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+
+export default function ProgressCompilation({ data }: { data?: ProgressAnnotation[] }) {
+  const [progressList, setProgressList] = React.useState<ProgressAnnotation[]>([]);
+  const [expanded, setExpanded] = useState(false);
+  React.useEffect(() => {
+    if (!data || data.length == 0) {
+      setProgressList([]);
+      return;
+    }
+
+    const progressMap = new Map<string, ProgressAnnotation>();
+    data.forEach((x) => {
+      const existingProgress = progressMap.get(x.label);
+
+      if (existingProgress && existingProgress.status === 'complete') {
+        return;
+      }
+
+      progressMap.set(x.label, x);
+    });
+
+    const newData = Array.from(progressMap.values());
+    newData.sort((a, b) => a.order - b.order);
+    setProgressList(newData);
+  }, [data]);
+
+  if (progressList.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <AnimatePresence>
+      <div
+        className={classNames(
+          'bg-bolt-elements-background-depth-2',
+          'border border-bolt-elements-borderColor',
+          'shadow-lg rounded-lg  relative w-full max-w-chat mx-auto z-prompt',
+          'p-1',
+        )}
+      >
+        <div
+          className={classNames(
+            'bg-bolt-elements-item-backgroundAccent',
+            'p-1 rounded-lg text-bolt-elements-item-contentAccent',
+            'flex ',
+          )}
+        >
+          <div className="flex-1">
+            <AnimatePresence>
+              {expanded ? (
+                <motion.div
+                  className="actions"
+                  initial={{ height: 0 }}
+                  animate={{ height: 'auto' }}
+                  exit={{ height: '0px' }}
+                  transition={{ duration: 0.15 }}
+                >
+                  {progressList.map((x, i) => {
+                    return <ProgressItem key={i} progress={x} />;
+                  })}
+                </motion.div>
+              ) : (
+                <ProgressItem progress={progressList.slice(-1)[0]} />
+              )}
+            </AnimatePresence>
+          </div>
+          <motion.button
+            initial={{ width: 0 }}
+            animate={{ width: 'auto' }}
+            exit={{ width: 0 }}
+            transition={{ duration: 0.15, ease: cubicEasingFn }}
+            className=" p-1 rounded-lg bg-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-artifacts-backgroundHover"
+            onClick={() => setExpanded((v) => !v)}
+          >
+            <div className={expanded ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+          </motion.button>
+        </div>
+      </div>
+    </AnimatePresence>
+  );
+}
+
+const ProgressItem = ({ progress }: { progress: ProgressAnnotation }) => {
+  return (
+    <motion.div
+      className={classNames('flex text-sm gap-3')}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.15 }}
+    >
+      <div className="flex items-center gap-1.5 ">
+        <div>
+          {progress.status === 'in-progress' ? (
+            <div className="i-svg-spinners:90-ring-with-bg"></div>
+          ) : progress.status === 'complete' ? (
+            <div className="i-ph:check"></div>
+          ) : null}
+        </div>
+        {/* {x.label} */}
+      </div>
+      {progress.message}
+    </motion.div>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+interface ScreenshotStateManagerProps {
+  setUploadedFiles?: (files: File[]) => void;
+  setImageDataList?: (dataList: string[]) => void;
+  uploadedFiles: File[];
+  imageDataList: string[];
+}
+
+export const ScreenshotStateManager = ({
+  setUploadedFiles,
+  setImageDataList,
+  uploadedFiles,
+  imageDataList,
+}: ScreenshotStateManagerProps) => {
+  useEffect(() => {
+    if (setUploadedFiles && setImageDataList) {
+      (window as any).__BOLT_SET_UPLOADED_FILES__ = setUploadedFiles;
+      (window as any).__BOLT_SET_IMAGE_DATA_LIST__ = setImageDataList;
+      (window as any).__BOLT_UPLOADED_FILES__ = uploadedFiles;
+      (window as any).__BOLT_IMAGE_DATA_LIST__ = imageDataList;
+    }
+
+    return () => {
+      delete (window as any).__BOLT_SET_UPLOADED_FILES__;
+      delete (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
+      delete (window as any).__BOLT_UPLOADED_FILES__;
+      delete (window as any).__BOLT_IMAGE_DATA_LIST__;
+    };
+  }, [setUploadedFiles, setImageDataList, uploadedFiles, imageDataList]);
+
+  return null;
+};

tools/bolt.diy/app/components/chat/SendButton.client.tsx

@@ -0,0 +1,39 @@
+import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
+
+interface SendButtonProps {
+  show: boolean;
+  isStreaming?: boolean;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onImagesSelected?: (images: File[]) => void;
+}
+
+const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
+
+export const SendButton = ({ show, isStreaming, disabled, onClick }: SendButtonProps) => {
+  return (
+    <AnimatePresence>
+      {show ? (
+        <motion.button
+          className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme disabled:opacity-50 disabled:cursor-not-allowed"
+          transition={{ ease: customEasingFn, duration: 0.17 }}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          disabled={disabled}
+          onClick={(event) => {
+            event.preventDefault();
+
+            if (!disabled) {
+              onClick?.(event);
+            }
+          }}
+        >
+          <div className="text-lg">
+            {!isStreaming ? <div className="i-ph:arrow-right"></div> : <div className="i-ph:stop-circle-bold"></div>}
+          </div>
+        </motion.button>
+      ) : null}
+    </AnimatePresence>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { IconButton } from '~/components/ui/IconButton';
+import { classNames } from '~/utils/classNames';
+import React from 'react';
+
+export const SpeechRecognitionButton = ({
+  isListening,
+  onStart,
+  onStop,
+  disabled,
+}: {
+  isListening: boolean;
+  onStart: () => void;
+  onStop: () => void;
+  disabled: boolean;
+}) => {
+  return (
+    <IconButton
+      title={isListening ? 'Stop listening' : 'Start speech recognition'}
+      disabled={disabled}
+      className={classNames('transition-all', {
+        'text-bolt-elements-item-contentAccent': isListening,
+      })}
+      onClick={isListening ? onStop : onStart}
+    >
+      {isListening ? <div className="i-ph:microphone-slash text-xl" /> : <div className="i-ph:microphone text-xl" />}
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Template } from '~/types/template';
+import { STARTER_TEMPLATES } from '~/utils/constants';
+
+interface FrameworkLinkProps {
+  template: Template;
+}
+
+const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
+  <a
+    href={`/git?url=https://github.com/${template.githubRepo}.git`}
+    data-state="closed"
+    data-discover="true"
+    className="items-center justify-center"
+  >
+    <div
+      className={`inline-block ${template.icon} w-8 h-8 text-4xl transition-theme hover:text-purple-500 dark:text-white dark:opacity-50 dark:hover:opacity-100 dark:hover:text-purple-400 transition-all grayscale hover:grayscale-0 transition`}
+      title={template.label}
+    />
+  </a>
+);
+
+const StarterTemplates: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
+      <div className="flex justify-center">
+        <div className="flex flex-wrap justify-center items-center gap-4 max-w-sm">
+          {STARTER_TEMPLATES.map((template) => (
+            <FrameworkLink key={template.name} template={template} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StarterTemplates;

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

@@ -0,0 +1,199 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import type { SupabaseAlert } from '~/types/actions';
+import { classNames } from '~/utils/classNames';
+import { supabaseConnection } from '~/lib/stores/supabase';
+import { useStore } from '@nanostores/react';
+import { useState } from 'react';
+
+interface Props {
+  alert: SupabaseAlert;
+  clearAlert: () => void;
+  postMessage: (message: string) => void;
+}
+
+export function SupabaseChatAlert({ alert, clearAlert, postMessage }: Props) {
+  const { content } = alert;
+  const connection = useStore(supabaseConnection);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  // Determine connection state
+  const isConnected = !!(connection.token && connection.selectedProjectId);
+
+  // Set title and description based on connection state
+  const title = isConnected ? 'Supabase Query' : 'Supabase Connection Required';
+  const description = isConnected ? 'Execute database query' : 'Supabase connection required';
+  const message = isConnected
+    ? 'Please review the proposed changes and apply them to your database.'
+    : 'Please connect to Supabase to continue with this operation.';
+
+  const handleConnectClick = () => {
+    // Dispatch an event to open the Supabase connection dialog
+    document.dispatchEvent(new CustomEvent('open-supabase-connection'));
+  };
+
+  // Determine if we should show the Connect button or Apply Changes button
+  const showConnectButton = !isConnected;
+
+  const executeSupabaseAction = async (sql: string) => {
+    if (!connection.token || !connection.selectedProjectId) {
+      console.error('No Supabase token or project selected');
+      return;
+    }
+
+    setIsExecuting(true);
+
+    try {
+      const response = await fetch('/api/supabase/query', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${connection.token}`,
+        },
+        body: JSON.stringify({
+          projectId: connection.selectedProjectId,
+          query: sql,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = (await response.json()) as any;
+        throw new Error(`Supabase query failed: ${errorData.error?.message || response.statusText}`);
+      }
+
+      const result = await response.json();
+      console.log('Supabase query executed successfully:', result);
+      clearAlert();
+    } catch (error) {
+      console.error('Failed to execute Supabase action:', error);
+      postMessage(
+        `*Error executing Supabase query please fix and return the query again*\n\`\`\`\n${error instanceof Error ? error.message : String(error)}\n\`\`\`\n`,
+      );
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  const cleanSqlContent = (content: string) => {
+    if (!content) {
+      return '';
+    }
+
+    let cleaned = content.replace(/\/\*[\s\S]*?\*\//g, '');
+
+    cleaned = cleaned.replace(/(--).*$/gm, '').replace(/(#).*$/gm, '');
+
+    const statements = cleaned
+      .split(';')
+      .map((stmt) => stmt.trim())
+      .filter((stmt) => stmt.length > 0)
+      .join(';\n\n');
+
+    return statements;
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className="max-w-chat rounded-lg border-l-2 border-l-[#098F5F] border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2"
+      >
+        {/* Header */}
+        <div className="p-4 pb-2">
+          <div className="flex items-center gap-2">
+            <img height="10" width="18" crossOrigin="anonymous" src="https://cdn.simpleicons.org/supabase" />
+            <h3 className="text-sm font-medium text-[#3DCB8F]">{title}</h3>
+          </div>
+        </div>
+
+        {/* SQL Content */}
+        <div className="px-4">
+          {!isConnected ? (
+            <div className="p-3 rounded-md bg-bolt-elements-background-depth-3">
+              <span className="text-sm text-bolt-elements-textPrimary">
+                You must first connect to Supabase and select a project.
+              </span>
+            </div>
+          ) : (
+            <>
+              <div
+                className="flex items-center p-2 rounded-md bg-bolt-elements-background-depth-3 cursor-pointer"
+                onClick={() => setIsCollapsed(!isCollapsed)}
+              >
+                <div className="i-ph:database text-bolt-elements-textPrimary mr-2"></div>
+                <span className="text-sm text-bolt-elements-textPrimary flex-grow">
+                  {description || 'Create table and setup auth'}
+                </span>
+                <div
+                  className={`i-ph:caret-up text-bolt-elements-textPrimary transition-transform ${isCollapsed ? 'rotate-180' : ''}`}
+                ></div>
+              </div>
+
+              {!isCollapsed && content && (
+                <div className="mt-2 p-3 bg-bolt-elements-background-depth-4 rounded-md overflow-auto max-h-60 font-mono text-xs text-bolt-elements-textSecondary">
+                  <pre>{cleanSqlContent(content)}</pre>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Message and Actions */}
+        <div className="p-4">
+          <p className="text-sm text-bolt-elements-textSecondary mb-4">{message}</p>
+
+          <div className="flex gap-2">
+            {showConnectButton ? (
+              <button
+                onClick={handleConnectClick}
+                className={classNames(
+                  `px-3 py-2 rounded-md text-sm font-medium`,
+                  'bg-[#098F5F]',
+                  'hover:bg-[#0aa06c]',
+                  'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
+                  'text-white',
+                  'flex items-center gap-1.5',
+                )}
+              >
+                Connect to Supabase
+              </button>
+            ) : (
+              <button
+                onClick={() => executeSupabaseAction(content)}
+                disabled={isExecuting}
+                className={classNames(
+                  `px-3 py-2 rounded-md text-sm font-medium`,
+                  'bg-[#098F5F]',
+                  'hover:bg-[#0aa06c]',
+                  'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
+                  'text-white',
+                  'flex items-center gap-1.5',
+                  isExecuting ? 'opacity-70 cursor-not-allowed' : '',
+                )}
+              >
+                {isExecuting ? 'Applying...' : 'Apply Changes'}
+              </button>
+            )}
+            <button
+              onClick={clearAlert}
+              disabled={isExecuting}
+              className={classNames(
+                `px-3 py-2 rounded-md text-sm font-medium`,
+                'bg-[#503B26]',
+                'hover:bg-[#774f28]',
+                'focus:outline-none',
+                'text-[#F79007]',
+                isExecuting ? 'opacity-70 cursor-not-allowed' : '',
+              )}
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}