feat: update version to 1.4.6 and enhance code block component with download and copy sticky support
This commit is contained in:
n4ze3m
@@ -42,10 +42,36 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="code relative text-base font-sans codeblock bg-zinc-950 rounded-md overflow-hidden">
|
||||
<div className="flex bg-gray-800 items-center justify-between py-1.5 px-4">
|
||||
<span className="text-xs lowercase text-gray-200">{language}</span>
|
||||
<div className="not-prose">
|
||||
<div className=" [&_div+div]:!mt-0 my-4 bg-zinc-950 rounded-xl">
|
||||
<div className="flex flex-row px-4 py-2 rounded-t-xl bg-gray-800 ">
|
||||
<span className="font-mono text-xs">{language || "text"}</span>
|
||||
</div>
|
||||
<div className="sticky top-9 md:top-[5.75rem]">
|
||||
<div className="absolute bottom-0 right-2 flex h-9 items-center">
|
||||
<Tooltip title={t("downloadCode")}>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none">
|
||||
<DownloadIcon className="size-4" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title={t("copyToClipboard")}>
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-200 hover:bg-gray-700 hover:text-gray-100 focus:outline-none">
|
||||
{!isBtnPressed ? (
|
||||
<ClipboardIcon className="size-4" />
|
||||
) : (
|
||||
<CheckIcon className="size-4 text-green-400" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="flex sticky bg-gray-800 items-center justify-between py-1.5 px-4">
|
||||
<span className="text-xs lowercase text-gray-200">{language}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip title={t("downloadCode")}>
|
||||
<button
|
||||
@@ -66,28 +92,29 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div> */}
|
||||
<SyntaxHighlighter
|
||||
language={language}
|
||||
style={coldarkDark}
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
background: "transparent",
|
||||
padding: "1.5rem 1rem"
|
||||
}}
|
||||
lineNumberStyle={{
|
||||
userSelect: "none"
|
||||
}}
|
||||
codeTagProps={{
|
||||
style: {
|
||||
fontSize: "0.9rem",
|
||||
fontFamily: "var(--font-mono)"
|
||||
}
|
||||
}}>
|
||||
{value}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
language={language}
|
||||
style={coldarkDark}
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
width: "100%",
|
||||
background: "transparent",
|
||||
padding: "1.5rem 1rem"
|
||||
}}
|
||||
lineNumberStyle={{
|
||||
userSelect: "none"
|
||||
}}
|
||||
codeTagProps={{
|
||||
style: {
|
||||
fontSize: "0.9rem",
|
||||
fontFamily: "var(--font-mono)"
|
||||
}
|
||||
}}>
|
||||
{value}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
{previewVisible && (
|
||||
<Modal
|
||||
|
||||
@@ -25,6 +25,9 @@ function Markdown({
|
||||
remarkPlugins={[remarkGfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
components={{
|
||||
pre({ children }) {
|
||||
return children
|
||||
},
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || "")
|
||||
return !inline ? (
|
||||
|
||||
@@ -54,244 +54,247 @@ export const PlaygroundMessage = (props: Props) => {
|
||||
return (
|
||||
<div className="group relative flex w-full max-w-3xl flex-col items-end justify-center pb-2 md:px-4 lg:w-4/5 text-gray-800 dark:text-gray-100">
|
||||
{/* <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> */}
|
||||
<div className="flex flex-row gap-4 md:gap-6 p-4 m-auto w-full">
|
||||
<div className="w-8 flex flex-col relative items-end">
|
||||
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
|
||||
{props.isBot ? (
|
||||
!props.botAvatar ? (
|
||||
<div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400"></div>
|
||||
) : (
|
||||
props.botAvatar
|
||||
)
|
||||
) : !props.userAvatar ? (
|
||||
<div className="absolute h-8 w-8 rounded-full from-blue-400 to-blue-600 bg-gradient-to-r"></div>
|
||||
<div className="flex flex-row gap-4 md:gap-6 my-2 m-auto w-full">
|
||||
<div className="w-8 flex flex-col relative items-end">
|
||||
<div className="relative h-7 w-7 p-1 rounded-sm text-white flex items-center justify-center text-opacity-100r">
|
||||
{props.isBot ? (
|
||||
!props.botAvatar ? (
|
||||
<div className="absolute h-8 w-8 rounded-full bg-gradient-to-r from-green-300 to-purple-400"></div>
|
||||
) : (
|
||||
props.userAvatar
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-[calc(100%-50px)] flex-col gap-2 lg:w-[calc(100%-115px)]">
|
||||
<span className="text-xs font-bold text-gray-800 dark:text-white">
|
||||
{props.isBot
|
||||
? props.name === "chrome::gemini-nano::page-assist"
|
||||
? "Gemini Nano"
|
||||
: removeModelSuffix(
|
||||
props.name?.replaceAll(/accounts\/[^\/]+\/models\//g, "")
|
||||
)
|
||||
: "You"}
|
||||
</span>
|
||||
|
||||
{props.isBot &&
|
||||
props.isSearchingInternet &&
|
||||
props.currentMessageIndex === props.totalMessages - 1 ? (
|
||||
<WebSearch />
|
||||
) : null}
|
||||
<div>
|
||||
{props?.message_type && (
|
||||
<Tag color={tagColors[props?.message_type] || "default"}>
|
||||
{t(`copilot.${props?.message_type}`)}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col">
|
||||
{!editMode ? (
|
||||
props.isBot ? (
|
||||
<>
|
||||
{parseReasoning(props.message).map((e, i) => {
|
||||
if (e.type === "reasoning") {
|
||||
return (
|
||||
<Collapse
|
||||
key={i}
|
||||
className="border-none !mb-3"
|
||||
items={[
|
||||
{
|
||||
key: "reasoning",
|
||||
label:
|
||||
props.isStreaming && e?.reasoning_running ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="italic">
|
||||
{t("reasoning.thinking")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
t("reasoning.thought", {
|
||||
time: humanizeMilliseconds(
|
||||
props.reasoningTimeTaken
|
||||
)
|
||||
})
|
||||
),
|
||||
children: <Markdown message={e.content} />
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <Markdown key={i} message={e.content} />
|
||||
})}
|
||||
</>
|
||||
) : (
|
||||
<p
|
||||
className={`prose dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
|
||||
props.message_type &&
|
||||
"italic text-gray-500 dark:text-gray-400 text-sm"
|
||||
}`}>
|
||||
{props.message}
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
<EditMessageForm
|
||||
value={props.message}
|
||||
onSumbit={props.onEditFormSubmit}
|
||||
onClose={() => setEditMode(false)}
|
||||
isBot={props.isBot}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* source if available */}
|
||||
{props.images &&
|
||||
props.images.filter((img) => img.length > 0).length > 0 && (
|
||||
<div className="flex md:max-w-2xl lg:max-w-xl xl:max-w-3xl mt-4 m-auto w-full">
|
||||
{props.images
|
||||
.filter((image) => image.length > 0)
|
||||
.map((image, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={image}
|
||||
alt="Uploaded Image"
|
||||
width={180}
|
||||
className="rounded-md relative"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.isBot && props?.sources && props?.sources.length > 0 && (
|
||||
<Collapse
|
||||
className="mt-6"
|
||||
ghost
|
||||
items={[
|
||||
{
|
||||
key: "1",
|
||||
label: (
|
||||
<div className="italic text-gray-500 dark:text-gray-400">
|
||||
{t("citations")}
|
||||
</div>
|
||||
),
|
||||
children: (
|
||||
<div className="mb-3 flex flex-wrap gap-2">
|
||||
{props?.sources?.map((source, index) => (
|
||||
<MessageSource
|
||||
onSourceClick={props.onSourceClick}
|
||||
key={index}
|
||||
source={source}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{!props.isProcessing && !editMode && (
|
||||
<div
|
||||
className={`space-x-2 gap-2 mt-3 flex ${
|
||||
props.currentMessageIndex !== props.totalMessages - 1
|
||||
? // there is few style issue so i am commenting this out for v1.4.5 release
|
||||
// next release we will fix this
|
||||
"invisible group-hover:visible"
|
||||
: // ? "hidden group-hover:flex"
|
||||
""
|
||||
// : "flex"
|
||||
}`}>
|
||||
{props.isTTSEnabled && (
|
||||
<Tooltip title={t("tts")}>
|
||||
<button
|
||||
aria-label={t("tts")}
|
||||
onClick={() => {
|
||||
if (isSpeaking) {
|
||||
cancel()
|
||||
} else {
|
||||
speak({
|
||||
utterance: removeReasoning(props.message)
|
||||
})
|
||||
}
|
||||
}}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
{!isSpeaking ? (
|
||||
<PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
) : (
|
||||
<Square className="w-3 h-3 text-red-400 group-hover:text-red-500" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{props.isBot && (
|
||||
<>
|
||||
{!props.hideCopy && (
|
||||
<Tooltip title={t("copyToClipboard")}>
|
||||
<button
|
||||
aria-label={t("copyToClipboard")}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(props.message)
|
||||
setIsBtnPressed(true)
|
||||
setTimeout(() => {
|
||||
setIsBtnPressed(false)
|
||||
}, 2000)
|
||||
}}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
{!isBtnPressed ? (
|
||||
<ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
) : (
|
||||
<CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{props.generationInfo && (
|
||||
<Popover
|
||||
content={
|
||||
<GenerationInfo
|
||||
generationInfo={props.generationInfo}
|
||||
/>
|
||||
}
|
||||
title={t("generationInfo")}>
|
||||
<button
|
||||
aria-label={t("generationInfo")}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
</button>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{!props.hideEditAndRegenerate &&
|
||||
props.currentMessageIndex === props.totalMessages - 1 && (
|
||||
<Tooltip title={t("regenerate")}>
|
||||
<button
|
||||
aria-label={t("regenerate")}
|
||||
onClick={props.onRengerate}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!props.hideEditAndRegenerate && (
|
||||
<Tooltip title={t("edit")}>
|
||||
<button
|
||||
onClick={() => setEditMode(true)}
|
||||
aria-label={t("edit")}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
props.botAvatar
|
||||
)
|
||||
) : !props.userAvatar ? (
|
||||
<div className="absolute h-8 w-8 rounded-full from-blue-400 to-blue-600 bg-gradient-to-r"></div>
|
||||
) : (
|
||||
props.userAvatar
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-[calc(100%-50px)] flex-col gap-2 lg:w-[calc(100%-115px)]">
|
||||
<span className="text-xs font-bold text-gray-800 dark:text-white">
|
||||
{props.isBot
|
||||
? props.name === "chrome::gemini-nano::page-assist"
|
||||
? "Gemini Nano"
|
||||
: removeModelSuffix(
|
||||
props.name?.replaceAll(/accounts\/[^\/]+\/models\//g, "")
|
||||
)
|
||||
: "You"}
|
||||
</span>
|
||||
|
||||
{props.isBot &&
|
||||
props.isSearchingInternet &&
|
||||
props.currentMessageIndex === props.totalMessages - 1 ? (
|
||||
<WebSearch />
|
||||
) : null}
|
||||
<div>
|
||||
{props?.message_type && (
|
||||
<Tag color={tagColors[props?.message_type] || "default"}>
|
||||
{t(`copilot.${props?.message_type}`)}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col">
|
||||
{!editMode ? (
|
||||
props.isBot ? (
|
||||
<>
|
||||
{parseReasoning(props.message).map((e, i) => {
|
||||
if (e.type === "reasoning") {
|
||||
return (
|
||||
<Collapse
|
||||
key={i}
|
||||
className="border-none !mb-3"
|
||||
items={[
|
||||
{
|
||||
key: "reasoning",
|
||||
label:
|
||||
props.isStreaming && e?.reasoning_running ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="italic">
|
||||
{t("reasoning.thinking")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
t("reasoning.thought", {
|
||||
time: humanizeMilliseconds(
|
||||
props.reasoningTimeTaken
|
||||
)
|
||||
})
|
||||
),
|
||||
children: <Markdown message={e.content} />
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return <Markdown key={i} message={e.content} />
|
||||
})}
|
||||
</>
|
||||
) : (
|
||||
<p
|
||||
className={`prose dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
|
||||
props.message_type &&
|
||||
"italic text-gray-500 dark:text-gray-400 text-sm"
|
||||
}`}>
|
||||
{props.message}
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
<EditMessageForm
|
||||
value={props.message}
|
||||
onSumbit={props.onEditFormSubmit}
|
||||
onClose={() => setEditMode(false)}
|
||||
isBot={props.isBot}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* source if available */}
|
||||
{props.images &&
|
||||
props.images.filter((img) => img.length > 0).length > 0 && (
|
||||
<div>
|
||||
{props.images
|
||||
.filter((image) => image.length > 0)
|
||||
.map((image, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={image}
|
||||
alt="Uploaded Image"
|
||||
width={180}
|
||||
className="rounded-md relative"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.isBot && props?.sources && props?.sources.length > 0 && (
|
||||
<Collapse
|
||||
className="mt-6"
|
||||
ghost
|
||||
items={[
|
||||
{
|
||||
key: "1",
|
||||
label: (
|
||||
<div className="italic text-gray-500 dark:text-gray-400">
|
||||
{t("citations")}
|
||||
</div>
|
||||
),
|
||||
children: (
|
||||
<div className="mb-3 flex flex-wrap gap-2">
|
||||
{props?.sources?.map((source, index) => (
|
||||
<MessageSource
|
||||
onSourceClick={props.onSourceClick}
|
||||
key={index}
|
||||
source={source}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{!props.isProcessing && !editMode ? (
|
||||
<div
|
||||
className={`space-x-2 gap-2 flex ${
|
||||
props.currentMessageIndex !== props.totalMessages - 1
|
||||
? // there is few style issue so i am commenting this out for v1.4.5 release
|
||||
// next release we will fix this
|
||||
"invisible group-hover:visible"
|
||||
: // ? "hidden group-hover:flex"
|
||||
""
|
||||
// : "flex"
|
||||
}`}>
|
||||
{props.isTTSEnabled && (
|
||||
<Tooltip title={t("tts")}>
|
||||
<button
|
||||
aria-label={t("tts")}
|
||||
onClick={() => {
|
||||
if (isSpeaking) {
|
||||
cancel()
|
||||
} else {
|
||||
speak({
|
||||
utterance: removeReasoning(props.message)
|
||||
})
|
||||
}
|
||||
}}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
{!isSpeaking ? (
|
||||
<PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
) : (
|
||||
<Square className="w-3 h-3 text-red-400 group-hover:text-red-500" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
{props.isBot && (
|
||||
<>
|
||||
{!props.hideCopy && (
|
||||
<Tooltip title={t("copyToClipboard")}>
|
||||
<button
|
||||
aria-label={t("copyToClipboard")}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(props.message)
|
||||
setIsBtnPressed(true)
|
||||
setTimeout(() => {
|
||||
setIsBtnPressed(false)
|
||||
}, 2000)
|
||||
}}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
{!isBtnPressed ? (
|
||||
<ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
) : (
|
||||
<CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{props.generationInfo && (
|
||||
<Popover
|
||||
content={
|
||||
<GenerationInfo generationInfo={props.generationInfo} />
|
||||
}
|
||||
title={t("generationInfo")}>
|
||||
<button
|
||||
aria-label={t("generationInfo")}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
</button>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{!props.hideEditAndRegenerate &&
|
||||
props.currentMessageIndex === props.totalMessages - 1 && (
|
||||
<Tooltip title={t("regenerate")}>
|
||||
<button
|
||||
aria-label={t("regenerate")}
|
||||
onClick={props.onRengerate}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!props.hideEditAndRegenerate && (
|
||||
<Tooltip title={t("edit")}>
|
||||
<button
|
||||
onClick={() => setEditMode(true)}
|
||||
aria-label={t("edit")}
|
||||
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// add invisible div to prevent layout shift
|
||||
<div className="invisible">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user