crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,409 @@
+import type { ToolInvocationUIPart } from '@ai-sdk/ui-utils';
+import { AnimatePresence, motion } from 'framer-motion';
+import { memo, useMemo, useState, useEffect } from 'react';
+import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
+import { classNames } from '~/utils/classNames';
+import {
+  TOOL_EXECUTION_APPROVAL,
+  TOOL_EXECUTION_DENIED,
+  TOOL_EXECUTION_ERROR,
+  TOOL_NO_EXECUTE_FUNCTION,
+} from '~/utils/constants';
+import { cubicEasingFn } from '~/utils/easings';
+import { logger } from '~/utils/logger';
+import { themeStore, type Theme } from '~/lib/stores/theme';
+import { useStore } from '@nanostores/react';
+import type { ToolCallAnnotation } from '~/types/context';
+
+const highlighterOptions = {
+  langs: ['json'],
+  themes: ['light-plus', 'dark-plus'],
+};
+
+const jsonHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
+  import.meta.hot?.data.jsonHighlighter ?? (await createHighlighter(highlighterOptions));
+
+if (import.meta.hot) {
+  import.meta.hot.data.jsonHighlighter = jsonHighlighter;
+}
+
+interface JsonCodeBlockProps {
+  className?: string;
+  code: string;
+  theme: Theme;
+}
+
+function JsonCodeBlock({ className, code, theme }: JsonCodeBlockProps) {
+  let formattedCode = code;
+
+  try {
+    if (typeof formattedCode === 'object') {
+      formattedCode = JSON.stringify(formattedCode, null, 2);
+    } else if (typeof formattedCode === 'string') {
+      // Attempt to parse and re-stringify for formatting
+      try {
+        const parsed = JSON.parse(formattedCode);
+        formattedCode = JSON.stringify(parsed, null, 2);
+      } catch {
+        // Leave as is if not JSON
+      }
+    }
+  } catch (e) {
+    // If parsing fails, keep original code
+    logger.error('Failed to parse JSON', { error: e });
+  }
+
+  return (
+    <div
+      className={classNames('text-xs rounded-md overflow-hidden mcp-tool-invocation-code', className)}
+      dangerouslySetInnerHTML={{
+        __html: jsonHighlighter.codeToHtml(formattedCode, {
+          lang: 'json',
+          theme: theme === 'dark' ? 'dark-plus' : 'light-plus',
+        }),
+      }}
+      style={{
+        padding: '0',
+        margin: '0',
+      }}
+    ></div>
+  );
+}
+
+interface ToolInvocationsProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+}
+
+export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, addToolResult }: ToolInvocationsProps) => {
+  const theme = useStore(themeStore);
+  const [showDetails, setShowDetails] = useState(false);
+
+  const toggleDetails = () => {
+    setShowDetails((prev) => !prev);
+  };
+
+  const toolCalls = useMemo(
+    () => toolInvocations.filter((inv) => inv.toolInvocation.state === 'call'),
+    [toolInvocations],
+  );
+
+  const toolResults = useMemo(
+    () => toolInvocations.filter((inv) => inv.toolInvocation.state === 'result'),
+    [toolInvocations],
+  );
+
+  const hasToolCalls = toolCalls.length > 0;
+  const hasToolResults = toolResults.length > 0;
+
+  if (!hasToolCalls && !hasToolResults) {
+    return null;
+  }
+
+  return (
+    <div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
+      <div className="flex">
+        <button
+          className="flex items-stretch bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
+          onClick={toggleDetails}
+          aria-label={showDetails ? 'Collapse details' : 'Expand details'}
+        >
+          <div className="p-2.5">
+            <div className="i-ph:wrench text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
+          </div>
+          <div className="p-2.5 w-full text-left">
+            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
+              MCP Tool Invocations{' '}
+              {hasToolResults && (
+                <span className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
+                  ({toolResults.length} tool{hasToolResults ? 's' : ''} used)
+                </span>
+              )}
+            </div>
+          </div>
+        </button>
+        <AnimatePresence>
+          {hasToolResults && (
+            <motion.button
+              initial={{ width: 0 }}
+              animate={{ width: 'auto' }}
+              exit={{ width: 0 }}
+              transition={{ duration: 0.15, ease: cubicEasingFn }}
+              className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
+              onClick={toggleDetails}
+            >
+              <div className="p-2">
+                <div
+                  className={`${showDetails ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'} text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors`}
+                ></div>
+              </div>
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+      <AnimatePresence>
+        {hasToolCalls && (
+          <motion.div
+            className="details"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
+            <div className="px-3 py-3 text-left bg-bolt-elements-background-depth-2">
+              <ToolCallsList
+                toolInvocations={toolCalls}
+                toolCallAnnotations={toolCallAnnotations}
+                addToolResult={addToolResult}
+                theme={theme}
+              />
+            </div>
+          </motion.div>
+        )}
+
+        {hasToolResults && showDetails && (
+          <motion.div
+            className="details"
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: '0px' }}
+            transition={{ duration: 0.15 }}
+          >
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
+            <div className="p-5 text-left bg-bolt-elements-actions-background">
+              <ToolResultsList toolInvocations={toolResults} toolCallAnnotations={toolCallAnnotations} theme={theme} />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+const toolVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+interface ToolResultsListProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  theme: Theme;
+}
+
+const ToolResultsList = memo(({ toolInvocations, toolCallAnnotations, theme }: ToolResultsListProps) => {
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-4">
+        {toolInvocations.map((tool, index) => {
+          const toolCallState = tool.toolInvocation.state;
+
+          if (toolCallState !== 'result') {
+            return null;
+          }
+
+          const { toolName, toolCallId } = tool.toolInvocation;
+
+          const annotation = toolCallAnnotations.find((annotation) => {
+            return annotation.toolCallId === toolCallId;
+          });
+
+          const isErrorResult = [TOOL_NO_EXECUTE_FUNCTION, TOOL_EXECUTION_DENIED, TOOL_EXECUTION_ERROR].includes(
+            tool.toolInvocation.result,
+          );
+
+          return (
+            <motion.li
+              key={index}
+              variants={toolVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{
+                duration: 0.2,
+                ease: cubicEasingFn,
+              }}
+            >
+              <div className="flex items-center gap-1.5 text-xs mb-1">
+                {isErrorResult ? (
+                  <div className="text-lg text-bolt-elements-icon-error">
+                    <div className="i-ph:x"></div>
+                  </div>
+                ) : (
+                  <div className="text-lg text-bolt-elements-icon-success">
+                    <div className="i-ph:check"></div>
+                  </div>
+                )}
+                <div className="text-bolt-elements-textSecondary text-xs">Server:</div>
+                <div className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</div>
+              </div>
+
+              <div className="ml-6 mb-2">
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                  Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">
+                  Description:{' '}
+                  <span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
+                <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                  <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
+                </div>
+                <div className="text-bolt-elements-textSecondary text-xs mt-3 mb-1">Result:</div>
+                <div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
+                  <JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.result)} theme={theme} />
+                </div>
+              </div>
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});
+
+interface ToolCallsListProps {
+  toolInvocations: ToolInvocationUIPart[];
+  toolCallAnnotations: ToolCallAnnotation[];
+  addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
+  theme: Theme;
+}
+
+const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResult }: ToolCallsListProps) => {
+  const [expanded, setExpanded] = useState<{ [id: string]: boolean }>({});
+
+  // OS detection for shortcut display
+  const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+  useEffect(() => {
+    const expandedState: { [id: string]: boolean } = {};
+    toolInvocations.forEach((inv) => {
+      if (inv.toolInvocation.state === 'call') {
+        expandedState[inv.toolInvocation.toolCallId] = true;
+      }
+    });
+    setExpanded(expandedState);
+  }, [toolInvocations]);
+
+  // Keyboard shortcut logic
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ignore if focus is in an input/textarea/contenteditable
+      const active = document.activeElement as HTMLElement | null;
+
+      if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) {
+        return;
+      }
+
+      if (Object.keys(expanded).length === 0) {
+        return;
+      }
+
+      const openId = Object.keys(expanded).find((id) => expanded[id]);
+
+      if (!openId) {
+        return;
+      }
+
+      // Cancel: Cmd/Ctrl + Backspace
+      if ((isMac ? e.metaKey : e.ctrlKey) && e.key === 'Backspace') {
+        e.preventDefault();
+        addToolResult({
+          toolCallId: openId,
+          result: TOOL_EXECUTION_APPROVAL.REJECT,
+        });
+      }
+
+      // Run tool: Cmd/Ctrl + Enter
+      if ((isMac ? e.metaKey : e.ctrlKey) && (e.key === 'Enter' || e.key === 'Return')) {
+        e.preventDefault();
+        addToolResult({
+          toolCallId: openId,
+          result: TOOL_EXECUTION_APPROVAL.APPROVE,
+        });
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [expanded, addToolResult, isMac]);
+
+  return (
+    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
+      <ul className="list-none space-y-4">
+        {toolInvocations.map((tool, index) => {
+          const toolCallState = tool.toolInvocation.state;
+
+          if (toolCallState !== 'call') {
+            return null;
+          }
+
+          const { toolName, toolCallId } = tool.toolInvocation;
+          const annotation = toolCallAnnotations.find((annotation) => annotation.toolCallId === toolCallId);
+
+          return (
+            <motion.li
+              key={index}
+              variants={toolVariants}
+              initial="hidden"
+              animate="visible"
+              transition={{ duration: 0.2, ease: cubicEasingFn }}
+            >
+              <div className="bg-bolt-elements-background-depth-3 rounded-lg p-2">
+                <div key={toolCallId} className="flex gap-1">
+                  <div className="flex flex-col items-center ">
+                    <span className="mr-auto font-light font-normal text-md text-bolt-elements-textPrimary rounded-md">
+                      {toolName}
+                    </span>
+                    <span className="text-xs text-bolt-elements-textSecondary font-light break-words max-w-64">
+                      {annotation?.toolDescription}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-end gap-2 ml-auto">
+                    <button
+                      className={classNames(
+                        'h-10 px-2.5 py-1.5 rounded-lg text-xs h-auto',
+                        'bg-transparent',
+                        'text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary',
+                        'transition-all duration-200',
+                        'flex items-center gap-2',
+                      )}
+                      onClick={() =>
+                        addToolResult({
+                          toolCallId,
+                          result: TOOL_EXECUTION_APPROVAL.REJECT,
+                        })
+                      }
+                    >
+                      Cancel <span className="opacity-70 text-xs ml-1">{isMac ? '⌘⌫' : 'Ctrl+Backspace'}</span>
+                    </button>
+                    <button
+                      className={classNames(
+                        'h-10 inline-flex items-center gap-2 px-3 py-1.5 text-xs font-normal rounded-lg transition-colors',
+                        'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
+                        'text-accent-500 hover:text-bolt-elements-textPrimary',
+                        'disabled:opacity-50 disabled:cursor-not-allowed',
+                      )}
+                      onClick={() =>
+                        addToolResult({
+                          toolCallId,
+                          result: TOOL_EXECUTION_APPROVAL.APPROVE,
+                        })
+                      }
+                    >
+                      Run tool <span className="opacity-70 text-xs ml-1">{isMac ? '⌘↵' : 'Ctrl+Enter'}</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </motion.li>
+          );
+        })}
+      </ul>
+    </motion.div>
+  );
+});

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

@@ -0,0 +1,101 @@
+/*
+ * @ts-nocheck
+ * Preventing TS checks with files presented in the video for a better presentation.
+ */
+import { MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
+import { Markdown } from './Markdown';
+import { useStore } from '@nanostores/react';
+import { profileStore } from '~/lib/stores/profile';
+import type {
+  TextUIPart,
+  ReasoningUIPart,
+  ToolInvocationUIPart,
+  SourceUIPart,
+  FileUIPart,
+  StepStartUIPart,
+} from '@ai-sdk/ui-utils';
+
+interface UserMessageProps {
+  content: string | Array<{ type: string; text?: string; image?: string }>;
+  parts:
+    | (TextUIPart | ReasoningUIPart | ToolInvocationUIPart | SourceUIPart | FileUIPart | StepStartUIPart)[]
+    | undefined;
+}
+
+export function UserMessage({ content, parts }: UserMessageProps) {
+  const profile = useStore(profileStore);
+
+  // Extract images from parts - look for file parts with image mime types
+  const images =
+    parts?.filter(
+      (part): part is FileUIPart => part.type === 'file' && 'mimeType' in part && part.mimeType.startsWith('image/'),
+    ) || [];
+
+  if (Array.isArray(content)) {
+    const textItem = content.find((item) => item.type === 'text');
+    const textContent = stripMetadata(textItem?.text || '');
+
+    return (
+      <div className="overflow-hidden flex flex-col gap-3 items-center ">
+        <div className="flex flex-row items-start justify-center overflow-hidden shrink-0 self-start">
+          {profile?.avatar || profile?.username ? (
+            <div className="flex items-end gap-2">
+              <img
+                src={profile.avatar}
+                alt={profile?.username || 'User'}
+                className="w-[25px] h-[25px] object-cover rounded-full"
+                loading="eager"
+                decoding="sync"
+              />
+              <span className="text-bolt-elements-textPrimary text-sm">
+                {profile?.username ? profile.username : ''}
+              </span>
+            </div>
+          ) : (
+            <div className="i-ph:user-fill text-accent-500 text-2xl" />
+          )}
+        </div>
+        <div className="flex flex-col gap-4 bg-accent-500/10 backdrop-blur-sm p-3 py-3 w-auto rounded-lg mr-auto">
+          {textContent && <Markdown html>{textContent}</Markdown>}
+          {images.map((item, index) => (
+            <img
+              key={index}
+              src={`data:${item.mimeType};base64,${item.data}`}
+              alt={`Image ${index + 1}`}
+              className="max-w-full h-auto rounded-lg"
+              style={{ maxHeight: '512px', objectFit: 'contain' }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  const textContent = stripMetadata(content);
+
+  return (
+    <div className="flex flex-col bg-accent-500/10 backdrop-blur-sm px-5 p-3.5 w-auto rounded-lg ml-auto">
+      <div className="flex gap-3.5 mb-4">
+        {images.map((item, index) => (
+          <div className="relative flex rounded-lg border border-bolt-elements-borderColor overflow-hidden">
+            <div className="h-16 w-16 bg-transparent outline-none">
+              <img
+                key={index}
+                src={`data:${item.mimeType};base64,${item.data}`}
+                alt={`Image ${index + 1}`}
+                className="h-full w-full rounded-lg"
+                style={{ objectFit: 'fill' }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+      <Markdown html>{textContent}</Markdown>
+    </div>
+  );
+}
+
+function stripMetadata(content: string) {
+  const artifactRegex = /<boltArtifact\s+[^>]*>[\s\S]*?<\/boltArtifact>/gm;
+  return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '').replace(artifactRegex, '');
+}

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

@@ -0,0 +1,158 @@
+import { useStore } from '@nanostores/react';
+import { vercelConnection } from '~/lib/stores/vercel';
+import { chatId } from '~/lib/persistence/useChatHistory';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useEffect, useState } from 'react';
+
+export function VercelDeploymentLink() {
+  const connection = useStore(vercelConnection);
+  const currentChatId = useStore(chatId);
+  const [deploymentUrl, setDeploymentUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchProjectData() {
+      if (!connection.token || !currentChatId) {
+        return;
+      }
+
+      // Check if we have a stored project ID for this chat
+      const projectId = localStorage.getItem(`vercel-project-${currentChatId}`);
+
+      if (!projectId) {
+        return;
+      }
+
+      setIsLoading(true);
+
+      try {
+        // Fetch projects directly from the API
+        const projectsResponse = await fetch('https://api.vercel.com/v9/projects', {
+          headers: {
+            Authorization: `Bearer ${connection.token}`,
+            'Content-Type': 'application/json',
+          },
+          cache: 'no-store',
+        });
+
+        if (!projectsResponse.ok) {
+          throw new Error(`Failed to fetch projects: ${projectsResponse.status}`);
+        }
+
+        const projectsData = (await projectsResponse.json()) as any;
+        const projects = projectsData.projects || [];
+
+        // Extract the chat number from currentChatId
+        const chatNumber = currentChatId.split('-')[0];
+
+        // Find project by matching the chat number in the name
+        const project = projects.find((p: { name: string | string[] }) => p.name.includes(`bolt-diy-${chatNumber}`));
+
+        if (project) {
+          // Fetch project details including deployments
+          const projectDetailsResponse = await fetch(`https://api.vercel.com/v9/projects/${project.id}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+              'Content-Type': 'application/json',
+            },
+            cache: 'no-store',
+          });
+
+          if (projectDetailsResponse.ok) {
+            const projectDetails = (await projectDetailsResponse.json()) as any;
+
+            // Try to get URL from production aliases first
+            if (projectDetails.targets?.production?.alias && projectDetails.targets.production.alias.length > 0) {
+              // Find the clean URL (without -projects.vercel.app)
+              const cleanUrl = projectDetails.targets.production.alias.find(
+                (a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
+              );
+
+              if (cleanUrl) {
+                setDeploymentUrl(`https://${cleanUrl}`);
+                return;
+              } else {
+                // If no clean URL found, use the first alias
+                setDeploymentUrl(`https://${projectDetails.targets.production.alias[0]}`);
+                return;
+              }
+            }
+          }
+
+          // If no aliases or project details failed, try fetching deployments
+          const deploymentsResponse = await fetch(
+            `https://api.vercel.com/v6/deployments?projectId=${project.id}&limit=1`,
+            {
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+                'Content-Type': 'application/json',
+              },
+              cache: 'no-store',
+            },
+          );
+
+          if (deploymentsResponse.ok) {
+            const deploymentsData = (await deploymentsResponse.json()) as any;
+
+            if (deploymentsData.deployments && deploymentsData.deployments.length > 0) {
+              setDeploymentUrl(`https://${deploymentsData.deployments[0].url}`);
+              return;
+            }
+          }
+        }
+
+        // Fallback to API call if not found in fetched projects
+        const fallbackResponse = await fetch(`/api/vercel-deploy?projectId=${projectId}&token=${connection.token}`, {
+          method: 'GET',
+        });
+
+        const data = await fallbackResponse.json();
+
+        if ((data as { deploy?: { url?: string } }).deploy?.url) {
+          setDeploymentUrl((data as { deploy: { url: string } }).deploy.url);
+        } else if ((data as { project?: { url?: string } }).project?.url) {
+          setDeploymentUrl((data as { project: { url: string } }).project.url);
+        }
+      } catch (err) {
+        console.error('Error fetching Vercel deployment:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchProjectData();
+  }, [connection.token, currentChatId]);
+
+  if (!deploymentUrl) {
+    return null;
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <a
+            href={deploymentUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#000000] z-50"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <div className={`i-ph:link w-4 h-4 hover:text-blue-400 ${isLoading ? 'animate-pulse' : ''}`} />
+          </a>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="px-3 py-2 rounded bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary text-xs z-50"
+            sideOffset={5}
+          >
+            {deploymentUrl}
+            <Tooltip.Arrow className="fill-bolt-elements-background-depth-3" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}