dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upgrade to Tailwind CSS v4 (#1173)

Browse source
This commit is contained in:
Brandon McConnell 2025-09-09 15:44:07 -04:00 • committed by GitHub
parent 4ce76987a1
commit 848205f5cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
76 changed files with 1098 additions and 1050 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/artifact.tsx
View file

@ -259,14 +259,14 @@ function PureArtifact({
{artifact.isVisible && (
<motion.div
data-testid="artifact"
className="flex flex-row h-dvh w-dvw fixed top-0 left-0 z-50 bg-transparent"
className="fixed top-0 left-0 z-50 flex h-dvh w-dvw flex-row bg-transparent"
initial={{ opacity: 1 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, transition: { delay: 0.4 } }}
>
{!isMobile && (
<motion.div
className="fixed bg-background h-dvh"
className="fixed h-dvh bg-background"
initial={{
width: isSidebarOpen ? windowWidth - 256 : windowWidth,
right: 0,
@ -281,7 +281,7 @@ function PureArtifact({
{!isMobile && (
<motion.div
className="relative w-[400px] bg-muted dark:bg-background h-dvh shrink-0"
className="relative h-dvh w-[400px] shrink-0 bg-muted dark:bg-background"
initial={{ opacity: 0, x: 10, scale: 1 }}
animate={{
opacity: 1,
@ -304,7 +304,7 @@ function PureArtifact({
<AnimatePresence>
{!isCurrentVersion && (
<motion.div
className="left-0 absolute h-dvh w-[400px] top-0 bg-zinc-900/50 z-50"
className="absolute top-0 left-0 z-50 h-dvh w-[400px] bg-zinc-900/50"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@ -312,7 +312,7 @@ function PureArtifact({
)}
</AnimatePresence>
<div className="flex flex-col h-full justify-between items-center">
<div className="flex h-full flex-col items-center justify-between">
<ArtifactMessages
chatId={chatId}
status={status}
@ -324,7 +324,7 @@ function PureArtifact({
artifactStatus={artifact.status}
/>
<div className="flex flex-row gap-2 relative items-end w-full px-4 pb-4">
<div className="relative flex w-full flex-row items-end gap-2 px-4 pb-4">
<MultimodalInput
chatId={chatId}
input={input}
@ -346,7 +346,7 @@ function PureArtifact({
)}
<motion.div
className="fixed dark:bg-muted bg-background h-dvh flex flex-col overflow-y-scroll md:border-l dark:border-zinc-700 border-zinc-200"
className="fixed flex h-dvh flex-col overflow-y-scroll border-zinc-200 bg-background md:border-l dark:border-zinc-700 dark:bg-muted"
initial={
isMobile
? {
@ -412,19 +412,19 @@ function PureArtifact({
},
}}
>
<div className="p-2 flex flex-row justify-between items-start">
<div className="flex flex-row gap-4 items-start">
<div className="flex flex-row items-start justify-between p-2">
<div className="flex flex-row items-start gap-4">
<ArtifactCloseButton />
<div className="flex flex-col">
<div className="font-medium">{artifact.title}</div>
{isContentDirty ? (
<div className="text-sm text-muted-foreground">
<div className="text-muted-foreground text-sm">
Saving changes...
</div>
) : document ? (
<div className="text-sm text-muted-foreground">
<div className="text-muted-foreground text-sm">
{`Updated ${formatDistance(
new Date(document.createdAt),
new Date(),
@ -434,7 +434,7 @@ function PureArtifact({
)}`}
</div>
) : (
<div className="w-32 h-3 mt-2 bg-muted-foreground/20 rounded-md animate-pulse" />
<div className="mt-2 h-3 w-32 animate-pulse rounded-md bg-muted-foreground/20" />
)}
</div>
</div>
@ -450,7 +450,7 @@ function PureArtifact({
/>
</div>
<div className="dark:bg-muted bg-background h-full overflow-y-scroll !max-w-full items-center">
<div className="h-full max-w-full! items-center overflow-y-scroll bg-background dark:bg-muted">
<artifactDefinition.content
title={artifact.title}
content={