crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,108 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ActionAlert } from '~/types/actions';
+import { classNames } from '~/utils/classNames';
+
+interface Props {
+  alert: ActionAlert;
+  clearAlert: () => void;
+  postMessage: (message: string) => void;
+}
+
+export default function ChatAlert({ alert, clearAlert, postMessage }: Props) {
+  const { description, content, source } = alert;
+
+  const isPreview = source === 'preview';
+  const title = isPreview ? 'Preview Error' : 'Terminal Error';
+  const message = isPreview
+    ? 'We encountered an error while running the preview. Would you like Bolt to analyze and help resolve this issue?'
+    : 'We encountered an error while running terminal commands. Would you like Bolt to analyze and help resolve this issue?';
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2`}
+      >
+        <div className="flex items-start">
+          {/* Icon */}
+          <motion.div
+            className="flex-shrink-0"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            <div className={`i-ph:warning-duotone text-xl text-bolt-elements-button-danger-text`}></div>
+          </motion.div>
+          {/* Content */}
+          <div className="ml-3 flex-1">
+            <motion.h3
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className={`text-sm font-medium text-bolt-elements-textPrimary`}
+            >
+              {title}
+            </motion.h3>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className={`mt-2 text-sm text-bolt-elements-textSecondary`}
+            >
+              <p>{message}</p>
+              {description && (
+                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
+                  Error: {description}
+                </div>
+              )}
+            </motion.div>
+
+            {/* Actions */}
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
+              <div className={classNames(' flex gap-2')}>
+                <button
+                  onClick={() =>
+                    postMessage(
+                      `*Fix this ${isPreview ? 'preview' : 'terminal'} error* \n\`\`\`${isPreview ? 'js' : 'sh'}\n${content}\n\`\`\`\n`,
+                    )
+                  }
+                  className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-primary-background',
+                    'hover:bg-bolt-elements-button-primary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',
+                    'text-bolt-elements-button-primary-text',
+                    'flex items-center gap-1.5',
+                  )}
+                >
+                  <div className="i-ph:chat-circle-duotone"></div>
+                  Ask Bolt
+                </button>
+                <button
+                  onClick={clearAlert}
+                  className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-secondary-background',
+                    'hover:bg-bolt-elements-button-secondary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
+                    'text-bolt-elements-button-secondary-text',
+                  )}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

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

