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

28
components/multimodal-input.tsx
View file

@ -29,7 +29,7 @@ import {
PromptInputModelSelectTrigger,
PromptInputModelSelectContent,
} from './elements/prompt-input';
import { SelectItem, } from '@/components/ui/select';
import { SelectItem } from '@/components/ui/select';
import equal from 'fast-deep-equal';
import type { UseChatHelpers } from '@ai-sdk/react';
import { AnimatePresence, motion } from 'framer-motion';
@ -253,7 +253,7 @@ function PureMultimodalInput({
}, [status, scrollToBottom]);
return (
<div className="flex relative flex-col gap-4 w-full">
<div className="relative flex w-full flex-col gap-4">
<AnimatePresence>
{!isAtBottom && (
<motion.div
@ -261,7 +261,7 @@ function PureMultimodalInput({
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="absolute -top-12 left-1/2 z-50 -translate-x-1/2"
className="-top-12 -translate-x-1/2 absolute left-1/2 z-50"
>
<Button
data-testid="scroll-to-bottom-button"
@ -291,7 +291,7 @@ function PureMultimodalInput({
<input
type="file"
className="fixed -top-4 -left-4 size-0.5 opacity-0 pointer-events-none"
className="-top-4 -left-4 pointer-events-none fixed size-0.5 opacity-0"
ref={fileInputRef}
multiple
onChange={handleFileChange}
@ -299,7 +299,7 @@ function PureMultimodalInput({
/>
<PromptInput
className="rounded-xl border shadow-sm transition-all duration-200 bg-background border-border focus-within:border-border hover:border-muted-foreground/50"
className="rounded-xl border border-border bg-background shadow-xs transition-all duration-200 focus-within:border-border hover:border-muted-foreground/50"
onSubmit={(event) => {
event.preventDefault();
if (status !== 'ready') {
@ -312,7 +312,7 @@ function PureMultimodalInput({
{(attachments.length > 0 || uploadQueue.length > 0) && (
<div
data-testid="attachments-preview"
className="flex overflow-x-scroll flex-row gap-2 items-end px-3 py-2"
className="flex flex-row items-end gap-2 overflow-x-scroll px-3 py-2"
>
{attachments.map((attachment) => (
<PreviewAttachment
@ -352,13 +352,13 @@ function PureMultimodalInput({
minHeight={44}
maxHeight={200}
disableAutoResize={true}
className="text-sm flex-grow resize-none py-3 px-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent !border-0 !border-none outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground"
className="text-sm grow resize-none py-3 px-3 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] bg-transparent border-0! border-none! outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none placeholder:text-muted-foreground"
rows={1}
autoFocus
/>{' '}
<Context {...contextProps} />
</div>
<PromptInputToolbar className="px-3 py-2 !border-t-0 !border-top-0 shadow-none dark:!border-transparent dark:border-0">
<PromptInputToolbar className="px-3 py-2 border-t-0! !border-top-0 shadow-none dark:border-transparent! dark:border-0">
<PromptInputTools className="gap-2">
<AttachmentsButton
fileInputRef={fileInputRef}
@ -374,7 +374,7 @@ function PureMultimodalInput({
<PromptInputSubmit
status={status}
disabled={!input.trim() || uploadQueue.length > 0}
className="p-2 rounded-full transition-colors duration-200 text-primary-foreground bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
className="rounded-full bg-primary p-2 text-primary-foreground transition-colors duration-200 hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground"
>
<ArrowUpIcon size={16} />
</PromptInputSubmit>
@ -413,7 +413,7 @@ function PureAttachmentsButton({
return (
<Button
data-testid="attachments-button"
className="rounded-md p-1.5 h-fit hover:bg-muted transition-colors duration-200"
className="h-fit rounded-md p-1.5 transition-colors duration-200 hover:bg-muted"
onClick={(event) => {
event.preventDefault();
fileInputRef.current?.click();
@ -455,16 +455,16 @@ function PureModelSelectorCompact({
>
<PromptInputModelSelectTrigger
type="button"
className="text-xs focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=open]:ring-0 data-[state=closed]:ring-0"
className="text-xs focus:outline-hidden focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=closed]:ring-0 data-[state=open]:ring-0"
>
{selectedModel?.name || 'Select model'}
</PromptInputModelSelectTrigger>
<PromptInputModelSelectContent>
{chatModels.map((model) => (
<SelectItem key={model.id} value={model.name}>
<div className="flex flex-col gap-1 items-start py-1">
<div className="flex flex-col items-start gap-1 py-1">
<div className="font-medium">{model.name}</div>
<div className="text-xs text-muted-foreground">
<div className="text-muted-foreground text-xs">
{model.description}
</div>
</div>
@ -487,7 +487,7 @@ function PureStopButton({
return (
<Button
data-testid="stop-button"
className="p-2 rounded-full border transition-colors duration-200 h-fit border-border hover:bg-muted"
className="h-fit rounded-full border border-border p-2 transition-colors duration-200 hover:bg-muted"
onClick={(event) => {
event.preventDefault();
stop();