Skip to content

tailwind 4 #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rubenmarcus wants to merge 1 commit into from
Closed

tailwind 4 #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@
"agents"
],
"devDependencies": {
"@tailwindcss/postcss": "^4.0.17",
"@types/bn.js": "^5.1.6",
"@types/node": "^20.17.9",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"prettier": "^3.4.2",
"tailwindcss": "^3.4.16",
"tailwindcss": "^4.0.17",
"tsup": "^8.3.5",
"typescript": "^5.7.2"
},
Expand Down
643 changes: 294 additions & 349 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions postcss.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
};
2 changes: 1 addition & 1 deletion src/components/chat/AgentPill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const AgentPill = forwardRef<HTMLDivElement, AgentPillProps>(
({ name }, ref) => (
<div
ref={ref}
className='bitte-w-fit bitte-rounded-full bitte-border bitte-border-dashed bitte-border-gray-40 bitte-px-2 bitte-py-1 bitte-text-xs bitte-font-semibold bitte-uppercase bitte-text-purple-400 bitte-mb-2 lg:bitte-mb-0 lg:bitte-absolute lg:bitte-left-2 lg:bitte-top-1/2 lg:bitte--translate-y-1/2'
className='bitte:w-fit bitte:rounded-full bitte:border bitte:border-dashed bitte:border-gray-40 bitte:px-2 bitte:py-1 bitte:text-xs bitte:font-semibold bitte:uppercase bitte:text-purple-400 bitte:mb-2 bitte:lg:mb-0 bitte:lg:absolute bitte:lg:left-2 bitte:lg:top-1/2 bitte:lg:-translate-y-1/2'
>
{name}
</div>
Expand Down
24 changes: 12 additions & 12 deletions src/components/chat/ChatContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export const ChatContent = ({
}, [messages.length, isInProgress, options?.prompt, append]);

return (
<div className='bitte-relative bitte-w-full bitte-h-full bitte-flex bitte-flex-col bitte-gap-4'>
<div className='bitte:relative bitte:w-full bitte:h-full bitte:flex bitte:flex-col bitte:gap-4'>
{/* Main chat container */}
<ChatContainer
style={{
Expand All @@ -204,50 +204,50 @@ export const ChatContent = ({
<Button
size='icon'
variant='outline'
className='bitte-absolute bitte-bottom-2 bitte-left-1/2 bitte--translate-x-1/2 hover:bitte-bg-inherit bitte-z-[99]'
className='bitte:absolute bitte:bottom-2 bitte:left-1/2 bitte:-translate-x-1/2 bitte:hover:bg-inherit bitte:z-99'
style={{
backgroundColor: generalBackground,
borderRadius: "9999px",
}}
onClick={scrollToBottomHandler}
>
<ArrowDown
className='bitte-h-4 bitte-w-4'
className='bitte:h-4 bitte:w-4'
style={{ color: textColor }}
/>
</Button>
)}

<div
ref={messagesRef}
className='bitte-absolute bitte-inset-0 bitte-flex bitte-h-full bitte-w-full bitte-justify-center bitte-overflow-y-auto bitte-overflow-x-hidden bitte-p-4'
className='bitte:absolute bitte:inset-0 bitte:flex bitte:h-full bitte:w-full bitte:justify-center bitte:overflow-y-auto bitte:overflow-x-hidden bitte:p-4'
>
<div
className={cn(
"bitte-mx-auto bitte-flex bitte-w-full bitte-flex-col md:bitte-mx-24 2xl:bitte-mx-56",
"bitte:mx-auto bitte:flex bitte:w-full bitte:flex-col bitte:md:mx-24 bitte:2xl:mx-56",
!!agentId
? "bitte-h-[calc(100%-240px)]"
: "bitte-h-[calc(100%-208px)]"
? "bitte:h-[calc(100%-240px)]"
: "bitte:h-[calc(100%-208px)]"
)}
>
{messages.length === 0 &&
(options?.customComponents?.welcomeMessageComponent ? (
options.customComponents.welcomeMessageComponent
) : (
<div className='bitte-flex bitte-flex-col bitte-gap-4 bitte-items-center bitte-justify-center bitte-absolute bitte-left-1/2 bitte--translate-x-1/2 bitte-top-1/2 bitte--translate-y-1/2 bitte-text-center bitte-w-full'>
<div className='bitte:flex bitte:flex-col bitte:gap-4 bitte:items-center bitte:justify-center bitte:absolute bitte:left-1/2 bitte:-translate-x-1/2 bitte:top-1/2 bitte:-translate-y-1/2 bitte:text-center bitte:w-full'>
<img
className='bitte-mx-auto bitte-mb-4'
className='bitte:mx-auto bitte:mb-4'
src={BITTE_IMG || "/placeholder.svg"}
alt='Bitte'
/>
<div className='bitte-mb-14 bitte-text-[20px] bitte-font-medium bitte-text-gray-40'>
<div className='bitte:mb-14 bitte:text-[20px] bitte:font-medium bitte:text-gray-40'>
Execute Transactions with AI
</div>
</div>
))}

<div
className='bitte-flex bitte-w-full bitte-flex-col bitte-gap-4 bitte-py-6'
className='bitte:flex bitte:w-full bitte:flex-col bitte:gap-4 bitte:py-6'
style={{ color: textColor }}
>
{groupedMessages?.map((messages: Message[]) => {
Expand All @@ -274,7 +274,7 @@ export const ChatContent = ({
})}

{error && (
<div className='bitte-flex bitte-flex-col bitte-items-center bitte-justify-center bitte-space-y-2 bitte-px-6 bitte-pb-6 bitte-text-center bitte-text-sm'>
<div className='bitte:flex bitte:flex-col bitte:items-center bitte:justify-center bitte:space-y-2 bitte:px-6 bitte:pb-6 bitte:text-center bitte:text-sm'>
{!accountId && !evmAddress ? (
<p>
An error occurred. <br />
Expand Down
10 changes: 5 additions & 5 deletions src/components/chat/ChatInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,11 @@ export const SmartActionsInput = ({

return (
<form
className='bitte-relative bitte-mb-0 bitte-flex bitte-w-full bitte-items-center bitte-justify-center bitte-gap-4 max-lg:bitte-flex-wrap'
className='bitte:relative bitte:mb-0 bitte:flex bitte:w-full bitte:items-center bitte:justify-center bitte:gap-4 bitte:max-lg:flex-wrap'
style={{ color: textColor }}
onSubmit={handleSubmit}
>
<div className='bitte-w-full bitte-relative'>
<div className='bitte:w-full bitte:relative'>
<AgentPill name={agentName || previousAgentName} ref={agentNameRef} />

<Textarea
Expand All @@ -67,7 +67,7 @@ export const SmartActionsInput = ({
background: backgroundColor,
borderColor: borderColor,
}}
className='bitte-h-[42px] bitte-w-full bitte-resize-none bitte-min-h-0 textarea-chat'
className='bitte:h-[42px] bitte:w-full bitte:resize-none bitte:min-h-0 textarea-chat'
onChange={handleChange}
onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === "Enter" && !e.shiftKey && !isLoading) {
Expand All @@ -78,9 +78,9 @@ export const SmartActionsInput = ({
value={input}
/>
</div>
<div className='bitte-flex bitte-gap-2 bitte-w-full lg:bitte-contents'>
<div className='bitte:flex bitte:gap-2 bitte:w-full bitte:lg:contents'>
{mobileInputExtraButton ? (
<div className='bitte-w-full lg:bitte-hidden'>
<div className='bitte:w-full bitte:lg:hidden'>
{mobileInputExtraButton}
</div>
) : null}
Expand Down
6 changes: 3 additions & 3 deletions src/components/chat/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ interface CodeBlockProps {

export const CodeBlock = ({ content }: CodeBlockProps) => {
return (
<div className="bitte-w-full">
<pre className="bitte-disable-scrollbars bitte-w-full bitte-overflow-x-auto bitte-rounded-lg bitte-bg-secondary bitte-p-4 bitte-text-secondary-foreground">
<div className="bitte:w-full">
<pre className="bitte-disable-scrollbars bitte:w-full bitte:overflow-x-auto bitte:rounded-lg bitte:bg-secondary bitte:p-4 bitte:text-secondary-foreground">
<code
className="bitte-block bitte-w-[400px] bitte-font-mono bitte-text-sm"
className="bitte:block bitte:w-[400px] bitte:font-mono bitte:text-sm"
aria-label='Code example'
>
{content}
Expand Down
6 changes: 3 additions & 3 deletions src/components/chat/CopyStandard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export const CopyStandard = ({
};

return (
<div id='copy' className="bitte-cursor-pointer bitte-p-2.5" onClick={handleCopyLink}>
<div id='copy' className="bitte:cursor-pointer bitte:p-2.5" onClick={handleCopyLink}>
<span
className={`bitte-relative bitte-flex bitte-items-center bitte-justify-center bitte-gap-2 ${textSize ? `bitte-text-${textSize}` : "bitte-text-base"}`}
className={`bitte:relative bitte:flex bitte:items-center bitte:justify-center bitte:gap-2 ${textSize ? `bitte-text-${textSize}` : "bitte:text-base"}`}
>
{showLinkCopiedText
? "Copied"
Expand All @@ -39,7 +39,7 @@ export const CopyStandard = ({
text,
isMobile ? charSize ?? 18 : charSize ?? 35
)}{" "}
<CopyIcon size={16} className="bitte-text-shad-blue-100" />
<CopyIcon size={16} className="bitte:text-shad-blue-100" />
</span>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
render() {
if (this.state.hasError) {
return (
<p className="bitte-my-4 bitte-overflow-auto bitte-text-center bitte-text-text-secondary">
<p className="bitte:my-4 bitte:overflow-auto bitte:text-center bitte:text-text-secondary">
Something went wrong
</p>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/chat/LoadingMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { BitteSpinner } from "./BitteSpinner";

const LoadingMessage = ({ color }: { color: string }) => (
<div className='bitte-flex bitte-flex-col bitte-items-center bitte-justify-center'>
<div className='bitte-flex bitte-w-full bitte-items-center bitte-justify-center'>
<div className='bitte:flex bitte:flex-col bitte:items-center bitte:justify-center'>
<div className='bitte:flex bitte:w-full bitte:items-center bitte:justify-center'>
<BitteSpinner width={100} height={100} color={color} />
</div>
</div>
Expand Down
20 changes: 10 additions & 10 deletions src/components/chat/MarkdownTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ export const MarkdownTable = ({ content }: { content: string }) => {
);

return (
<Table className="bitte-mt-4 bitte-w-full">
<Table className="bitte:mt-4 bitte:w-full">
<TableHeader>
<TableRow className="bitte-border-none hover:bitte-bg-transparent">
<TableRow className="bitte:border-none bitte:hover:bg-transparent">
{cells[0].map((header, index) => (
<TableHead
key={index}
className="bitte-whitespace-nowrap bitte-px-4 bitte-text-left text-[12px] bitte-font-medium"
className="bitte:whitespace-nowrap bitte:px-4 bitte:text-left text-[12px] bitte:font-medium"
>
{header}
</TableHead>
Expand All @@ -46,7 +46,7 @@ export const MarkdownTable = ({ content }: { content: string }) => {
</TableHeader>
<TableBody>
{cells.slice(1).map((row, rowIndex) => (
<TableRow key={rowIndex} className="bitte-border-none hover:bitte-bg-transparent">
<TableRow key={rowIndex} className="bitte:border-none bitte:hover:bg-transparent">
{row.map((cell, cellIndex) => {
const linkMatchQuery = cell.match(/\[Link\]\((.*)\)/);
const linkValue = linkMatchQuery?.[1];
Expand All @@ -59,28 +59,28 @@ export const MarkdownTable = ({ content }: { content: string }) => {
return (
<TableCell
key={cellIndex}
className="bitte-whitespace-nowrap bitte-px-4 bitte-text-left"
className="bitte:whitespace-nowrap bitte:px-4 bitte:text-left"
>
<div className="bitte-max-w-[250px] bitte-break-words">
<div className="bitte:max-w-[250px] bitte:break-words">
{linkValue ? (
<a href={linkValue} target='_blank'>
<Button
variant='ghost'
className="bitte-flex bitte-items-center bitte-gap-2 bitte-p-0 bitte-text-shad-blue-100 hover:text-shad-blue-100"
className="bitte:flex bitte:items-center bitte:gap-2 bitte:p-0 bitte:text-shad-blue-100 hover:text-shad-blue-100"
>
View
<ArrowUpRight className="bitte-h-4 bitte-w-4" />
<ArrowUpRight className="bitte:h-4 bitte:w-4" />
</Button>
</a>
) : imageMatch ? (
<div className="bitte-relative bitte-h-24 bitte-w-24">
<div className="bitte:relative bitte:h-24 bitte:w-24">
<img
src={`${IMAGE_API}${imageValue}`}
alt={`result-${cellIndex}`}
/>
</div>
) : (
<div className="bitte-truncate">{cell}</div>
<div className="bitte:truncate">{cell}</div>
)}
</div>
</TableCell>
Expand Down
4 changes: 2 additions & 2 deletions src/components/chat/Message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const LinkRenderer = ({
href={href as string}
target='_blank'
rel='noopener noreferrer'
className="bitte-text-blue-300"
className="bitte:text-blue-300"
{...props}
>
{children}
Expand All @@ -36,7 +36,7 @@ export const SAMessage = memo(({ content }: { content: string }) => {
<MarkdownTable content={content} />
) : (
<MemoizedReactMarkdown
className="bitte-prose bitte-dark:prose-invert bitte-prose-p:leading-relaxed bitte-prose-pre:p-0 bitte-break-words"
className="bitte-prose bitte-dark:prose-invert bitte-prose-p:leading-relaxed bitte-prose-pre:p-0 bitte:break-words"
remarkPlugins={[remarkGfm, remarkMath]}
components={{
a: LinkRenderer,
Expand Down
20 changes: 10 additions & 10 deletions src/components/chat/MessageGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const MessageGroup = ({
return (
<ErrorBoundary key={`${groupKey}-${message.id}`}>
{evmSignRequest ? (
<div className='bitte-my-4'>
<div className='bitte:my-4'>
<EvmTxCard
evmData={evmSignRequest}
borderColor={borderColor}
Expand All @@ -162,7 +162,7 @@ export const MessageGroup = ({
/>
</div>
) : (
<div className='bitte-my-4'>
<div className='bitte:my-4'>
<ReviewTransaction
chatId={chatId}
creator={creator}
Expand Down Expand Up @@ -204,9 +204,9 @@ export const MessageGroup = ({
}}
uniqueKey={uniqueKey}
>
<div className='bitte-mt-6 bitte-flex bitte-w-full bitte-flex-col bitte-gap-2'>
<div className='bitte:mt-6 bitte:flex bitte:w-full bitte:flex-col bitte:gap-2'>
{message.content && (
<div className='bitte-flex bitte-flex-col bitte-gap-4'>
<div className='bitte:flex bitte:flex-col bitte:gap-4'>
<SAMessage content={message.content} />
</div>
)}
Expand All @@ -218,13 +218,13 @@ export const MessageGroup = ({

return (
<div key={`${toolCallId}-${index}`}>
<div className='bitte-flex bitte-w-full bitte-items-center bitte-justify-between bitte-text-[12px]'>
<div className='bitte:flex bitte:w-full bitte:items-center bitte:justify-between bitte:text-[12px]'>
<div>Tool Call</div>
<div className='bitte-rounded bitte-bg-shad-white-10 bitte-px-2 bitte-py-1'>
<div className='bitte:rounded bitte:bg-shad-white-10 bitte:px-2 bitte:py-1'>
<code>{toolName}</code>
</div>
</div>
<div className='bitte-p-4'>
<div className='bitte:p-4'>
{(() => {
if (state === "result") {
if (!result.data) {
Expand All @@ -239,13 +239,13 @@ export const MessageGroup = ({
return (
<img
src={result?.data?.url}
className='bitte-w-full'
className='bitte:w-full'
/>
);
}
case BittePrimitiveName.CREATE_DROP: {
return (
<div className='bitte-flex bitte-items-center bitte-justify-center bitte-gap-2'>
<div className='bitte:flex bitte:items-center bitte:justify-center bitte:gap-2'>
<Button asChild variant='link'>
<a
href={`/claim/${result.data}`}
Expand Down Expand Up @@ -306,7 +306,7 @@ export const MessageGroup = ({
</div>

<div
className='bitte-mt-2 bitte-border-t'
className='bitte:mt-2 bitte:border-t'
style={{ borderColor: borderColor }}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/default-components/DefaultChatContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const DefaultChatContainer = ({
style,
}: ChatContainerComponentProps) => (
<div
className='bitte-chat-main bitte-text-start bitte-flex-1 bitte-relative bitte-min-h-[360px] bitte-w-full bitte-overflow-hidden lg:bitte-rounded-md bitte-border-t bitte-border-b lg:bitte-border bitte-pl-6'
className='bitte-chat-main bitte:text-start bitte:flex-1 bitte:relative bitte:min-h-[360px] bitte:w-full bitte:overflow-hidden bitte:lg:rounded-md bitte:border-t bitte:border-b bitte:lg:border bitte:pl-6'
style={{
backgroundColor: style?.backgroundColor,
borderColor: style?.borderColor,
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/default-components/DefaultInputContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { InputContainerProps } from "../../../types";

const DefaultInputContainer = ({ children, style }: InputContainerProps) => (
<div
className='lg:bitte-rounded-md bitte-border-t bitte-border-b lg:bitte-border bitte-p-6 bitte-w-full'
className='bitte:lg:rounded-md bitte:border-t bitte:border-b bitte:lg:border bitte:p-6 bitte:w-full'
style={{
backgroundColor: style?.backgroundColor,
borderColor: style?.borderColor,
Expand Down
2 changes: 1 addition & 1 deletion src/components/chat/default-components/DefaultLoadingIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { BitteSpinner } from "../BitteSpinner";
const DefaultLoadingIndicator = ({
textColor,
}: LoadingIndicatorComponentProps) => (
<div className='bitte-flex bitte-w-full bitte-flex-col bitte-items-center bitte-justify-center'>
<div className='bitte:flex bitte:w-full bitte:flex-col bitte:items-center bitte:justify-center'>
<BitteSpinner width={100} height={100} color={textColor || "#FFFFFF"} />
</div>
);
Expand Down
Loading