@@ -0,0 +1,334 @@
+import React from 'react';
+import { ClientOnly } from 'remix-utils/client-only';
+import { classNames } from '~/utils/classNames';
+import { PROVIDER_LIST } from '~/utils/constants';
+import { ModelSelector } from '~/components/chat/ModelSelector';
+import { APIKeyManager } from './APIKeyManager';
+import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
+import FilePreview from './FilePreview';
+import { ScreenshotStateManager } from './ScreenshotStateManager';
+import { SendButton } from './SendButton.client';
+import { IconButton } from '~/components/ui/IconButton';
+import { toast } from 'react-toastify';
+import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
+import { SupabaseConnection } from './SupabaseConnection';
+import { ExpoQrModal } from '~/components/workbench/ExpoQrModal';
+import styles from './BaseChat.module.scss';
+import type { ProviderInfo } from '~/types/model';
+import { ColorSchemeDialog } from '~/components/ui/ColorSchemeDialog';
+import type { DesignScheme } from '~/types/design-scheme';
+import type { ElementInfo } from '~/components/workbench/Inspector';
+import { McpTools } from './MCPTools';
+
+interface ChatBoxProps {
+  isModelSettingsCollapsed: boolean;
+  setIsModelSettingsCollapsed: (collapsed: boolean) => void;
+  provider: any;
+  providerList: any[];
+  modelList: any[];
+  apiKeys: Record<string, string>;
+  isModelLoading: string | undefined;
+  onApiKeysChange: (providerName: string, apiKey: string) => void;
+  uploadedFiles: File[];
+  imageDataList: string[];
+  textareaRef: React.RefObject<HTMLTextAreaElement> | undefined;
+  input: string;
+  handlePaste: (e: React.ClipboardEvent) => void;
+  TEXTAREA_MIN_HEIGHT: number;
+  TEXTAREA_MAX_HEIGHT: number;
+  isStreaming: boolean;
+  handleSendMessage: (event: React.UIEvent, messageInput?: string) => void;
+  isListening: boolean;
+  startListening: () => void;
+  stopListening: () => void;
+  chatStarted: boolean;
+  exportChat?: () => void;
+  qrModalOpen: boolean;
+  setQrModalOpen: (open: boolean) => void;
+  handleFileUpload: () => void;
+  setProvider?: ((provider: ProviderInfo) => void) | undefined;
+  model?: string | undefined;
+  setModel?: ((model: string) => void) | undefined;
+  setUploadedFiles?: ((files: File[]) => void) | undefined;
+  setImageDataList?: ((dataList: string[]) => void) | undefined;
+  handleInputChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
+  handleStop?: (() => void) | undefined;
+  enhancingPrompt?: boolean | undefined;
+  enhancePrompt?: (() => void) | undefined;
+  chatMode?: 'discuss' | 'build';
+  setChatMode?: (mode: 'discuss' | 'build') => void;
+  designScheme?: DesignScheme;
+  setDesignScheme?: (scheme: DesignScheme) => void;
+  selectedElement?: ElementInfo | null;
+  setSelectedElement?: ((element: ElementInfo | null) => void) | undefined;
+}
+
+export const ChatBox: React.FC<ChatBoxProps> = (props) => {
+  return (
+    <div
+      className={classNames(
+        'relative bg-bolt-elements-background-depth-2 backdrop-blur p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
+
+        /*
+         * {
+         *   'sticky bottom-2': chatStarted,
+         * },
+         */
+      )}
+    >
+      <svg className={classNames(styles.PromptEffectContainer)}>
+        <defs>
+          <linearGradient
+            id="line-gradient"
+            x1="20%"
+            y1="0%"
+            x2="-14%"
+            y2="10%"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="rotate(-45)"
+          >
+            <stop offset="0%" stopColor="#b44aff" stopOpacity="0%"></stop>
+            <stop offset="40%" stopColor="#b44aff" stopOpacity="80%"></stop>
+            <stop offset="50%" stopColor="#b44aff" stopOpacity="80%"></stop>
+            <stop offset="100%" stopColor="#b44aff" stopOpacity="0%"></stop>
+          </linearGradient>
+          <linearGradient id="shine-gradient">
+            <stop offset="0%" stopColor="white" stopOpacity="0%"></stop>
+            <stop offset="40%" stopColor="#ffffff" stopOpacity="80%"></stop>
+            <stop offset="50%" stopColor="#ffffff" stopOpacity="80%"></stop>
+            <stop offset="100%" stopColor="white" stopOpacity="0%"></stop>
+          </linearGradient>
+        </defs>
+        <rect className={classNames(styles.PromptEffectLine)} pathLength="100" strokeLinecap="round"></rect>
+        <rect className={classNames(styles.PromptShine)} x="48" y="24" width="70" height="1"></rect>
+      </svg>
+      <div>
+        <ClientOnly>
+          {() => (
+            <div className={props.isModelSettingsCollapsed ? 'hidden' : ''}>
+              <ModelSelector
+                key={props.provider?.name + ':' + props.modelList.length}
+                model={props.model}
+                setModel={props.setModel}
+                modelList={props.modelList}
+                provider={props.provider}
+                setProvider={props.setProvider}
+                providerList={props.providerList || (PROVIDER_LIST as ProviderInfo[])}
+                apiKeys={props.apiKeys}
+                modelLoading={props.isModelLoading}
+              />
+              {(props.providerList || []).length > 0 &&
+                props.provider &&
+                !LOCAL_PROVIDERS.includes(props.provider.name) && (
+                  <APIKeyManager
+                    provider={props.provider}
+                    apiKey={props.apiKeys[props.provider.name] || ''}
+                    setApiKey={(key) => {
+                      props.onApiKeysChange(props.provider.name, key);
+                    }}
+                  />
+                )}
+            </div>
+          )}
+        </ClientOnly>
+      </div>
+      <FilePreview
+        files={props.uploadedFiles}
+        imageDataList={props.imageDataList}
+        onRemove={(index) => {
+          props.setUploadedFiles?.(props.uploadedFiles.filter((_, i) => i !== index));
+          props.setImageDataList?.(props.imageDataList.filter((_, i) => i !== index));
+        }}
+      />
+      <ClientOnly>
+        {() => (
+          <ScreenshotStateManager
+            setUploadedFiles={props.setUploadedFiles}
+            setImageDataList={props.setImageDataList}
+            uploadedFiles={props.uploadedFiles}
+            imageDataList={props.imageDataList}
+          />
+        )}
+      </ClientOnly>
+      {props.selectedElement && (
+        <div className="flex mx-1.5 gap-2 items-center justify-between rounded-lg rounded-b-none border border-b-none border-bolt-elements-borderColor text-bolt-elements-textPrimary flex py-1 px-2.5 font-medium text-xs">
+          <div className="flex gap-2 items-center lowercase">
+            <code className="bg-accent-500 rounded-4px px-1.5 py-1 mr-0.5 text-white">
+              {props?.selectedElement?.tagName}
+            </code>
+            selected for inspection
+          </div>
+          <button
+            className="bg-transparent text-accent-500 pointer-auto"
+            onClick={() => props.setSelectedElement?.(null)}
+          >
+            Clear
+          </button>
+        </div>
+      )}
+      <div
+        className={classNames('relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg')}
+      >
+        <textarea
+          ref={props.textareaRef}
+          className={classNames(
+            'w-full pl-4 pt-4 pr-16 outline-none resize-none text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent text-sm',
+            'transition-all duration-200',
+            'hover:border-bolt-elements-focus',
+          )}
+          onDragEnter={(e) => {
+            e.preventDefault();
+            e.currentTarget.style.border = '2px solid #1488fc';
+          }}
+          onDragOver={(e) => {
+            e.preventDefault();
+            e.currentTarget.style.border = '2px solid #1488fc';
+          }}
+          onDragLeave={(e) => {
+            e.preventDefault();
+            e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
+          }}
+          onDrop={(e) => {
+            e.preventDefault();
+            e.currentTarget.style.border = '1px solid var(--bolt-elements-borderColor)';
+
+            const files = Array.from(e.dataTransfer.files);
+            files.forEach((file) => {
+              if (file.type.startsWith('image/')) {
+                const reader = new FileReader();
+
+                reader.onload = (e) => {
+                  const base64Image = e.target?.result as string;
+                  props.setUploadedFiles?.([...props.uploadedFiles, file]);
+                  props.setImageDataList?.([...props.imageDataList, base64Image]);
+                };
+                reader.readAsDataURL(file);
+              }
+            });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              if (event.shiftKey) {
+                return;
+              }
+
+              event.preventDefault();
+
+              if (props.isStreaming) {
+                props.handleStop?.();
+                return;
+              }
+
+              // ignore if using input method engine
+              if (event.nativeEvent.isComposing) {
+                return;
+              }
+
+              props.handleSendMessage?.(event);
+            }
+          }}
+          value={props.input}
+          onChange={(event) => {
+            props.handleInputChange?.(event);
+          }}
+          onPaste={props.handlePaste}
+          style={{
+            minHeight: props.TEXTAREA_MIN_HEIGHT,
+            maxHeight: props.TEXTAREA_MAX_HEIGHT,
+          }}
+          placeholder={props.chatMode === 'build' ? 'How can Bolt help you today?' : 'What would you like to discuss?'}
+          translate="no"
+        />
+        <ClientOnly>
+          {() => (
+            <SendButton
+              show={props.input.length > 0 || props.isStreaming || props.uploadedFiles.length > 0}
+              isStreaming={props.isStreaming}
+              disabled={!props.providerList || props.providerList.length === 0}
+              onClick={(event) => {
+                if (props.isStreaming) {
+                  props.handleStop?.();
+                  return;
+                }
+
+                if (props.input.length > 0 || props.uploadedFiles.length > 0) {
+                  props.handleSendMessage?.(event);
+                }
+              }}
+            />
+          )}
+        </ClientOnly>
+        <div className="flex justify-between items-center text-sm p-4 pt-2">
+          <div className="flex gap-1 items-center">
+            <ColorSchemeDialog designScheme={props.designScheme} setDesignScheme={props.setDesignScheme} />
+            <McpTools />
+            <IconButton title="Upload file" className="transition-all" onClick={() => props.handleFileUpload()}>
+              <div className="i-ph:paperclip text-xl"></div>
+            </IconButton>
+            <IconButton
+              title="Enhance prompt"
+              disabled={props.input.length === 0 || props.enhancingPrompt}
+              className={classNames('transition-all', props.enhancingPrompt ? 'opacity-100' : '')}
+              onClick={() => {
+                props.enhancePrompt?.();
+                toast.success('Prompt enhanced!');
+              }}
+            >
+              {props.enhancingPrompt ? (
+                <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+              ) : (
+                <div className="i-bolt:stars text-xl"></div>
+              )}
+            </IconButton>
+
+            <SpeechRecognitionButton
+              isListening={props.isListening}
+              onStart={props.startListening}
+              onStop={props.stopListening}
+              disabled={props.isStreaming}
+            />
+            {props.chatStarted && (
+              <IconButton
+                title="Discuss"
+                className={classNames(
+                  'transition-all flex items-center gap-1 px-1.5',
+                  props.chatMode === 'discuss'
+                    ? '!bg-bolt-elements-item-backgroundAccent !text-bolt-elements-item-contentAccent'
+                    : 'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentDefault',
+                )}
+                onClick={() => {
+                  props.setChatMode?.(props.chatMode === 'discuss' ? 'build' : 'discuss');
+                }}
+              >
+                <div className={`i-ph:chats text-xl`} />
+                {props.chatMode === 'discuss' ? <span>Discuss</span> : <span />}
+              </IconButton>
+            )}
+            <IconButton
+              title="Model Settings"
+              className={classNames('transition-all flex items-center gap-1', {
+                'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent':
+                  props.isModelSettingsCollapsed,
+                'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentDefault':
+                  !props.isModelSettingsCollapsed,
+              })}
+              onClick={() => props.setIsModelSettingsCollapsed(!props.isModelSettingsCollapsed)}
+              disabled={!props.providerList || props.providerList.length === 0}
+            >
+              <div className={`i-ph:caret-${props.isModelSettingsCollapsed ? 'right' : 'down'} text-lg`} />
+              {props.isModelSettingsCollapsed ? <span className="text-xs">{props.model}</span> : <span />}
+            </IconButton>
+          </div>
+          {props.input.length > 3 ? (
+            <div className="text-xs text-bolt-elements-textTertiary">
+              Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
+              <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> a new line
+            </div>
+          ) : null}
+          <SupabaseConnection />
+          <ExpoQrModal open={props.qrModalOpen} onClose={() => props.setQrModalOpen(false)} />
+        </div>
+      </div>
+    </div>
+  );
+};

