Merge branch 'main' into fix/described_by

2024-12-19 18:02:43 +05:30
parent 2064c83177 1d716c0925
commit 3e2fc32a46
62 changed files with 2284 additions and 1711 deletions
--- a/app/components/chat/AssistantMessage.tsx
+++ b/app/components/chat/AssistantMessage.tsx
@@ -1,13 +1,30 @@
 import { memo } from 'react';
 import { Markdown } from './Markdown';
+import type { JSONValue } from 'ai';

 interface AssistantMessageProps {
  content: string;
+  annotations?: JSONValue[];
 }

-export const AssistantMessage = memo(({ content }: AssistantMessageProps) => {
+export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
+  const filteredAnnotations = (annotations?.filter(
+    (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
+  ) || []) as { type: string; value: any }[];
+
+  const usage: {
+    completionTokens: number;
+    promptTokens: number;
+    totalTokens: number;
+  } = filteredAnnotations.find((annotation) => annotation.type === 'usage')?.value;
+
  return (
    <div className="overflow-hidden w-full">
+      {usage && (
+        <div className="text-sm text-bolt-elements-textSecondary mb-2">
+          Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+        </div>
+      )}
      <Markdown html>{content}</Markdown>
    </div>
  );
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -26,6 +26,8 @@ import FilePreview from './FilePreview';
 import { ModelSelector } from '~/components/chat/ModelSelector';
 import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
 import type { IProviderSetting, ProviderInfo } from '~/types/model';
+import { ScreenshotStateManager } from './ScreenshotStateManager';
+import { toast } from 'react-toastify';

 const TEXTAREA_MIN_HEIGHT = 76;

@@ -75,7 +77,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
      input = '',
      enhancingPrompt,
      handleInputChange,
-      promptEnhanced,
+
+      // promptEnhanced,
      enhancePrompt,
      sendMessage,
      handleStop,
@@ -116,6 +119,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(

    useEffect(() => {
      // Load API keys from cookies on component mount
+
+      let parsedApiKeys: Record<string, string> | undefined = {};
+
      try {
        const storedApiKeys = Cookies.get('apiKeys');

@@ -124,6 +130,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(

          if (typeof parsedKeys === 'object' && parsedKeys !== null) {
            setApiKeys(parsedKeys);
+            parsedApiKeys = parsedKeys;
          }
        }
      } catch (error) {
@@ -152,7 +159,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
        Cookies.remove('providers');
      }

-      initializeModelList(providerSettings).then((modelList) => {
+      initializeModelList({ apiKeys: parsedApiKeys, providerSettings }).then((modelList) => {
        setModelList(modelList);
      });

@@ -376,6 +383,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                    setImageDataList?.(imageDataList.filter((_, i) => i !== index));
                  }}
                />
+                <ClientOnly>
+                  {() => (
+                    <ScreenshotStateManager
+                      setUploadedFiles={setUploadedFiles}
+                      setImageDataList={setImageDataList}
+                      uploadedFiles={uploadedFiles}
+                      imageDataList={imageDataList}
+                    />
+                  )}
+                </ClientOnly>
                <div
                  className={classNames(
                    'relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg',
@@ -431,6 +448,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                          return;
                        }

+                        // ignore if using input method engine
+                        if (event.nativeEvent.isComposing) {
+                          return;
+                        }
+
                        handleSendMessage?.(event);
                      }
                    }}
@@ -473,25 +495,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                      <IconButton
                        title="Enhance prompt"
                        disabled={input.length === 0 || enhancingPrompt}
-                        className={classNames(
-                          'transition-all',
-                          enhancingPrompt ? 'opacity-100' : '',
-                          promptEnhanced ? 'text-bolt-elements-item-contentAccent' : '',
-                          promptEnhanced ? 'pr-1.5' : '',
-                          promptEnhanced ? 'enabled:hover:bg-bolt-elements-item-backgroundAccent' : '',
-                        )}
-                        onClick={() => enhancePrompt?.()}
+                        className={classNames('transition-all', enhancingPrompt ? 'opacity-100' : '')}
+                        onClick={() => {
+                          enhancePrompt?.();
+                          toast.success('Prompt enhanced!');
+                        }}
                      >
                        {enhancingPrompt ? (
-                          <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
-                            <div className="ml-1.5">Enhancing prompt...</div>
-                          </>
+                          <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>
-                            {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
-                          </>
+                          <div className="i-bolt:stars text-xl"></div>
                        )}
                      </IconButton>

--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -20,6 +20,7 @@ import Cookies from 'js-cookie';
 import { debounce } from '~/utils/debounce';
 import { useSettings } from '~/lib/hooks/useSettings';
 import type { ProviderInfo } from '~/types/model';
+import { useSearchParams } from '@remix-run/react';

 const toastAnimation = cssTransition({
  enter: 'animated fadeInRight',
@@ -92,8 +93,9 @@ export const ChatImpl = memo(
    const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
    const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
    const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+    const [searchParams, setSearchParams] = useSearchParams();
    const files = useStore(workbenchStore.files);
-    const { activeProviders } = useSettings();
+    const { activeProviders, promptId } = useSettings();

    const [model, setModel] = useState(() => {
      const savedModel = Cookies.get('selectedModel');
@@ -115,19 +117,47 @@ export const ChatImpl = memo(
      body: {
        apiKeys,
        files,
+        promptId,
      },
+      sendExtraMessageFields: true,
      onError: (error) => {
        logger.error('Request failed\n\n', error);
        toast.error(
          'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
        );
      },
-      onFinish: () => {
+      onFinish: (message, response) => {
+        const usage = response.usage;
+
+        if (usage) {
+          console.log('Token usage:', usage);
+
+          // You can now use the usage data as needed
+        }
+
        logger.debug('Finished streaming');
      },
      initialMessages,
      initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
    });
+    useEffect(() => {
+      const prompt = searchParams.get('prompt');
+      console.log(prompt, searchParams, model, provider);
+
+      if (prompt) {
+        setSearchParams({});
+        runAnimation();
+        append({
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
+            },
+          ] as any, // Type assertion to bypass compiler check
+        });
+      }
+    }, [model, provider, searchParams]);

    const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
    const { parsedMessages, parseMessages } = useMessageParser();
--- a/app/components/chat/CodeBlock.tsx
+++ b/app/components/chat/CodeBlock.tsx
@@ -53,7 +53,7 @@ export const CodeBlock = memo(
        <div
          className={classNames(
            styles.CopyButtonContainer,
-            'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
+            '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,
            },
@@ -62,7 +62,7 @@ export const CodeBlock = memo(
          {!disableCopy && (
            <button
              className={classNames(
-                'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+                '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,
--- a/app/components/chat/Messages.client.tsx
+++ b/app/components/chat/Messages.client.tsx
@@ -65,12 +65,16 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                  </div>
                )}
                <div className="grid grid-col-1 w-full">
-                  {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                  {isUserMessage ? (
+                    <UserMessage content={content} />
+                  ) : (
+                    <AssistantMessage content={content} annotations={message.annotations} />
+                  )}
                </div>
                {!isUserMessage && (
                  <div className="flex gap-2 flex-col lg:flex-row">
-                    <WithTooltip tooltip="Revert to this message">
-                      {messageId && (
+                    {messageId && (
+                      <WithTooltip tooltip="Revert to this message">
                        <button
                          onClick={() => handleRewind(messageId)}
                          key="i-ph:arrow-u-up-left"
@@ -79,8 +83,8 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
                            'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
                          )}
                        />
-                      )}
-                    </WithTooltip>
+                      </WithTooltip>
+                    )}

                    <WithTooltip tooltip="Fork chat from this message">
                      <button
--- a/app/components/chat/ScreenshotStateManager.tsx
+++ b/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;
+};
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -12,42 +12,36 @@ interface UserMessageProps {
 export function UserMessage({ content }: UserMessageProps) {
  if (Array.isArray(content)) {
    const textItem = content.find((item) => item.type === 'text');
-    const textContent = sanitizeUserMessage(textItem?.text || '');
+    const textContent = stripMetadata(textItem?.text || '');
    const images = content.filter((item) => item.type === 'image' && item.image);

    return (
      <div className="overflow-hidden pt-[4px]">
-        <div className="flex items-start gap-4">
-          <div className="flex-1">
-            <Markdown limitedMarkdown>{textContent}</Markdown>
-          </div>
-          {images.length > 0 && (
-            <div className="flex-shrink-0 w-[160px]">
-              {images.map((item, index) => (
-                <div key={index} className="relative">
-                  <img
-                    src={item.image}
-                    alt={`Uploaded image ${index + 1}`}
-                    className="w-full h-[160px] rounded-lg object-cover border border-bolt-elements-borderColor"
-                  />
-                </div>
-              ))}
-            </div>
-          )}
+        <div className="flex flex-col gap-4">
+          {textContent && <Markdown html>{textContent}</Markdown>}
+          {images.map((item, index) => (
+            <img
+              key={index}
+              src={item.image}
+              alt={`Image ${index + 1}`}
+              className="max-w-full h-auto rounded-lg"
+              style={{ maxHeight: '512px', objectFit: 'contain' }}
+            />
+          ))}
        </div>
      </div>
    );
  }

-  const textContent = sanitizeUserMessage(content);
+  const textContent = stripMetadata(content);

  return (
    <div className="overflow-hidden pt-[4px]">
-      <Markdown limitedMarkdown>{textContent}</Markdown>
+      <Markdown html>{textContent}</Markdown>
    </div>
  );
 }

-function sanitizeUserMessage(content: string) {
+function stripMetadata(content: string) {
  return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 }
--- a/app/components/git/GitUrlImport.client.tsx
+++ b/app/components/git/GitUrlImport.client.tsx
@@ -8,6 +8,8 @@ import { Chat } from '~/components/chat/Chat.client';
 import { useGit } from '~/lib/hooks/useGit';
 import { useChatHistory } from '~/lib/persistence';
 import { createCommandsMessage, detectProjectCommands } from '~/utils/projectCommands';
+import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
+import { toast } from 'react-toastify';

 const IGNORE_PATTERNS = [
  'node_modules/**',
@@ -38,6 +40,7 @@ export function GitUrlImport() {
  const { ready: historyReady, importChat } = useChatHistory();
  const { ready: gitReady, gitClone } = useGit();
  const [imported, setImported] = useState(false);
+  const [loading, setLoading] = useState(true);

  const importRepo = async (repoUrl?: string) => {
    if (!gitReady && !historyReady) {
@@ -109,9 +112,23 @@ ${file.content}
      return;
    }

-    importRepo(url);
+    importRepo(url).catch((error) => {
+      console.error('Error importing repo:', error);
+      toast.error('Failed to import repository');
+      setLoading(false);
+      window.location.href = '/';
+    });
    setImported(true);
  }, [searchParams, historyReady, gitReady, imported]);

-  return <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>;
+  return (
+    <ClientOnly fallback={<BaseChat />}>
+      {() => (
+        <>
+          <Chat />
+          {loading && <LoadingOverlay message="Please wait while we clone the repository..." />}
+        </>
+      )}
+    </ClientOnly>
+  );
 }
--- a/app/components/settings/SettingsWindow.tsx
+++ b/app/components/settings/SettingsWindow.tsx
@@ -27,8 +27,8 @@ export const SettingsWindow = ({ open, onClose }: SettingsProps) => {
  const tabs: { id: TabType; label: string; icon: string; component?: ReactElement }[] = [
    { id: 'chat-history', label: 'Chat History', icon: 'i-ph:book', component: <ChatHistoryTab /> },
    { id: 'providers', label: 'Providers', icon: 'i-ph:key', component: <ProvidersTab /> },
-    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
    { id: 'connection', label: 'Connection', icon: 'i-ph:link', component: <ConnectionsTab /> },
+    { id: 'features', label: 'Features', icon: 'i-ph:star', component: <FeaturesTab /> },
    ...(debug
      ? [
          {
--- a/app/components/settings/chat-history/ChatHistoryTab.tsx
+++ b/app/components/settings/chat-history/ChatHistoryTab.tsx
@@ -22,6 +22,12 @@ export default function ChatHistoryTab() {
  };

  const handleDeleteAllChats = async () => {
+    const confirmDelete = window.confirm('Are you sure you want to delete all chats? This action cannot be undone.');
+
+    if (!confirmDelete) {
+      return; // Exit if the user cancels
+    }
+
    if (!db) {
      const error = new Error('Database is not available');
      logStore.logError('Failed to delete chats - DB unavailable', error);
--- a/app/components/settings/connections/ConnectionsTab.tsx
+++ b/app/components/settings/connections/ConnectionsTab.tsx
@@ -1,20 +1,93 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import Cookies from 'js-cookie';
 import { logStore } from '~/lib/stores/logs';

+interface GitHubUserResponse {
+  login: string;
+  id: number;
+  [key: string]: any; // for other properties we don't explicitly need
+}
+
 export default function ConnectionsTab() {
  const [githubUsername, setGithubUsername] = useState(Cookies.get('githubUsername') || '');
  const [githubToken, setGithubToken] = useState(Cookies.get('githubToken') || '');
+  const [isConnected, setIsConnected] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);

-  const handleSaveConnection = () => {
-    Cookies.set('githubUsername', githubUsername);
-    Cookies.set('githubToken', githubToken);
-    logStore.logSystem('GitHub connection settings updated', {
-      username: githubUsername,
-      hasToken: !!githubToken,
-    });
-    toast.success('GitHub credentials saved successfully!');
+  useEffect(() => {
+    // Check if credentials exist and verify them
+    if (githubUsername && githubToken) {
+      verifyGitHubCredentials();
+    }
+  }, []);
+
+  const verifyGitHubCredentials = async () => {
+    setIsVerifying(true);
+
+    try {
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Authorization: `Bearer ${githubToken}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = (await response.json()) as GitHubUserResponse;
+
+        if (data.login === githubUsername) {
+          setIsConnected(true);
+          return true;
+        }
+      }
+
+      setIsConnected(false);
+
+      return false;
+    } catch (error) {
+      console.error('Error verifying GitHub credentials:', error);
+      setIsConnected(false);
+
+      return false;
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  const handleSaveConnection = async () => {
+    if (!githubUsername || !githubToken) {
+      toast.error('Please provide both GitHub username and token');
+      return;
+    }
+
+    setIsVerifying(true);
+
+    const isValid = await verifyGitHubCredentials();
+
+    if (isValid) {
+      Cookies.set('githubUsername', githubUsername);
+      Cookies.set('githubToken', githubToken);
+      logStore.logSystem('GitHub connection settings updated', {
+        username: githubUsername,
+        hasToken: !!githubToken,
+      });
+      toast.success('GitHub credentials verified and saved successfully!');
+      Cookies.set('git:github.com', JSON.stringify({ username: githubToken, password: 'x-oauth-basic' }));
+      setIsConnected(true);
+    } else {
+      toast.error('Invalid GitHub credentials. Please check your username and token.');
+    }
+  };
+
+  const handleDisconnect = () => {
+    Cookies.remove('githubUsername');
+    Cookies.remove('githubToken');
+    Cookies.remove('git:github.com');
+    setGithubUsername('');
+    setGithubToken('');
+    setIsConnected(false);
+    logStore.logSystem('GitHub connection removed');
+    toast.success('GitHub connection removed successfully!');
  };

  return (
@@ -27,7 +100,8 @@ export default function ConnectionsTab() {
            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"
+            disabled={isVerifying}
+            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 disabled:opacity-50"
          />
        </div>
        <div className="flex-1">
@@ -36,17 +110,41 @@ export default function ConnectionsTab() {
            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"
+            disabled={isVerifying}
+            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 disabled:opacity-50"
          />
        </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>
+      <div className="flex mb-4 items-center">
+        {!isConnected ? (
+          <button
+            onClick={handleSaveConnection}
+            disabled={isVerifying || !githubUsername || !githubToken}
+            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 disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
+          >
+            {isVerifying ? (
+              <>
+                <div className="i-ph:spinner animate-spin mr-2" />
+                Verifying...
+              </>
+            ) : (
+              'Connect'
+            )}
+          </button>
+        ) : (
+          <button
+            onClick={handleDisconnect}
+            className="bg-bolt-elements-button-danger-background rounded-lg px-4 py-2 mr-2 transition-colors duration-200 hover:bg-bolt-elements-button-danger-backgroundHover text-bolt-elements-button-danger-text"
+          >
+            Disconnect
+          </button>
+        )}
+        {isConnected && (
+          <span className="text-sm text-green-600 flex items-center">
+            <div className="i-ph:check-circle mr-1" />
+            Connected to GitHub
+          </span>
+        )}
      </div>
    </div>
  );
--- a/app/components/settings/debug/DebugTab.tsx
+++ b/app/components/settings/debug/DebugTab.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSettings } from '~/lib/hooks/useSettings';
 import commit from '~/commit.json';
+import { toast } from 'react-toastify';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';

 interface ProviderStatus {
  name: string;
@@ -21,20 +23,37 @@ interface SystemInfo {
  timezone: string;
  memory: string;
  cores: number;
+  deviceType: string;
+  colorDepth: string;
+  pixelRatio: number;
+  online: boolean;
+  cookiesEnabled: boolean;
+  doNotTrack: boolean;
 }

 interface IProviderConfig {
  name: string;
  settings: {
    enabled: boolean;
+    baseUrl?: string;
  };
 }

+interface CommitData {
+  commit: string;
+  version?: string;
+}
+
+const connitJson: CommitData = commit;
+
 const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
-const versionHash = commit.commit;
+const versionHash = connitJson.commit;
+const versionTag = connitJson.version;
 const GITHUB_URLS = {
  original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
  fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
+  commitJson: (branch: string) =>
+    `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/${branch}/app/commit.json`,
 };

 function getSystemInfo(): SystemInfo {
@@ -50,14 +69,100 @@ function getSystemInfo(): SystemInfo {
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

+  const getBrowserInfo = (): string => {
+    const ua = navigator.userAgent;
+    let browser = 'Unknown';
+
+    if (ua.includes('Firefox/')) {
+      browser = 'Firefox';
+    } else if (ua.includes('Chrome/')) {
+      if (ua.includes('Edg/')) {
+        browser = 'Edge';
+      } else if (ua.includes('OPR/')) {
+        browser = 'Opera';
+      } else {
+        browser = 'Chrome';
+      }
+    } else if (ua.includes('Safari/')) {
+      if (!ua.includes('Chrome')) {
+        browser = 'Safari';
+      }
+    }
+
+    // Extract version number
+    const match = ua.match(new RegExp(`${browser}\\/([\\d.]+)`));
+    const version = match ? ` ${match[1]}` : '';
+
+    return `${browser}${version}`;
+  };
+
+  const getOperatingSystem = (): string => {
+    const ua = navigator.userAgent;
+    const platform = navigator.platform;
+
+    if (ua.includes('Win')) {
+      return 'Windows';
+    }
+
+    if (ua.includes('Mac')) {
+      if (ua.includes('iPhone') || ua.includes('iPad')) {
+        return 'iOS';
+      }
+
+      return 'macOS';
+    }
+
+    if (ua.includes('Linux')) {
+      return 'Linux';
+    }
+
+    if (ua.includes('Android')) {
+      return 'Android';
+    }
+
+    return platform || 'Unknown';
+  };
+
+  const getDeviceType = (): string => {
+    const ua = navigator.userAgent;
+
+    if (ua.includes('Mobile')) {
+      return 'Mobile';
+    }
+
+    if (ua.includes('Tablet')) {
+      return 'Tablet';
+    }
+
+    return 'Desktop';
+  };
+
+  // Get more detailed memory info if available
+  const getMemoryInfo = (): string => {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory;
+      return `${formatBytes(memory.jsHeapSizeLimit)} (Used: ${formatBytes(memory.usedJSHeapSize)})`;
+    }
+
+    return 'Not available';
+  };
+
  return {
-    os: navigator.platform,
-    browser: navigator.userAgent.split(' ').slice(-1)[0],
+    os: getOperatingSystem(),
+    browser: getBrowserInfo(),
    screen: `${window.screen.width}x${window.screen.height}`,
    language: navigator.language,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-    memory: formatBytes(performance?.memory?.jsHeapSizeLimit || 0),
+    memory: getMemoryInfo(),
    cores: navigator.hardwareConcurrency || 0,
+    deviceType: getDeviceType(),
+
+    // Add new fields
+    colorDepth: `${window.screen.colorDepth}-bit`,
+    pixelRatio: window.devicePixelRatio,
+    online: navigator.onLine,
+    cookiesEnabled: navigator.cookieEnabled,
+    doNotTrack: navigator.doNotTrack === '1',
  };
 }

@@ -132,7 +237,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
    }

    // Try different endpoints based on provider
-    const checkUrls = [`${url}/api/health`, `${url}/v1/models`];
+    const checkUrls = [`${url}/api/health`, url.endsWith('v1') ? `${url}/models` : `${url}/v1/models`];
    console.log(`[Debug] Checking additional endpoints:`, checkUrls);

    const results = await Promise.all(
@@ -199,7 +304,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
 };

 export default function DebugTab() {
-  const { providers } = useSettings();
+  const { providers, isLatestBranch } = useSettings();
  const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
  const [updateMessage, setUpdateMessage] = useState<string>('');
  const [systemInfo] = useState<SystemInfo>(getSystemInfo());
@@ -212,29 +317,33 @@ export default function DebugTab() {

    try {
      const entries = Object.entries(providers) as [string, IProviderConfig][];
-      const statuses = entries
-        .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
-        .map(async ([, provider]) => {
-          const envVarName =
-            provider.name.toLowerCase() === 'ollama'
-              ? 'OLLAMA_API_BASE_URL'
-              : provider.name.toLowerCase() === 'lmstudio'
-                ? 'LMSTUDIO_API_BASE_URL'
-                : `REACT_APP_${provider.name.toUpperCase()}_URL`;
+      const statuses = await Promise.all(
+        entries
+          .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
+          .map(async ([, provider]) => {
+            const envVarName =
+              providerBaseUrlEnvKeys[provider.name].baseUrlKey || `REACT_APP_${provider.name.toUpperCase()}_URL`;

-          // Access environment variables through import.meta.env
-          const url = import.meta.env[envVarName] || null;
-          console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
+            // Access environment variables through import.meta.env
+            let settingsUrl = provider.settings.baseUrl;

-          const status = await checkProviderStatus(url, provider.name);
+            if (settingsUrl && settingsUrl.trim().length === 0) {
+              settingsUrl = undefined;
+            }

-          return {
-            ...status,
-            enabled: provider.settings.enabled ?? false,
-          };
-        });
+            const url = settingsUrl || import.meta.env[envVarName] || null; // Ensure baseUrl is used
+            console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);

-      Promise.all(statuses).then(setActiveProviders);
+            const status = await checkProviderStatus(url, provider.name);
+
+            return {
+              ...status,
+              enabled: provider.settings.enabled ?? false,
+            };
+          }),
+      );
+
+      setActiveProviders(statuses);
    } catch (error) {
      console.error('[Debug] Failed to update provider statuses:', error);
    }
@@ -257,32 +366,27 @@ export default function DebugTab() {
      setIsCheckingUpdate(true);
      setUpdateMessage('Checking for updates...');

-      const [originalResponse, forkResponse] = await Promise.all([
-        fetch(GITHUB_URLS.original),
-        fetch(GITHUB_URLS.fork),
-      ]);
+      const branchToCheck = isLatestBranch ? 'main' : 'stable';
+      console.log(`[Debug] Checking for updates against ${branchToCheck} branch`);

-      if (!originalResponse.ok || !forkResponse.ok) {
-        throw new Error('Failed to fetch repository information');
+      const localCommitResponse = await fetch(GITHUB_URLS.commitJson(branchToCheck));
+
+      if (!localCommitResponse.ok) {
+        throw new Error('Failed to fetch local commit info');
      }

-      const [originalData, forkData] = await Promise.all([
-        originalResponse.json() as Promise<{ sha: string }>,
-        forkResponse.json() as Promise<{ sha: string }>,
-      ]);
+      const localCommitData = (await localCommitResponse.json()) as CommitData;
+      const remoteCommitHash = localCommitData.commit;
+      const currentCommitHash = versionHash;

-      const originalCommitHash = originalData.sha;
-      const forkCommitHash = forkData.sha;
-      const isForked = versionHash === forkCommitHash && forkCommitHash !== originalCommitHash;
-
-      if (originalCommitHash !== versionHash) {
+      if (remoteCommitHash !== currentCommitHash) {
        setUpdateMessage(
-          `Update available from original repository!\n` +
-            `Current: ${versionHash.slice(0, 7)}${isForked ? ' (forked)' : ''}\n` +
-            `Latest: ${originalCommitHash.slice(0, 7)}`,
+          `Update available from ${branchToCheck} branch!\n` +
+            `Current: ${currentCommitHash.slice(0, 7)}\n` +
+            `Latest: ${remoteCommitHash.slice(0, 7)}`,
        );
      } else {
-        setUpdateMessage('You are on the latest version from the original repository');
+        setUpdateMessage(`You are on the latest version from the ${branchToCheck} branch`);
      }
    } catch (error) {
      setUpdateMessage('Failed to check for updates');
@@ -290,7 +394,7 @@ export default function DebugTab() {
    } finally {
      setIsCheckingUpdate(false);
    }
-  }, [isCheckingUpdate]);
+  }, [isCheckingUpdate, isLatestBranch]);

  const handleCopyToClipboard = useCallback(() => {
    const debugInfo = {
@@ -305,13 +409,17 @@ export default function DebugTab() {
        responseTime: provider.responseTime,
        url: provider.url,
      })),
-      Version: versionHash,
+      Version: {
+        hash: versionHash.slice(0, 7),
+        branch: isLatestBranch ? 'main' : 'stable',
+      },
      Timestamp: new Date().toISOString(),
    };
+
    navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
-      alert('Debug information copied to clipboard!');
+      toast.success('Debug information copied to clipboard!');
    });
-  }, [activeProviders, systemInfo]);
+  }, [activeProviders, systemInfo, isLatestBranch]);

  return (
    <div className="p-4 space-y-6">
@@ -371,10 +479,31 @@ export default function DebugTab() {
                <p className="text-xs text-bolt-elements-textSecondary">Operating System</p>
                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.os}</p>
              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Device Type</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.deviceType}</p>
+              </div>
              <div>
                <p className="text-xs text-bolt-elements-textSecondary">Browser</p>
                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.browser}</p>
              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Display</p>
+                <p className="text-sm font-medium text-bolt-elements-textPrimary">
+                  {systemInfo.screen} ({systemInfo.colorDepth}) @{systemInfo.pixelRatio}x
+                </p>
+              </div>
+              <div>
+                <p className="text-xs text-bolt-elements-textSecondary">Connection</p>
+                <p className="text-sm font-medium flex items-center gap-2">
+                  <span
+                    className={`inline-block w-2 h-2 rounded-full ${systemInfo.online ? 'bg-green-500' : 'bg-red-500'}`}
+                  />
+                  <span className={`${systemInfo.online ? 'text-green-600' : 'text-red-600'}`}>
+                    {systemInfo.online ? 'Online' : 'Offline'}
+                  </span>
+                </p>
+              </div>
              <div>
                <p className="text-xs text-bolt-elements-textSecondary">Screen Resolution</p>
                <p className="text-sm font-medium text-bolt-elements-textPrimary">{systemInfo.screen}</p>
@@ -397,7 +526,7 @@ export default function DebugTab() {
              <p className="text-sm font-medium text-bolt-elements-textPrimary font-mono">
                {versionHash.slice(0, 7)}
                <span className="ml-2 text-xs text-bolt-elements-textSecondary">
-                  ({new Date().toLocaleDateString()})
+                  (v{versionTag || '0.0.1'}) - {isLatestBranch ? 'nightly' : 'stable'}
                </span>
              </p>
            </div>
--- a/app/components/settings/features/FeaturesTab.tsx
+++ b/app/components/settings/features/FeaturesTab.tsx
@@ -1,20 +1,44 @@
 import React from 'react';
 import { Switch } from '~/components/ui/Switch';
+import { PromptLibrary } from '~/lib/common/prompt-library';
 import { useSettings } from '~/lib/hooks/useSettings';

 export default function FeaturesTab() {
-  const { debug, enableDebugMode, isLocalModel, enableLocalModels, eventLogs, enableEventLogs } = useSettings();
+  const {
+    debug,
+    enableDebugMode,
+    isLocalModel,
+    enableLocalModels,
+    enableEventLogs,
+    isLatestBranch,
+    enableLatestBranch,
+    promptId,
+    setPromptId,
+  } = useSettings();
+
+  const handleToggle = (enabled: boolean) => {
+    enableDebugMode(enabled);
+    enableEventLogs(enabled);
+  };
+
  return (
    <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
      <div className="mb-6">
        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Debug Info</span>
-          <Switch className="ml-auto" checked={debug} onCheckedChange={enableDebugMode} />
-        </div>
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Event Logs</span>
-          <Switch className="ml-auto" checked={eventLogs} onCheckedChange={enableEventLogs} />
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <span className="text-bolt-elements-textPrimary">Debug Features</span>
+            <Switch className="ml-auto" checked={debug} onCheckedChange={handleToggle} />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-bolt-elements-textPrimary">Use Main Branch</span>
+              <p className="text-sm text-bolt-elements-textSecondary">
+                Check for updates against the main branch instead of stable
+              </p>
+            </div>
+            <Switch className="ml-auto" checked={isLatestBranch} onCheckedChange={enableLatestBranch} />
+          </div>
        </div>
      </div>

@@ -23,10 +47,30 @@ export default function FeaturesTab() {
        <p className="text-sm text-bolt-elements-textSecondary mb-4">
          Disclaimer: Experimental features may be unstable and are subject to change.
        </p>
+
        <div className="flex items-center justify-between mb-2">
-          <span className="text-bolt-elements-textPrimary">Enable Local Models</span>
+          <span className="text-bolt-elements-textPrimary">Experimental Providers</span>
          <Switch className="ml-auto" checked={isLocalModel} onCheckedChange={enableLocalModels} />
        </div>
+        <div className="flex items-start justify-between pt-4 mb-2 gap-2">
+          <div className="flex-1 max-w-[200px]">
+            <span className="text-bolt-elements-textPrimary">Prompt Library</span>
+            <p className="text-sm text-bolt-elements-textSecondary mb-4">
+              Choose a prompt from the library to use as the system prompt.
+            </p>
+          </div>
+          <select
+            value={promptId}
+            onChange={(e) => setPromptId(e.target.value)}
+            className="flex-1 p-2 ml-auto rounded-lg 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 transition-all text-sm min-w-[100px]"
+          >
+            {PromptLibrary.getList().map((x) => (
+              <option key={x.id} value={x.id}>
+                {x.label}
+              </option>
+            ))}
+          </select>
+        </div>
      </div>
    </div>
  );
--- a/app/components/settings/providers/ProvidersTab.tsx
+++ b/app/components/settings/providers/ProvidersTab.tsx
@@ -5,6 +5,10 @@ import { LOCAL_PROVIDERS, URL_CONFIGURABLE_PROVIDERS } from '~/lib/stores/settin
 import type { IProviderConfig } from '~/types/model';
 import { logStore } from '~/lib/stores/logs';

+// Import a default fallback icon
+import DefaultIcon from '/icons/Default.svg'; // Adjust the path as necessary
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+
 export default function ProvidersTab() {
  const { providers, updateProviderSettings, isLocalModel } = useSettings();
  const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
@@ -44,52 +48,77 @@ export default function ProvidersTab() {
          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>
-      {filteredProviders.map((provider) => (
-        <div
-          key={provider.name}
-          className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
-        >
-          <div className="flex items-center justify-between mb-2">
-            <div className="flex items-center gap-2">
-              <img src={`/icons/${provider.name}.svg`} alt={`${provider.name} icon`} className="w-6 h-6 dark:invert" />
-              <span className="text-bolt-elements-textPrimary">{provider.name}</span>
-            </div>
-            <Switch
-              className="ml-auto"
-              checked={provider.settings.enabled}
-              onCheckedChange={(enabled) => {
-                updateProviderSettings(provider.name, { ...provider.settings, enabled });
+      {filteredProviders.map((provider) => {
+        const envBaseUrlKey = providerBaseUrlEnvKeys[provider.name].baseUrlKey;
+        const envBaseUrl = envBaseUrlKey ? import.meta.env[envBaseUrlKey] : undefined;

-                if (enabled) {
-                  logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
-                } else {
-                  logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
-                }
-              }}
-            />
-          </div>
-          {/* Base URL input for configurable providers */}
-          {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
-            <div className="mt-2">
-              <label className="block text-sm text-bolt-elements-textSecondary mb-1">Base URL:</label>
-              <input
-                type="text"
-                value={provider.settings.baseUrl || ''}
-                onChange={(e) => {
-                  const newBaseUrl = e.target.value;
-                  updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
-                  logStore.logProvider(`Base URL updated for ${provider.name}`, {
-                    provider: provider.name,
-                    baseUrl: newBaseUrl,
-                  });
+        return (
+          <div
+            key={provider.name}
+            className="flex flex-col mb-2 provider-item hover:bg-bolt-elements-bg-depth-3 p-4 rounded-lg border border-bolt-elements-borderColor "
+          >
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <img
+                  src={`/icons/${provider.name}.svg`} // Attempt to load the specific icon
+                  onError={(e) => {
+                    // Fallback to default icon on error
+                    e.currentTarget.src = DefaultIcon;
+                  }}
+                  alt={`${provider.name} icon`}
+                  className="w-6 h-6 dark:invert"
+                />
+                <span className="text-bolt-elements-textPrimary">{provider.name}</span>
+              </div>
+              <Switch
+                className="ml-auto"
+                checked={provider.settings.enabled}
+                onCheckedChange={(enabled) => {
+                  updateProviderSettings(provider.name, { ...provider.settings, enabled });
+
+                  if (enabled) {
+                    logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+                  } else {
+                    logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+                  }
                }}
-                placeholder={`Enter ${provider.name} base URL`}
-                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>
-      ))}
+            {/* Base URL input for configurable providers */}
+            {URL_CONFIGURABLE_PROVIDERS.includes(provider.name) && provider.settings.enabled && (
+              <div className="mt-2">
+                {envBaseUrl && (
+                  <label className="block text-xs text-bolt-elements-textSecondary text-green-300 mb-2">
+                    Set On (.env) : {envBaseUrl}
+                  </label>
+                )}
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">
+                  {envBaseUrl ? 'Override Base Url' : 'Base URL '}:{' '}
+                </label>
+                <input
+                  type="text"
+                  value={provider.settings.baseUrl || ''}
+                  onChange={(e) => {
+                    let newBaseUrl: string | undefined = e.target.value;
+
+                    if (newBaseUrl && newBaseUrl.trim().length === 0) {
+                      newBaseUrl = undefined;
+                    }
+
+                    updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
+                    logStore.logProvider(`Base URL updated for ${provider.name}`, {
+                      provider: provider.name,
+                      baseUrl: newBaseUrl,
+                    });
+                  }}
+                  placeholder={`Enter ${provider.name} base URL`}
+                  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>
  );
 }
--- a/app/components/sidebar/HistoryItem.tsx
+++ b/app/components/sidebar/HistoryItem.tsx
@@ -4,6 +4,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { type ChatHistoryItem } from '~/lib/persistence';
 import WithTooltip from '~/components/ui/Tooltip';
 import { useEditChatDescription } from '~/lib/hooks';
+import { forwardRef, type ForwardedRef } from 'react';

 interface HistoryItemProps {
  item: ChatHistoryItem;
@@ -103,25 +104,31 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
  );
 }

-const ChatActionButton = ({
-  toolTipContent,
-  icon,
-  className,
-  onClick,
-}: {
-  toolTipContent: string;
-  icon: string;
-  className?: string;
-  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  btnTitle?: string;
-}) => {
-  return (
-    <WithTooltip tooltip={toolTipContent}>
-      <button
-        type="button"
-        className={`scale-110 mr-2 hover:text-bolt-elements-item-contentAccent ${icon} ${className ? className : ''}`}
-        onClick={onClick}
-      />
-    </WithTooltip>
-  );
-};
+const ChatActionButton = forwardRef(
+  (
+    {
+      toolTipContent,
+      icon,
+      className,
+      onClick,
+    }: {
+      toolTipContent: string;
+      icon: string;
+      className?: string;
+      onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+      btnTitle?: string;
+    },
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
+    return (
+      <WithTooltip tooltip={toolTipContent}>
+        <button
+          ref={ref}
+          type="button"
+          className={`scale-110 mr-2 hover:text-bolt-elements-item-contentAccent ${icon} ${className ? className : ''}`}
+          onClick={onClick}
+        />
+      </WithTooltip>
+    );
+  },
+);
--- a/app/components/ui/IconButton.tsx
+++ b/app/components/ui/IconButton.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, forwardRef, type ForwardedRef } from 'react';
 import { classNames } from '~/utils/classNames';

 type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -25,41 +25,48 @@ type IconButtonWithChildrenProps = {

 type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;

+// Componente IconButton com suporte a refs
 export const IconButton = memo(
-  ({
-    icon,
-    size = 'xl',
-    className,
-    iconClassName,
-    disabledClassName,
-    disabled = false,
-    title,
-    onClick,
-    children,
-  }: IconButtonProps) => {
-    return (
-      <button
-        className={classNames(
-          'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
-          {
-            [classNames('opacity-30', disabledClassName)]: disabled,
-          },
-          className,
-        )}
-        title={title}
-        disabled={disabled}
-        onClick={(event) => {
-          if (disabled) {
-            return;
-          }
+  forwardRef(
+    (
+      {
+        icon,
+        size = 'xl',
+        className,
+        iconClassName,
+        disabledClassName,
+        disabled = false,
+        title,
+        onClick,
+        children,
+      }: IconButtonProps,
+      ref: ForwardedRef<HTMLButtonElement>,
+    ) => {
+      return (
+        <button
+          ref={ref}
+          className={classNames(
+            'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
+            {
+              [classNames('opacity-30', disabledClassName)]: disabled,
+            },
+            className,
+          )}
+          title={title}
+          disabled={disabled}
+          onClick={(event) => {
+            if (disabled) {
+              return;
+            }

-          onClick?.(event);
-        }}
-      >
-        {children ? children : <div className={classNames(icon, getIconSize(size), iconClassName)}></div>}
-      </button>
-    );
-  },
+            onClick?.(event);
+          }}
+        >
+          {children ? children : <div className={classNames(icon, getIconSize(size), iconClassName)}></div>}
+        </button>
+      );
+    },
+  ),
 );

 function getIconSize(size: IconSize) {
--- a/app/components/ui/LoadingOverlay.tsx
+++ b/app/components/ui/LoadingOverlay.tsx
@@ -0,0 +1,14 @@
+export const LoadingOverlay = ({ message = 'Loading...' }) => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
+      {/* Loading content */}
+      <div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
+        <div
+          className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
+          style={{ fontSize: '2rem' }}
+        ></div>
+        <p className="text-lg text-bolt-elements-textTertiary">{message}</p>
+      </div>
+    </div>
+  );
+};
--- a/app/components/ui/Tooltip.tsx
+++ b/app/components/ui/Tooltip.tsx
@@ -1,8 +1,9 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
+import { forwardRef, type ForwardedRef, type ReactElement } from 'react';

 interface TooltipProps {
  tooltip: React.ReactNode;
-  children: React.ReactNode;
+  children: ReactElement;
  sideOffset?: number;
  className?: string;
  arrowClassName?: string;
@@ -12,62 +13,67 @@ interface TooltipProps {
  delay?: number;
 }

-const WithTooltip = ({
-  tooltip,
-  children,
-  sideOffset = 5,
-  className = '',
-  arrowClassName = '',
-  tooltipStyle = {},
-  position = 'top',
-  maxWidth = 250,
-  delay = 0,
-}: TooltipProps) => {
-  return (
-    <Tooltip.Root delayDuration={delay}>
-      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content
-          side={position}
-          className={`
-            z-[2000]
-            px-2.5
-            py-1.5
-            max-h-[300px]
-            select-none
-            rounded-md
-            bg-bolt-elements-background-depth-3
-            text-bolt-elements-textPrimary
-            text-sm
-            leading-tight
-            shadow-lg
-            animate-in
-            fade-in-0
-            zoom-in-95
-            data-[state=closed]:animate-out
-            data-[state=closed]:fade-out-0
-            data-[state=closed]:zoom-out-95
-            ${className}
-          `}
-          sideOffset={sideOffset}
-          style={{
-            maxWidth,
-            ...tooltipStyle,
-          }}
-        >
-          <div className="break-words">{tooltip}</div>
-          <Tooltip.Arrow
+const WithTooltip = forwardRef(
+  (
+    {
+      tooltip,
+      children,
+      sideOffset = 5,
+      className = '',
+      arrowClassName = '',
+      tooltipStyle = {},
+      position = 'top',
+      maxWidth = 250,
+      delay = 0,
+    }: TooltipProps,
+    _ref: ForwardedRef<HTMLElement>,
+  ) => {
+    return (
+      <Tooltip.Root delayDuration={delay}>
+        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side={position}
            className={`
-              fill-bolt-elements-background-depth-3
-              ${arrowClassName}
+              z-[2000]
+              px-2.5
+              py-1.5
+              max-h-[300px]
+              select-none
+              rounded-md
+              bg-bolt-elements-background-depth-3
+              text-bolt-elements-textPrimary
+              text-sm
+              leading-tight
+              shadow-lg
+              animate-in
+              fade-in-0
+              zoom-in-95
+              data-[state=closed]:animate-out
+              data-[state=closed]:fade-out-0
+              data-[state=closed]:zoom-out-95
+              ${className}
            `}
-            width={12}
-            height={6}
-          />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
+            sideOffset={sideOffset}
+            style={{
+              maxWidth,
+              ...tooltipStyle,
+            }}
+          >
+            <div className="break-words">{tooltip}</div>
+            <Tooltip.Arrow
+              className={`
+                fill-bolt-elements-background-depth-3
+                ${arrowClassName}
+              `}
+              width={12}
+              height={6}
+            />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    );
+  },
+);

 export default WithTooltip;
--- a/app/components/workbench/FileTree.tsx
+++ b/app/components/workbench/FileTree.tsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
 import type { FileMap } from '~/lib/stores/files';
 import { classNames } from '~/utils/classNames';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
+import * as ContextMenu from '@radix-ui/react-context-menu';

 const logger = createScopedLogger('FileTree');

@@ -110,6 +111,22 @@ export const FileTree = memo(
      });
    };

+    const onCopyPath = (fileOrFolder: FileNode | FolderNode) => {
+      try {
+        navigator.clipboard.writeText(fileOrFolder.fullPath);
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+
+    const onCopyRelativePath = (fileOrFolder: FileNode | FolderNode) => {
+      try {
+        navigator.clipboard.writeText(fileOrFolder.fullPath.substring((rootFolder || '').length));
+      } catch (error) {
+        logger.error(error);
+      }
+    };
+
    return (
      <div className={classNames('text-sm', className, 'overflow-y-auto')}>
        {filteredFileList.map((fileOrFolder) => {
@@ -121,6 +138,12 @@ export const FileTree = memo(
                  selected={selectedFile === fileOrFolder.fullPath}
                  file={fileOrFolder}
                  unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
+                  onCopyPath={() => {
+                    onCopyPath(fileOrFolder);
+                  }}
+                  onCopyRelativePath={() => {
+                    onCopyRelativePath(fileOrFolder);
+                  }}
                  onClick={() => {
                    onFileSelect?.(fileOrFolder.fullPath);
                  }}
@@ -134,6 +157,12 @@ export const FileTree = memo(
                  folder={fileOrFolder}
                  selected={allowFolderSelection && selectedFile === fileOrFolder.fullPath}
                  collapsed={collapsedFolders.has(fileOrFolder.fullPath)}
+                  onCopyPath={() => {
+                    onCopyPath(fileOrFolder);
+                  }}
+                  onCopyRelativePath={() => {
+                    onCopyRelativePath(fileOrFolder);
+                  }}
                  onClick={() => {
                    toggleCollapseState(fileOrFolder.fullPath);
                  }}
@@ -156,26 +185,67 @@ interface FolderProps {
  folder: FolderNode;
  collapsed: boolean;
  selected?: boolean;
+  onCopyPath: () => void;
+  onCopyRelativePath: () => void;
  onClick: () => void;
 }

-function Folder({ folder: { depth, name }, collapsed, selected = false, onClick }: FolderProps) {
+interface FolderContextMenuProps {
+  onCopyPath?: () => void;
+  onCopyRelativePath?: () => void;
+  children: ReactNode;
+}
+
+function ContextMenuItem({ onSelect, children }: { onSelect?: () => void; children: ReactNode }) {
  return (
-    <NodeButton
-      className={classNames('group', {
-        'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
-          !selected,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
-      })}
-      depth={depth}
-      iconClasses={classNames({
-        'i-ph:caret-right scale-98': collapsed,
-        'i-ph:caret-down scale-98': !collapsed,
-      })}
-      onClick={onClick}
+    <ContextMenu.Item
+      onSelect={onSelect}
+      className="flex items-center gap-2 px-2 py-1.5 outline-0 text-sm text-bolt-elements-textPrimary cursor-pointer ws-nowrap text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive rounded-md"
    >
-      {name}
-    </NodeButton>
+      <span className="size-4 shrink-0"></span>
+      <span>{children}</span>
+    </ContextMenu.Item>
+  );
+}
+
+function FileContextMenu({ onCopyPath, onCopyRelativePath, children }: FolderContextMenuProps) {
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content
+          style={{ zIndex: 998 }}
+          className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
+        >
+          <ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
+            <ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
+            <ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
+          </ContextMenu.Group>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
+
+function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativePath, onClick }: FolderProps) {
+  return (
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+      <NodeButton
+        className={classNames('group', {
+          'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
+            !selected,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+        })}
+        depth={folder.depth}
+        iconClasses={classNames({
+          'i-ph:caret-right scale-98': collapsed,
+          'i-ph:caret-down scale-98': !collapsed,
+        })}
+        onClick={onClick}
+      >
+        {folder.name}
+      </NodeButton>
+    </FileContextMenu>
  );
 }

@@ -183,31 +253,43 @@ interface FileProps {
  file: FileNode;
  selected: boolean;
  unsavedChanges?: boolean;
+  onCopyPath: () => void;
+  onCopyRelativePath: () => void;
  onClick: () => void;
 }

-function File({ file: { depth, name }, onClick, selected, unsavedChanges = false }: FileProps) {
+function File({
+  file: { depth, name },
+  onClick,
+  onCopyPath,
+  onCopyRelativePath,
+  selected,
+  unsavedChanges = false,
+}: FileProps) {
  return (
-    <NodeButton
-      className={classNames('group', {
-        'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault': !selected,
-        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
-      })}
-      depth={depth}
-      iconClasses={classNames('i-ph:file-duotone scale-98', {
-        'group-hover:text-bolt-elements-item-contentActive': !selected,
-      })}
-      onClick={onClick}
-    >
-      <div
-        className={classNames('flex items-center', {
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+      <NodeButton
+        className={classNames('group', {
+          'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault':
+            !selected,
+          'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
+        })}
+        depth={depth}
+        iconClasses={classNames('i-ph:file-duotone scale-98', {
          'group-hover:text-bolt-elements-item-contentActive': !selected,
        })}
+        onClick={onClick}
      >
-        <div className="flex-1 truncate pr-2">{name}</div>
-        {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
-      </div>
-    </NodeButton>
+        <div
+          className={classNames('flex items-center', {
+            'group-hover:text-bolt-elements-item-contentActive': !selected,
+          })}
+        >
+          <div className="flex-1 truncate pr-2">{name}</div>
+          {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
+        </div>
+      </NodeButton>
+    </FileContextMenu>
  );
 }

--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -3,6 +3,7 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { IconButton } from '~/components/ui/IconButton';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { PortDropdown } from './PortDropdown';
+import { ScreenshotSelector } from './ScreenshotSelector';

 type ResizeSide = 'left' | 'right' | null;

@@ -20,6 +21,7 @@ export const Preview = memo(() => {

  const [url, setUrl] = useState('');
  const [iframeUrl, setIframeUrl] = useState<string | undefined>();
+  const [isSelectionMode, setIsSelectionMode] = useState(false);

  // Toggle between responsive mode and device mode
  const [isDeviceModeOn, setIsDeviceModeOn] = useState(false);
@@ -218,12 +220,17 @@ export const Preview = memo(() => {
      )}
      <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
        <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
-
+        <IconButton
+          icon="i-ph:selection"
+          onClick={() => setIsSelectionMode(!isSelectionMode)}
+          className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
+        />
        <div
          className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
        focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
        >
          <input
+            title="URL"
            ref={inputRef}
            className="w-full bg-transparent outline-none"
            type="text"
@@ -281,7 +288,20 @@ export const Preview = memo(() => {
          }}
        >
          {activePreview ? (
-            <iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} allowFullScreen />
+            <>
+              <iframe
+                ref={iframeRef}
+                title="preview"
+                className="border-none w-full h-full bg-white"
+                src={iframeUrl}
+                allowFullScreen
+              />
+              <ScreenshotSelector
+                isSelectionMode={isSelectionMode}
+                setIsSelectionMode={setIsSelectionMode}
+                containerRef={iframeRef}
+              />
+            </>
          ) : (
            <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
          )}
--- a/app/components/workbench/ScreenshotSelector.tsx
+++ b/app/components/workbench/ScreenshotSelector.tsx
@@ -0,0 +1,293 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'react-toastify';
+
+interface ScreenshotSelectorProps {
+  isSelectionMode: boolean;
+  setIsSelectionMode: (mode: boolean) => void;
+  containerRef: React.RefObject<HTMLElement>;
+}
+
+export const ScreenshotSelector = memo(
+  ({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
+    const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
+    const mediaStreamRef = useRef<MediaStream | null>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+
+    useEffect(() => {
+      // Cleanup function to stop all tracks when component unmounts
+      return () => {
+        if (videoRef.current) {
+          videoRef.current.pause();
+          videoRef.current.srcObject = null;
+          videoRef.current.remove();
+          videoRef.current = null;
+        }
+
+        if (mediaStreamRef.current) {
+          mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+          mediaStreamRef.current = null;
+        }
+      };
+    }, []);
+
+    const initializeStream = async () => {
+      if (!mediaStreamRef.current) {
+        try {
+          const stream = await navigator.mediaDevices.getDisplayMedia({
+            audio: false,
+            video: {
+              displaySurface: 'window',
+              preferCurrentTab: true,
+              surfaceSwitching: 'include',
+              systemAudio: 'exclude',
+            },
+          } as MediaStreamConstraints);
+
+          // Add handler for when sharing stops
+          stream.addEventListener('inactive', () => {
+            if (videoRef.current) {
+              videoRef.current.pause();
+              videoRef.current.srcObject = null;
+              videoRef.current.remove();
+              videoRef.current = null;
+            }
+
+            if (mediaStreamRef.current) {
+              mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+              mediaStreamRef.current = null;
+            }
+
+            setIsSelectionMode(false);
+            setSelectionStart(null);
+            setSelectionEnd(null);
+            setIsCapturing(false);
+          });
+
+          mediaStreamRef.current = stream;
+
+          // Initialize video element if needed
+          if (!videoRef.current) {
+            const video = document.createElement('video');
+            video.style.opacity = '0';
+            video.style.position = 'fixed';
+            video.style.pointerEvents = 'none';
+            video.style.zIndex = '-1';
+            document.body.appendChild(video);
+            videoRef.current = video;
+          }
+
+          // Set up video with the stream
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play();
+        } catch (error) {
+          console.error('Failed to initialize stream:', error);
+          setIsSelectionMode(false);
+          toast.error('Failed to initialize screen capture');
+        }
+      }
+
+      return mediaStreamRef.current;
+    };
+
+    const handleCopySelection = useCallback(async () => {
+      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) {
+        return;
+      }
+
+      setIsCapturing(true);
+
+      try {
+        const stream = await initializeStream();
+
+        if (!stream || !videoRef.current) {
+          return;
+        }
+
+        // Wait for video to be ready
+        await new Promise((resolve) => setTimeout(resolve, 300));
+
+        // Create temporary canvas for full screenshot
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = videoRef.current.videoWidth;
+        tempCanvas.height = videoRef.current.videoHeight;
+
+        const tempCtx = tempCanvas.getContext('2d');
+
+        if (!tempCtx) {
+          throw new Error('Failed to get temporary canvas context');
+        }
+
+        // Draw the full video frame
+        tempCtx.drawImage(videoRef.current, 0, 0);
+
+        // Calculate scale factor between video and screen
+        const scaleX = videoRef.current.videoWidth / window.innerWidth;
+        const scaleY = videoRef.current.videoHeight / window.innerHeight;
+
+        // Get window scroll position
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY + 40;
+
+        // Get the container's position in the page
+        const containerRect = containerRef.current.getBoundingClientRect();
+
+        // Offset adjustments for more accurate clipping
+        const leftOffset = -9; // Adjust left position
+        const bottomOffset = -14; // Adjust bottom position
+
+        // Calculate the scaled coordinates with scroll offset and adjustments
+        const scaledX = Math.round(
+          (containerRect.left + Math.min(selectionStart.x, selectionEnd.x) + scrollX + leftOffset) * scaleX,
+        );
+        const scaledY = Math.round(
+          (containerRect.top + Math.min(selectionStart.y, selectionEnd.y) + scrollY + bottomOffset) * scaleY,
+        );
+        const scaledWidth = Math.round(Math.abs(selectionEnd.x - selectionStart.x) * scaleX);
+        const scaledHeight = Math.round(Math.abs(selectionEnd.y - selectionStart.y) * scaleY);
+
+        // Create final canvas for the cropped area
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.round(Math.abs(selectionEnd.x - selectionStart.x));
+        canvas.height = Math.round(Math.abs(selectionEnd.y - selectionStart.y));
+
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+          throw new Error('Failed to get canvas context');
+        }
+
+        // Draw the cropped area
+        ctx.drawImage(tempCanvas, scaledX, scaledY, scaledWidth, scaledHeight, 0, 0, canvas.width, canvas.height);
+
+        // Convert to blob
+        const blob = await new Promise<Blob>((resolve, reject) => {
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error('Failed to create blob'));
+            }
+          }, 'image/png');
+        });
+
+        // Create a FileReader to convert blob to base64
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+          const base64Image = e.target?.result as string;
+
+          // Find the textarea element
+          const textarea = document.querySelector('textarea');
+
+          if (textarea) {
+            // Get the setters from the BaseChat component
+            const setUploadedFiles = (window as any).__BOLT_SET_UPLOADED_FILES__;
+            const setImageDataList = (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
+            const uploadedFiles = (window as any).__BOLT_UPLOADED_FILES__ || [];
+            const imageDataList = (window as any).__BOLT_IMAGE_DATA_LIST__ || [];
+
+            if (setUploadedFiles && setImageDataList) {
+              // Update the files and image data
+              const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+              setUploadedFiles([...uploadedFiles, file]);
+              setImageDataList([...imageDataList, base64Image]);
+              toast.success('Screenshot captured and added to chat');
+            } else {
+              toast.error('Could not add screenshot to chat');
+            }
+          }
+        };
+        reader.readAsDataURL(blob);
+      } catch (error) {
+        console.error('Failed to capture screenshot:', error);
+        toast.error('Failed to capture screenshot');
+
+        if (mediaStreamRef.current) {
+          mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+          mediaStreamRef.current = null;
+        }
+      } finally {
+        setIsCapturing(false);
+        setSelectionStart(null);
+        setSelectionEnd(null);
+        setIsSelectionMode(false); // Turn off selection mode after capture
+      }
+    }, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
+
+    const handleSelectionStart = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!isSelectionMode) {
+          return;
+        }
+
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        setSelectionStart({ x, y });
+        setSelectionEnd({ x, y });
+      },
+      [isSelectionMode],
+    );
+
+    const handleSelectionMove = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!isSelectionMode || !selectionStart) {
+          return;
+        }
+
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        setSelectionEnd({ x, y });
+      },
+      [isSelectionMode, selectionStart],
+    );
+
+    if (!isSelectionMode) {
+      return null;
+    }
+
+    return (
+      <div
+        className="absolute inset-0 cursor-crosshair"
+        onMouseDown={handleSelectionStart}
+        onMouseMove={handleSelectionMove}
+        onMouseUp={handleCopySelection}
+        onMouseLeave={() => {
+          if (selectionStart) {
+            setSelectionStart(null);
+          }
+        }}
+        style={{
+          backgroundColor: isCapturing ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          pointerEvents: 'all',
+          opacity: isCapturing ? 0 : 1,
+          zIndex: 50,
+          transition: 'opacity 0.1s ease-in-out',
+        }}
+      >
+        {selectionStart && selectionEnd && !isCapturing && (
+          <div
+            className="absolute border-2 border-blue-500 bg-blue-200 bg-opacity-20"
+            style={{
+              left: Math.min(selectionStart.x, selectionEnd.x),
+              top: Math.min(selectionStart.y, selectionEnd.y),
+              width: Math.abs(selectionEnd.x - selectionStart.x),
+              height: Math.abs(selectionEnd.y - selectionStart.y),
+            }}
+          />
+        )}
+      </div>
+    );
+  },
+);