Skip to content

Commit 091a508

Browse files
damlayildizdamlayildiz
committed
feat: add tailwind prefix
1 parent dbadbdf commit 091a508

File tree

17 files changed

+203
-160
lines changed

17 files changed

+203
-160
lines changed

‎lib/DocsChatbot.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -100,41 +100,41 @@ export const DocsChatbot = ({
100100
<DialogTrigger asChild>
101101
<Button
102102
size="icon"
103-
className="fixed bottom-4 right-4 h-14 w-14 rounded-full shadow-lg cursor-pointer"
103+
className="dcb:fixed dcb:bottom-4 dcb:right-4 dcb:h-14 dcb:w-14 dcb:rounded-full dcb:shadow-lg dcb:cursor-pointer"
104104
>
105-
<MessageSquare className="h-6 w-6" />
105+
<MessageSquare className="dcb:h-6 dcb:w-6" />
106106
</Button>
107107
</DialogTrigger>
108108

109109
<DialogContent
110110
className={cn(
111-
"max-w-md w-[calc(100vw-2rem)] h-[min(600px,calc(100vh-7rem))] sm:max-w-[425px]",
112-
"flex flex-col p-0 fixed gap-0",
113-
"top-auto left-auto bottom-20 right-4",
114-
"translate-x-0 translate-y-0"
111+
"dcb:max-w-md dcb:w-[calc(100vw-2rem)] dcb:h-[min(600px,calc(100vh-7rem))] sm:dcb:max-w-[425px]",
112+
"dcb:flex dcb:flex-col dcb:p-0 dcb:fixed dcb:gap-0",
113+
"dcb:top-auto dcb:left-auto dcb:bottom-20 dcb:right-4",
114+
"dcb:translate-x-0 dcb:translate-y-0"
115115
)}
116116
>
117-
<div className="px-4 py-3 border-b bg-background rounded-lg flex-shrink-0">
118-
<h2 className="text-lg font-sans font-semibold">{title}</h2>
117+
<div className="dcb:px-4 dcb:py-3 dcb:border-b dcb:bg-background dcb:rounded-lg dcb:flex-shrink-0">
118+
<h2 className="dcb:text-lg dcb:font-sans dcb:font-semibold">{title}</h2>
119119
</div>
120120

121-
<Conversation className="relative w-full h-full overflow-hidden">
121+
<Conversation className="dcb:relative dcb:w-full dcb:h-full dcb:overflow-hidden">
122122
{error && (
123-
<div className="absolute top-4 left-4 right-4 z-10">
124-
<Alert variant="destructive" className="shadow-lg">
125-
<AlertCircle className="h-4 w-4" />
123+
<div className="dcb:absolute dcb:top-4 dcb:left-4 dcb:right-4 dcb:z-10">
124+
<Alert variant="destructive" className="dcb:shadow-lg">
125+
<AlertCircle className="dcb:h-4 dcb:w-4" />
126126

127-
<AlertDescription className="pr-8">
127+
<AlertDescription className="dcb:pr-8">
128128
{error.message || "Something went wrong. Please try again."}
129129
</AlertDescription>
130130

131131
<Button
132132
variant="ghost"
133133
size="icon"
134-
className="absolute top-2 right-2 h-6 w-6 text-destructive hover:text-destructive hover:bg-destructive/10"
134+
className="dcb:absolute dcb:top-2 dcb:right-2 dcb:h-6 dcb:w-6 dcb:text-destructive hover:dcb:text-destructive hover:dcb:bg-destructive/10"
135135
onClick={() => clearError()}
136136
>
137-
<X className="h-4 w-4" />
137+
<X className="dcb:h-4 dcb:w-4" />
138138
</Button>
139139
</Alert>
140140
</div>
@@ -144,7 +144,7 @@ export const DocsChatbot = ({
144144
{messages.length === 0 ? (
145145
emptyState ? (
146146
<ConversationEmptyState
147-
icon={<MessageSquare className="size-12" />}
147+
icon={<MessageSquare className="dcb:size-12" />}
148148
title={emptyState.title}
149149
description={emptyState.description}
150150
/>
@@ -156,7 +156,7 @@ export const DocsChatbot = ({
156156
<Message key={message.id} from={message.role}>
157157
<MessageContent
158158
className={
159-
message.role === "assistant" ? "!max-w-full w-full" : ""
159+
message.role === "assistant" ? "!dcb:max-w-full dcb:w-full" : ""
160160
}
161161
>
162162
{message.parts.map((part) => {
@@ -178,15 +178,15 @@ export const DocsChatbot = ({
178178
return (
179179
<Artifact key={part.sourceId}>
180180
<ArtifactHeader
181-
className="cursor-pointer hover:bg-muted/70 transition-colors"
181+
className="dcb:cursor-pointer hover:dcb:bg-muted/70 dcb:transition-colors"
182182
onClick={() => window.open(part.url, "_blank")}
183183
>
184184
<ArtifactTitle>{part.title}</ArtifactTitle>
185185
<ArtifactActions>
186186
<ArtifactAction
187187
icon={ExternalLink}
188188
tooltip="Go to source"
189-
className="cursor-pointer"
189+
className="dcb:cursor-pointer"
190190
/>
191191
</ArtifactActions>
192192
</ArtifactHeader>
@@ -212,7 +212,7 @@ export const DocsChatbot = ({
212212
<ConversationScrollButton />
213213
</Conversation>
214214

215-
<div className="px-4 py-2 border-t flex-shrink-0">
215+
<div className="dcb:px-4 dcb:py-2 dcb:border-t dcb:flex-shrink-0">
216216
<PromptInput
217217
onSubmit={(message: PromptInputMessage) => {
218218
if (message.text?.trim()) {
@@ -224,13 +224,13 @@ export const DocsChatbot = ({
224224
<PromptInputBody>
225225
<PromptInputTextarea
226226
placeholder="Ask a question..."
227-
className="min-h-8 max-h-32"
227+
className="dcb:min-h-8 dcb:max-h-32"
228228
value={inputValue}
229229
onChange={(e) => setInputValue(e.target.value)}
230230
/>
231231
<PromptInputToolbar>
232232
<PromptInputTools></PromptInputTools>
233-
<PromptInputSubmit status={status} className="cursor-pointer" />
233+
<PromptInputSubmit status={status} className="dcb:cursor-pointer" />
234234
</PromptInputToolbar>
235235
</PromptInputBody>
236236
</PromptInput>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@sqliteai/docs-chatbot",
33
"description": "Documentation search chatbot powered by SQLite and AI",
4-
"version": "0.0.5",
4+
"version": "0.0.6",
55
"license": "MIT",
66
"type": "module",
77
"main": "./dist/cjs/index.cjs.js",

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DocsChatbot } from "../lib/DocsChatbot";
22

33
function App() {
44
return (
5-
<div className="min-h-screen items-center justify-center">
5+
<div className="dcb:min-h-screen dcb:items-center dcb:justify-center">
66
<DocsChatbot
77
searchUrl={import.meta.env.VITE_SEARCH_API_URL as string}
88
apiKey={import.meta.env.VITE_SEARCH_API_KEY as string}

‎src/components/ai-elements/artifact.tsx‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
1616
export const Artifact = ({ className, ...props }: ArtifactProps) => (
1717
<div
1818
className={cn(
19-
"flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
19+
"dcb:flex dcb:flex-col dcb:overflow-hidden dcb:rounded-lg dcb:border dcb:bg-background dcb:shadow-sm",
2020
className
2121
)}
2222
{...props}
@@ -31,7 +31,7 @@ export const ArtifactHeader = ({
3131
}: ArtifactHeaderProps) => (
3232
<div
3333
className={cn(
34-
"flex items-center justify-between border-b bg-muted/50 px-4 py-3",
34+
"dcb:flex dcb:items-center dcb:justify-between dcb:border-b dcb:bg-muted/50 dcb:px-4 dcb:py-3",
3535
className
3636
)}
3737
{...props}
@@ -49,24 +49,24 @@ export const ArtifactClose = ({
4949
}: ArtifactCloseProps) => (
5050
<Button
5151
className={cn(
52-
"size-8 p-0 text-muted-foreground hover:text-foreground",
52+
"dcb:size-8 dcb:p-0 dcb:text-muted-foreground hover:dcb:text-foreground",
5353
className
5454
)}
5555
size={size}
5656
type="button"
5757
variant={variant}
5858
{...props}
5959
>
60-
{children ?? <XIcon className="size-4" />}
61-
<span className="sr-only">Close</span>
60+
{children ?? <XIcon className="dcb:size-4" />}
61+
<span className="dcb:sr-only">Close</span>
6262
</Button>
6363
);
6464

6565
export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
6666

6767
export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
6868
<p
69-
className={cn("font-medium text-foreground text-sm", className)}
69+
className={cn("dcb:font-medium dcb:text-foreground dcb:text-sm", className)}
7070
{...props}
7171
/>
7272
);
@@ -77,7 +77,10 @@ export const ArtifactDescription = ({
7777
className,
7878
...props
7979
}: ArtifactDescriptionProps) => (
80-
<p className={cn("text-muted-foreground text-sm", className)} {...props} />
80+
<p
81+
className={cn("dcb:text-muted-foreground dcb:text-sm", className)}
82+
{...props}
83+
/>
8184
);
8285

8386
export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
@@ -86,7 +89,10 @@ export const ArtifactActions = ({
8689
className,
8790
...props
8891
}: ArtifactActionsProps) => (
89-
<div className={cn("flex items-center gap-1", className)} {...props} />
92+
<div
93+
className={cn("dcb:flex dcb:items-center dcb:gap-1", className)}
94+
{...props}
95+
/>
9096
);
9197

9298
export type ArtifactActionProps = ComponentProps<typeof Button> & {
@@ -108,16 +114,16 @@ export const ArtifactAction = ({
108114
const button = (
109115
<Button
110116
className={cn(
111-
"size-8 p-0 text-muted-foreground hover:text-foreground",
117+
"dcb:size-8 dcb:p-0 dcb:text-muted-foreground hover:dcb:text-foreground",
112118
className
113119
)}
114120
size={size}
115121
type="button"
116122
variant={variant}
117123
{...props}
118124
>
119-
{Icon ? <Icon className="size-4" /> : children}
120-
<span className="sr-only">{label || tooltip}</span>
125+
{Icon ? <Icon className="dcb:size-4" /> : children}
126+
<span className="dcb:sr-only">{label || tooltip}</span>
121127
</Button>
122128
);
123129

@@ -143,5 +149,8 @@ export const ArtifactContent = ({
143149
className,
144150
...props
145151
}: ArtifactContentProps) => (
146-
<div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
152+
<div
153+
className={cn("dcb:flex-1 dcb:overflow-auto dcb:p-4", className)}
154+
{...props}
155+
/>
147156
);

‎src/components/ai-elements/conversation.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
1111

1212
export const Conversation = ({ className, ...props }: ConversationProps) => (
1313
<StickToBottom
14-
className={cn("relative flex-1 overflow-y-auto", className)}
14+
className={cn("dcb:relative dcb:flex-1 dcb:overflow-y-auto", className)}
1515
initial="smooth"
1616
resize="smooth"
1717
role="log"
@@ -27,7 +27,7 @@ export const ConversationContent = ({
2727
className,
2828
...props
2929
}: ConversationContentProps) => (
30-
<StickToBottom.Content className={cn("p-4", className)} {...props} />
30+
<StickToBottom.Content className={cn("dcb:p-4", className)} {...props} />
3131
);
3232

3333
export type ConversationEmptyStateProps = ComponentProps<"div"> & {
@@ -46,18 +46,18 @@ export const ConversationEmptyState = ({
4646
}: ConversationEmptyStateProps) => (
4747
<div
4848
className={cn(
49-
"flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
49+
"dcb:flex dcb:size-full dcb:flex-col dcb:items-center dcb:justify-center dcb:gap-3 dcb:p-8 dcb:text-center",
5050
className
5151
)}
5252
{...props}
5353
>
5454
{children ?? (
5555
<>
56-
{icon && <div className="text-muted-foreground">{icon}</div>}
57-
<div className="space-y-1">
58-
<h3 className="font-medium font-sans text-sm">{title}</h3>
56+
{icon && <div className="dcb:text-muted-foreground">{icon}</div>}
57+
<div className="dcb:space-y-1">
58+
<h3 className="dcb:font-medium dcb:font-sans dcb:text-sm">{title}</h3>
5959
{description && (
60-
<p className="text-muted-foreground font-sans text-sm">
60+
<p className="dcb:text-muted-foreground dcb:font-sans dcb:text-sm">
6161
{description}
6262
</p>
6363
)}
@@ -83,7 +83,7 @@ export const ConversationScrollButton = ({
8383
!isAtBottom && (
8484
<Button
8585
className={cn(
86-
"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
86+
"dcb:absolute dcb:bottom-4 dcb:left-[50%] dcb:translate-x-[-50%] dcb:rounded-full",
8787
className
8888
)}
8989
onClick={handleScrollToBottom}
@@ -92,7 +92,7 @@ export const ConversationScrollButton = ({
9292
variant="outline"
9393
{...props}
9494
>
95-
<ArrowDownIcon className="size-4" />
95+
<ArrowDownIcon className="dcb:size-4" />
9696
</Button>
9797
)
9898
);

‎src/components/ai-elements/message.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,29 @@ export type MessageProps = HTMLAttributes<HTMLDivElement> & {
1111
export const Message = ({ className, from, ...props }: MessageProps) => (
1212
<div
1313
className={cn(
14-
"group flex w-full items-end justify-end gap-2 py-4",
15-
from === "user" ? "is-user" : "is-assistant flex-row-reverse justify-end",
14+
"group dcb:flex dcb:w-full dcb:items-end dcb:justify-end dcb:gap-2 dcb:py-4",
15+
from === "user"
16+
? "is-user"
17+
: "is-assistant dcb:flex-row-reverse dcb:justify-end",
1618
className
1719
)}
1820
{...props}
1921
/>
2022
);
2123

2224
const messageContentVariants = cva(
23-
"is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm",
25+
"is-user:dark dcb:flex dcb:flex-col dcb:gap-2 dcb:overflow-hidden dcb:rounded-lg dcb:text-sm",
2426
{
2527
variants: {
2628
variant: {
2729
contained: [
28-
"max-w-[80%] px-4 py-3",
29-
"group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground",
30-
"group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground",
30+
"dcb:max-w-[80%] dcb:px-4 dcb:py-3",
31+
"group-[.is-user]:dcb:bg-primary group-[.is-user]:dcb:text-primary-foreground",
32+
"group-[.is-assistant]:dcb:bg-secondary group-[.is-assistant]:dcb:text-foreground",
3133
],
3234
flat: [
33-
"group-[.is-user]:max-w-[80%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
34-
"group-[.is-assistant]:text-foreground",
35+
"group-[.is-user]:dcb:max-w-[80%] group-[.is-user]:dcb:bg-secondary group-[.is-user]:dcb:px-4 group-[.is-user]:dcb:py-3 group-[.is-user]:dcb:text-foreground",
36+
"group-[.is-assistant]:dcb:text-foreground",
3537
],
3638
},
3739
},
@@ -51,7 +53,10 @@ export const MessageContent = ({
5153
...props
5254
}: MessageContentProps) => (
5355
<div
54-
className={cn(messageContentVariants({ variant, className }), "font-sans")}
56+
className={cn(
57+
messageContentVariants({ variant, className }),
58+
"dcb:font-sans"
59+
)}
5560
{...props}
5661
>
5762
{children}
@@ -69,8 +74,11 @@ export const MessageAvatar = ({
6974
className,
7075
...props
7176
}: MessageAvatarProps) => (
72-
<Avatar className={cn("size-8 ring-1 ring-border", className)} {...props}>
73-
<AvatarImage alt="" className="mt-0 mb-0" src={src} />
77+
<Avatar
78+
className={cn("dcb:size-8 dcb:ring-1 dcb:ring-border", className)}
79+
{...props}
80+
>
81+
<AvatarImage alt="" className="dcb:mt-0 dcb:mb-0" src={src} />
7482
<AvatarFallback>{name?.slice(0, 2) || "ME"}</AvatarFallback>
7583
</Avatar>
7684
);

0 commit comments

Comments
 (0)