UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Make tooltip easier to reuse across the app

Browse Source
This commit is contained in:
eduardruzga 2024-11-22 11:05:18 +02:00
parent a6060b81a5
commit 60411550a5
5 changed files with 258 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

326
app/components/chat/BaseChat.tsx
View File

@ -1,7 +1,7 @@
// @ts-nocheck // @ts-nocheck
// Preventing TS checks with files presented in the video for a better presentation. // Preventing TS checks with files presented in the video for a better presentation.
import type { Message } from 'ai'; import type { Message } from 'ai';
import React, { type RefCallback, useEffect } from 'react'; import React, { type RefCallback, useEffect, useState } from 'react';
import { ClientOnly } from 'remix-utils/client-only'; import { ClientOnly } from 'remix-utils/client-only';
import { Menu } from '~/components/sidebar/Menu.client'; import { Menu } from '~/components/sidebar/Menu.client';
import { IconButton } from '~/components/ui/IconButton'; import { IconButton } from '~/components/ui/IconButton';
@ -10,9 +10,11 @@ import { classNames } from '~/utils/classNames';
import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, initializeModelList } from '~/utils/constants'; import { MODEL_LIST, DEFAULT_PROVIDER, PROVIDER_LIST, initializeModelList } from '~/utils/constants';
import { Messages } from './Messages.client'; import { Messages } from './Messages.client';
import { SendButton } from './SendButton.client'; import { SendButton } from './SendButton.client';
import { useState } from 'react';
import { APIKeyManager } from './APIKeyManager'; import { APIKeyManager } from './APIKeyManager';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { importChat } from '~/utils/chatExport';
import { toast } from 'react-toastify';
import * as Tooltip from '@radix-ui/react-tooltip';
import styles from './BaseChat.module.scss'; import styles from './BaseChat.module.scss';
import type { ProviderInfo } from '~/utils/types'; import type { ProviderInfo } from '~/utils/types';
@ -22,7 +24,7 @@ const EXAMPLE_PROMPTS = [
{ text: 'Build a simple blog using Astro' }, { text: 'Build a simple blog using Astro' },
{ text: 'Create a cookie consent form using Material UI' }, { text: 'Create a cookie consent form using Material UI' },
{ text: 'Make a space invaders game' }, { text: 'Make a space invaders game' },
{ text: 'How do I center a div?' }, { text: 'How do I center a div?' }
]; ];
const providerList = PROVIDER_LIST; const providerList = PROVIDER_LIST;
@ -107,9 +109,9 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
sendMessage, sendMessage,
handleInputChange, handleInputChange,
enhancePrompt, enhancePrompt,
handleStop, handleStop
}, },
ref, ref
) => { ) => {
const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
const [apiKeys, setApiKeys] = useState<Record<string, string>>({}); const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
@ -145,7 +147,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
expires: 30, // 30 days expires: 30, // 30 days
secure: true, // Only send over HTTPS secure: true, // Only send over HTTPS
sameSite: 'strict', // Protect against CSRF sameSite: 'strict', // Protect against CSRF
path: '/', // Accessible across the site path: '/' // Accessible across the site
}); });
} catch (error) { } catch (error) {
console.error('Error saving API keys to cookies:', error); console.error('Error saving API keys to cookies:', error);
@ -153,72 +155,73 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}; };
return ( return (
<div <Tooltip.Provider delayDuration={200}>
ref={ref} <div
className={classNames( ref={ref}
styles.BaseChat, className={classNames(
'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1', styles.BaseChat,
)} 'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1'
data-chat-visible={showChat} )}
> data-chat-visible={showChat}
<ClientOnly>{() => <Menu />}</ClientOnly> >
<div ref={scrollRef} className="flex overflow-y-auto w-full h-full"> <ClientOnly>{() => <Menu />}</ClientOnly>
<div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}> <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
{!chatStarted && ( <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
<div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center"> {!chatStarted && (
<h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in"> <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center">
Where ideas begin <h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
</h1> Where ideas begin
<p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200"> </h1>
Bring ideas to life in seconds or get help on existing projects. <p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
</p> Bring ideas to life in seconds or get help on existing projects.
</div> </p>
)} </div>
<div )}
className={classNames('pt-6 px-6', {
'h-full flex flex-col': chatStarted,
})}
>
<ClientOnly>
{() => {
return chatStarted ? (
<Messages
ref={messageRef}
className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
messages={messages}
isStreaming={isStreaming}
/>
) : null;
}}
</ClientOnly>
<div <div
className={classNames( className={classNames('pt-6 px-6', {
'bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt', 'h-full flex flex-col': chatStarted
{ })}
'sticky bottom-0': chatStarted
})}
> >
<ModelSelector <ClientOnly>
key={provider?.name + ':' + modelList.length} {() => {
model={model} return chatStarted ? (
setModel={setModel} <Messages
modelList={modelList} ref={messageRef}
provider={provider} className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"
setProvider={setProvider} messages={messages}
providerList={PROVIDER_LIST} isStreaming={isStreaming}
/> />
{provider && ( ) : null;
<APIKeyManager }}
provider={provider} </ClientOnly>
apiKey={apiKeys[provider.name] || ''}
setApiKey={(key) => updateApiKey(provider.name, key)}
/>
)}
<div <div
className={classNames( className={classNames(
'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all', 'bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
)} {
'sticky bottom-0': chatStarted
})}
> >
<ModelSelector
key={provider?.name + ':' + modelList.length}
model={model}
setModel={setModel}
modelList={modelList}
provider={provider}
setProvider={setProvider}
providerList={PROVIDER_LIST}
/>
{provider && (
<APIKeyManager
provider={provider}
apiKey={apiKeys[provider.name] || ''}
setApiKey={(key) => updateApiKey(provider.name, key)}
/>
)}
<div
className={classNames(
'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all'
)}
>
<textarea <textarea
ref={textareaRef} ref={textareaRef}
className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`} className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
@ -239,88 +242,133 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}} }}
style={{ style={{
minHeight: TEXTAREA_MIN_HEIGHT, minHeight: TEXTAREA_MIN_HEIGHT,
maxHeight: TEXTAREA_MAX_HEIGHT, maxHeight: TEXTAREA_MAX_HEIGHT
}} }}
placeholder="How can Bolt help you today?" placeholder="How can Bolt help you today?"
translate="no" translate="no"
/> />
<ClientOnly> <ClientOnly>
{() => ( {() => (
<SendButton <SendButton
show={input.length > 0 || isStreaming} show={input.length > 0 || isStreaming}
isStreaming={isStreaming} isStreaming={isStreaming}
onClick={(event) => { onClick={(event) => {
if (isStreaming) { if (isStreaming) {
handleStop?.(); handleStop?.();
return; return;
} }
sendMessage?.(event); sendMessage?.(event);
}} }}
/> />
)} )}
</ClientOnly> </ClientOnly>
<div className="flex justify-between items-center text-sm p-4 pt-2"> <div className="flex justify-between items-center text-sm p-4 pt-2">
<div className="flex gap-1 items-center"> <div className="flex gap-1 items-center">
<IconButton <IconButton
title="Enhance prompt" title="Enhance prompt"
disabled={input.length === 0 || enhancingPrompt} disabled={input.length === 0 || enhancingPrompt}
className={classNames('transition-all', { className={classNames('transition-all', {
'opacity-100!': enhancingPrompt, 'opacity-100!': enhancingPrompt,
'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!': 'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
promptEnhanced, promptEnhanced
})} })}
onClick={() => enhancePrompt?.()} onClick={() => enhancePrompt?.()}
> >
{enhancingPrompt ? ( {enhancingPrompt ? (
<> <>
<div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div> <div
<div className="ml-1.5">Enhancing prompt...</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-bolt:stars text-xl"></div> <>
{promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>} <div className="i-bolt:stars text-xl"></div>
</> {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
)} </>
</IconButton> )}
</div> </IconButton>
{input.length > 3 ? (
<div className="text-xs text-bolt-elements-textTertiary">
Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
<kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
a new line
</div> </div>
) : null} {input.length > 3 ? (
<div className="text-xs text-bolt-elements-textTertiary">
Use <kbd
className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> +{' '}
<kbd
className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for
a new line
</div>
) : null}
</div>
</div>
<div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
</div>
</div>
{!chatStarted && (
<div className="flex flex-col items-center justify-center flex-1 p-4">
<input
type="file"
id="chat-import"
className="hidden"
accept=".json"
onChange={async (e) => {
const file = e.target.files?.[0];
if (file) {
try {
const { messages: importedMessages } = await importChat(file);
// Import each message
for (const msg of importedMessages) {
await sendMessage(new Event('import') as unknown as React.UIEvent, msg.content);
}
toast.success('Chat imported successfully');
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to import chat');
}
e.target.value = ''; // Reset file input
}
}}
/>
<div className="flex flex-col items-center gap-4 max-w-2xl text-center">
<div className="flex gap-2">
<button
onClick={() => {
const input = document.getElementById('chat-import');
input?.click();
}}
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
>
<div className="i-ph:upload-simple" />
Import Chat
</button>
</div>
</div> </div>
</div> </div>
<div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div> )}
</div> {!chatStarted && (
</div> <div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
{!chatStarted && ( <div
<div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center"> className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
<div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]"> {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
{EXAMPLE_PROMPTS.map((examplePrompt, index) => { return (
return ( <button
<button key={index}
key={index} onClick={(event) => {
onClick={(event) => { sendMessage?.(event, examplePrompt.text);
sendMessage?.(event, examplePrompt.text); }}
}} className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme" >
> {examplePrompt.text}
{examplePrompt.text} <div className="i-ph:arrow-bend-down-left" />
<div className="i-ph:arrow-bend-down-left" /> </button>
</button> );
); })}
})} </div>
</div> </div>
</div> )}
)} </div>
<ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
</div> </div>
<ClientOnly>{() => <Workbench chatStarted={chatStarted} isStreaming={isStreaming} />}</ClientOnly>
</div> </div>
</div> </Tooltip.Provider>
); );
}, }
); );

68
app/components/chat/Messages.client.tsx
View File

@ -3,11 +3,11 @@ import React from 'react';
import { classNames } from '~/utils/classNames'; import { classNames } from '~/utils/classNames';
import { AssistantMessage } from './AssistantMessage'; import { AssistantMessage } from './AssistantMessage';
import { UserMessage } from './UserMessage'; import { UserMessage } from './UserMessage';
import * as Tooltip from '@radix-ui/react-tooltip';
import { useLocation, useNavigate } from '@remix-run/react'; import { useLocation, useNavigate } from '@remix-run/react';
import { db, chatId } from '~/lib/persistence/useChatHistory'; import { db, chatId } from '~/lib/persistence/useChatHistory';
import { forkChat } from '~/lib/persistence/db'; import { forkChat } from '~/lib/persistence/db';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import WithTooltip from '~/components/ui/Tooltip';
interface MessagesProps { interface MessagesProps {
id?: string; id?: string;
@ -42,7 +42,6 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
}; };
return ( return (
<Tooltip.Provider delayDuration={200}>
<div id={id} ref={ref} className={props.className}> <div id={id} ref={ref} className={props.className}>
{messages.length > 0 {messages.length > 0
? messages.map((message, index) => { ? messages.map((message, index) => {
@ -70,51 +69,27 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
{isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />} {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
</div> </div>
{!isUserMessage && (<div className="flex gap-2"> {!isUserMessage && (<div className="flex gap-2">
<Tooltip.Root> <WithTooltip tooltip="Revert to this message">
<Tooltip.Trigger asChild> {messageId && (<button
{messageId && (<button onClick={() => handleRewind(messageId)}
onClick={() => handleRewind(messageId)} key='i-ph:arrow-u-up-left'
key='i-ph:arrow-u-up-left' className={classNames(
className={classNames( 'i-ph:arrow-u-up-left',
'i-ph:arrow-u-up-left', 'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors'
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors' )}
)} />)}
/>)} </WithTooltip>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
sideOffset={5}
style={{zIndex: 1000}}
>
Revert to this message
<Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<Tooltip.Root> <WithTooltip tooltip="Fork chat from this message">
<Tooltip.Trigger asChild> <button
<button onClick={() => handleFork(messageId)}
onClick={() => handleFork(messageId)} key="i-ph:git-fork"
key='i-ph:git-fork' className={classNames(
className={classNames( 'i-ph:git-fork',
'i-ph:git-fork', 'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors'
'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors' )}
)} />
/> </WithTooltip>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg"
sideOffset={5}
style={{zIndex: 1000}}
>
Fork chat from this message
<Tooltip.Arrow className="fill-bolt-elements-tooltip-background" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</div>)} </div>)}
</div> </div>
); );
@ -124,6 +99,5 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
<div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div> <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
)} )}
</div> </div>
</Tooltip.Provider>
); );
}); });

31
app/components/sidebar/HistoryItem.tsx
View File

@ -2,6 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { type ChatHistoryItem } from '~/lib/persistence'; import { type ChatHistoryItem } from '~/lib/persistence';
import { exportChat } from '~/utils/chatExport'; import { exportChat } from '~/utils/chatExport';
import WithTooltip from '~/components/ui/Tooltip';
interface HistoryItemProps { interface HistoryItemProps {
item: ChatHistoryItem; item: ChatHistoryItem;
@ -47,22 +48,27 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
<div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%"> <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%">
{hovering && ( {hovering && (
<div className="flex items-center p-1 text-bolt-elements-textSecondary"> <div className="flex items-center p-1 text-bolt-elements-textSecondary">
<button <WithTooltip tooltip="Export chat">
className="i-ph:download-simple scale-110 mr-2"
onClick={(event) => {
event.preventDefault();
exportChat(item.messages, item.description);
}}
title="Export chat"
/>
{onDuplicate && (
<button <button
className="i-ph:copy scale-110 mr-2" className="i-ph:download-simple scale-110 mr-2"
onClick={() => onDuplicate?.(item.id)} onClick={(event) => {
title="Duplicate chat" event.preventDefault();
exportChat(item.messages, item.description);
}}
title="Export chat"
/> />
</WithTooltip>
{onDuplicate && (
<WithTooltip tooltip="Duplicate chat">
<button
className="i-ph:copy scale-110 mr-2"
onClick={() => onDuplicate?.(item.id)}
title="Duplicate chat"
/>
</WithTooltip>
)} )}
<Dialog.Trigger asChild> <Dialog.Trigger asChild>
<WithTooltip tooltip="Delete chat">
<button <button
className="i-ph:trash scale-110" className="i-ph:trash scale-110"
onClick={(event) => { onClick={(event) => {
@ -71,6 +77,7 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
onDelete?.(event); onDelete?.(event);
}} }}
/> />
</WithTooltip>
</Dialog.Trigger> </Dialog.Trigger>
</div> </div>
)} )}

13
app/components/sidebar/Menu.client.tsx
View File

@ -17,8 +17,8 @@ const menuVariants = {
left: '-150px', left: '-150px',
transition: { transition: {
duration: 0.2, duration: 0.2,
ease: cubicEasingFn, ease: cubicEasingFn
}, }
}, },
open: { open: {
opacity: 1, opacity: 1,
@ -26,9 +26,9 @@ const menuVariants = {
left: 0, left: 0,
transition: { transition: {
duration: 0.2, duration: 0.2,
ease: cubicEasingFn, ease: cubicEasingFn
}, }
}, }
} satisfies Variants; } satisfies Variants;
type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null; type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
@ -136,7 +136,8 @@ export function Menu() {
<DialogRoot open={dialogContent !== null}> <DialogRoot open={dialogContent !== null}>
{binDates(list).map(({ category, items }) => ( {binDates(list).map(({ category, items }) => (
<div key={category} className="mt-4 first:mt-0 space-y-1"> <div key={category} className="mt-4 first:mt-0 space-y-1">
<div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1"> <div
className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
{category} {category}
</div> </div>
{items.map((item) => ( {items.map((item) => (

24
app/components/ui/Tooltip.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import * as Tooltip from '@radix-ui/react-tooltip';
const WithTooltip = ({ tooltip, children, sideOffset = 5, className = '', arrowClassName = '', tooltipStyle = {} }) => {
return (
<Tooltip.Root>
<Tooltip.Trigger asChild>
{children}
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className={`bg-bolt-elements-tooltip-background text-bolt-elements-textPrimary px-3 py-2 rounded-lg text-sm shadow-lg ${className}`}
sideOffset={sideOffset}
style={{ zIndex: 2000, backgroundColor: "white", ...tooltipStyle }}
>
{tooltip}
<Tooltip.Arrow className={`fill-bolt-elements-tooltip-background ${arrowClassName}`} />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
);
};
export default WithTooltip;