tools/bolt.diy/app/components/chat/CodeBlock.module.scss

@@ -0,0 +1,10 @@
+.CopyButtonContainer {
+  button:before {
+    content: 'Copied';
+    font-size: 12px;
+    position: absolute;
+    left: -53px;
+    padding: 2px 6px;
+    height: 30px;
+  }
+}

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

@@ -0,0 +1,85 @@
+import { memo, useEffect, useState } from 'react';
+import { bundledLanguages, codeToHtml, isSpecialLang, type BundledLanguage, type SpecialLanguage } from 'shiki';
+import { classNames } from '~/utils/classNames';
+import { createScopedLogger } from '~/utils/logger';
+
+import styles from './CodeBlock.module.scss';
+
+const logger = createScopedLogger('CodeBlock');
+
+interface CodeBlockProps {
+  className?: string;
+  code: string;
+  language?: BundledLanguage | SpecialLanguage;
+  theme?: 'light-plus' | 'dark-plus';
+  disableCopy?: boolean;
+}
+
+export const CodeBlock = memo(
+  ({ className, code, language = 'plaintext', theme = 'dark-plus', disableCopy = false }: CodeBlockProps) => {
+    const [html, setHTML] = useState<string | undefined>(undefined);
+    const [copied, setCopied] = useState(false);
+
+    const copyToClipboard = () => {
+      if (copied) {
+        return;
+      }
+
+      navigator.clipboard.writeText(code);
+
+      setCopied(true);
+
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    };
+
+    useEffect(() => {
+      let effectiveLanguage = language;
+
+      if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
+        logger.warn(`Unsupported language '${language}', falling back to plaintext`);
+        effectiveLanguage = 'plaintext';
+      }
+
+      logger.trace(`Language = ${effectiveLanguage}`);
+
+      const processCode = async () => {
+        setHTML(await codeToHtml(code, { lang: effectiveLanguage, theme }));
+      };
+
+      processCode();
+    }, [code, language, theme]);
+
+    return (
+      <div className={classNames('relative group text-left', className)}>
+        <div
+          className={classNames(
+            styles.CopyButtonContainer,
+            'bg-transparant absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
+            {
+              'rounded-l-0 opacity-100': copied,
+            },
+          )}
+        >
+          {!disableCopy && (
+            <button
+              className={classNames(
+                'flex items-center bg-accent-500 p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300 rounded-md transition-theme',
+                {
+                  'before:opacity-0': !copied,
+                  'before:opacity-100': copied,
+                },
+              )}
+              title="Copy Code"
+              onClick={() => copyToClipboard()}
+            >
+              <div className="i-ph:clipboard-text-duotone"></div>
+            </button>
+          )}
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: html ?? '' }}></div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,17 @@
+import { classNames } from '~/utils/classNames';
+import { IconButton } from '~/components/ui';
+
+export function DiscussMode() {
+  return (
+    <div>
+      <IconButton
+        title="Discuss"
+        className={classNames(
+          'transition-all flex items-center gap-1 bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent',
+        )}
+      >
+        <div className={`i-ph:chats text-xl`} />
+      </IconButton>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const EXAMPLE_PROMPTS = [
+  { text: 'Create a mobile app about bolt.diy' },
+  { text: 'Build a todo app in React using Tailwind' },
+  { text: 'Build a simple blog using Astro' },
+  { text: 'Create a cookie consent form using Material UI' },
+  { text: 'Make a space invaders game' },
+  { text: 'Make a Tic Tac Toe game in html, css and js only' },
+];
+
+export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) {
+  return (
+    <div id="examples" className="relative flex flex-col gap-9 w-full max-w-3xl mx-auto flex justify-center mt-6">
+      <div
+        className="flex flex-wrap justify-center gap-2"
+        style={{
+          animation: '.25s ease-out 0s 1 _fade-and-move-in_g2ptj_1 forwards',
+        }}
+      >
+        {EXAMPLE_PROMPTS.map((examplePrompt, index: number) => {
+          return (
+            <button
+              key={index}
+              onClick={(event) => {
+                sendMessage?.(event, examplePrompt.text);
+              }}
+              className="border border-bolt-elements-borderColor rounded-full bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary px-3 py-1 text-xs transition-theme"
+            >
+              {examplePrompt.text}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface FilePreviewProps {
+  files: File[];
+  imageDataList: string[];
+  onRemove: (index: number) => void;
+}
+
+const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemove }) => {
+  if (!files || files.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-row overflow-x-auto mx-2 -mt-1 p-2 bg-bolt-elements-background-depth-3 border border-b-none border-bolt-elements-borderColor rounded-lg rounded-b-none">
+      {files.map((file, index) => (
+        <div key={file.name + file.size} className="mr-2 relative">
+          {imageDataList[index] && (
+            <div className="relative">
+              <img src={imageDataList[index]} alt={file.name} className="max-h-20 rounded-lg" />
+              <button
+                onClick={() => onRemove(index)}
+                className="absolute -top-1 -right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
+              >
+                <div className="i-ph:x w-3 h-3 text-gray-200" />
+              </button>
+              <div className="absolute bottom-0 w-full h-5 flex items-center px-2 rounded-b-lg text-bolt-elements-textTertiary font-thin text-xs bg-bolt-elements-background-depth-2">
+                <span className="truncate">{file.name}</span>
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FilePreview;