feat(playground): @tailwindcss/forms compat (#565)

Yonom · Jul 25, 2024 · c8211c1 · c8211c1
1 parent 6fdbf47
commit c8211c1
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 22 deletions.
diff --git a/.changeset/fluffy-rockets-attend.md b/.changeset/fluffy-rockets-attend.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-playground": patch
+---
+
+feat: @tailwindcss/forms compat
diff --git a/examples/with-playground/package.json b/examples/with-playground/package.json
@@ -12,6 +12,7 @@
     "@ai-sdk/openai": "^0.0.38",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-playground": "workspace:*",
+    "@tailwindcss/forms": "^0.5.7",
     "next": "14.2.5",
     "prismjs": "^1.29.0",
     "react": "^18",

diff --git a/examples/with-playground/tailwind.config.ts b/examples/with-playground/tailwind.config.ts
@@ -11,7 +11,10 @@ const config = {
   ],
   plugins: [
     require("tailwindcss-animate"),
-    require("@assistant-ui/react/tailwindcss")({ components: ["default-theme"] }),
+    require("@tailwindcss/forms"),
+    require("@assistant-ui/react/tailwindcss")({
+      components: ["default-theme"],
+    }),
   ],
 } satisfies Config;
 

diff --git a/packages/react-markdown/src/overrides/CodeOverride.tsx b/packages/react-markdown/src/overrides/CodeOverride.tsx
@@ -6,7 +6,7 @@ import {
   PreComponent,
   SyntaxHighlighterProps,
 } from "./types";
-import { CodeBlockProps, DefaultCodeBlock } from "./CodeBlock";
+import { DefaultCodeBlock } from "./CodeBlock";
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { withDefaultProps } from "./withDefaults";
 import { DefaultCodeBlockContent } from "./defaultComponents";

diff --git a/packages/react-playground/src/components/ui/assistant-ui/text.tsx b/packages/react-playground/src/components/ui/assistant-ui/text.tsx
@@ -22,7 +22,7 @@ export const Text: TextContentPartComponent = ({ part }) => {
 
   return (
     <TextareaAutosize
-      className="w-full resize-none outline-none"
+      className="w-full resize-none border-none p-0 outline-none focus:ring-0"
       onChange={handleChange}
       value={part.text}
     />

diff --git a/packages/react-playground/src/components/ui/assistant-ui/thread.tsx b/packages/react-playground/src/components/ui/assistant-ui/thread.tsx
@@ -154,7 +154,7 @@ const Composer: FC = () => {
         autoFocus
         placeholder="Write a message..."
         rows={1}
-        className="placeholder:text-aui-muted-foreground size-full max-h-40 resize-none bg-transparent p-4 pr-24 text-sm outline-none"
+        className="placeholder:text-aui-muted-foreground size-full max-h-40 resize-none border-none bg-transparent p-4 pr-24 text-sm outline-none focus:ring-0"
         onKeyDown={handleKeyDown}
       />
       <div className="mx-3 mb-3 mt-0 flex items-end gap-2">

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml