feat: shadcn-ui CodeHeader and SyntaxHighlighter support (#432)

Yonom · Jul 9, 2024 · 0cabcc0 · 0cabcc0
1 parent fe6b0a3
commit 0cabcc0
Show file tree

Hide file tree

Showing 13 changed files with 218 additions and 312 deletions.
diff --git a/packages/shadcn-registry/components/ui/assistant-ui/codeblock.tsx b/packages/shadcn-registry/components/ui/assistant-ui/codeblock.tsx
diff --git a/packages/shadcn-registry/components/ui/assistant-ui/syntax-highlighter.tsx b/packages/shadcn-registry/components/ui/assistant-ui/syntax-highlighter.tsx
@@ -0,0 +1 @@
+export * from "@/registry/assistant-ui/syntax-highlighter";
diff --git a/packages/shadcn-registry/components/ui/assistant-ui/tooltip-icon-button.tsx b/packages/shadcn-registry/components/ui/assistant-ui/tooltip-icon-button.tsx
@@ -0,0 +1 @@
+export * from "@/registry/assistant-ui/tooltip-icon-button";
diff --git a/packages/shadcn-registry/package.json b/packages/shadcn-registry/package.json
@@ -7,6 +7,7 @@
   "devDependencies": {
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
+    "@assistant-ui/react-syntax-highlighter": "workspace:^",
     "@assistant-ui/tsconfig": "workspace:*",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-icons": "^1.3.0",
@@ -25,6 +26,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
+    "rehype-katex": "^7.0.0",
     "rimraf": "^5.0.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
@@ -35,7 +37,5 @@
   "scripts": {
     "build:registry": "tsx ./scripts/build-registry.ts"
   },
-  "dependencies": {
-    "rehype-katex": "^7.0.0"
-  }
+  "dependencies": {}
 }
diff --git a/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx b/packages/shadcn-registry/registry/assistant-ui/assistant-modal.tsx
@@ -2,17 +2,12 @@
 
 import { BotIcon, ChevronDownIcon } from "lucide-react";
 
-import { Thread } from "@/components/ui/assistant-ui/thread";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { type FC, forwardRef } from "react";
 import { AssistantModalPrimitive } from "@assistant-ui/react";
 
+import { Thread } from "@/components/ui/assistant-ui/thread";
+import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
+
 export const AssistantModal: FC = () => {
   return (
     <AssistantModalPrimitive.Root>
@@ -40,31 +35,25 @@ const FloatingAssistantButton = forwardRef<
   const tooltip = state === "open" ? "Close Assistant" : "Open Assistant";
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="default"
-            size="icon"
-            {...rest}
-            className="size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90"
-            ref={ref}
-          >
-            <BotIcon
-              data-state={state}
-              className="absolute size-6 transition-all data-[state=closed]:rotate-0 data-[state=open]:rotate-90 data-[state=closed]:scale-100 data-[state=open]:scale-0"
-            />
-
-            <ChevronDownIcon
-              data-state={state}
-              className="absolute size-6 transition-all data-[state=closed]:-rotate-90 data-[state=open]:rotate-0 data-[state=closed]:scale-0 data-[state=open]:scale-100"
-            />
-            <span className="sr-only">{tooltip}</span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="left">{tooltip}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <TooltipIconButton
+      variant="default"
+      tooltip={tooltip}
+      side="left"
+      {...rest}
+      className="size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90"
+      ref={ref}
+    >
+      <BotIcon
+        data-state={state}
+        className="absolute size-6 transition-all data-[state=closed]:rotate-0 data-[state=open]:rotate-90 data-[state=closed]:scale-100 data-[state=open]:scale-0"
+      />
+
+      <ChevronDownIcon
+        data-state={state}
+        className="absolute size-6 transition-all data-[state=closed]:-rotate-90 data-[state=open]:rotate-0 data-[state=closed]:scale-0 data-[state=open]:scale-100"
+      />
+      <span className="sr-only">{tooltip}</span>
+    </TooltipIconButton>
   );
 });
 

diff --git a/packages/shadcn-registry/registry/assistant-ui/assistant-sidebar.tsx b/packages/shadcn-registry/registry/assistant-ui/assistant-sidebar.tsx
@@ -6,7 +6,8 @@ import {
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import type { FC, PropsWithChildren } from "react";
-import { Thread } from "./thread";
+
+import { Thread } from "@/components/ui/assistant-ui/thread";
 
 export const AssistantSidebar: FC<PropsWithChildren> = ({ children }) => {
   return (

diff --git a/packages/shadcn-registry/registry/assistant-ui/experimental/codeblock.tsx b/packages/shadcn-registry/registry/assistant-ui/experimental/codeblock.tsx
diff --git a/packages/shadcn-registry/registry/assistant-ui/full/thread.tsx b/packages/shadcn-registry/registry/assistant-ui/full/thread.tsx
@@ -11,14 +11,7 @@ import {
 import type { FC } from "react";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Button, type ButtonProps } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import {
   ArrowDownIcon,
   CheckIcon,
@@ -30,29 +23,29 @@ import {
   SendHorizonalIcon,
 } from "lucide-react";
 import { MarkdownText } from "@/components/ui/assistant-ui/markdown-text";
+import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
 
 export const Thread: FC = () => {
   return (
-    <TooltipProvider>
-      <ThreadPrimitive.Root className="bg-background h-full">
-        <ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-8">
-          <ThreadWelcome />
-
-          <ThreadPrimitive.Messages
-            components={{
-              UserMessage,
-              EditComposer,
-              AssistantMessage,
-            }}
-          />
-
-          <div className="sticky bottom-0 mt-4 flex w-full max-w-2xl flex-grow flex-col items-center justify-end rounded-t-lg bg-inherit pb-4">
-            <ThreadScrollToBottom />
-            <Composer />
-          </div>
-        </ThreadPrimitive.Viewport>
-      </ThreadPrimitive.Root>
-    </TooltipProvider>
+    <ThreadPrimitive.Root className="bg-background h-full">
+      <ThreadPrimitive.Viewport className="flex h-full flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-8">
+        <ThreadWelcome />
+
+        <ThreadPrimitive.Messages
+          components={{
+            UserMessage,
+            EditComposer,
+            AssistantMessage,
+          }}
+        />
+
+        <div className="sticky bottom-0 mt-4 flex w-full max-w-2xl flex-grow flex-col items-center justify-end rounded-t-lg bg-inherit pb-4">
+          <ThreadScrollToBottom />
+          <Composer />
+        </div>
+      </ThreadPrimitive.Viewport>
+    </ThreadPrimitive.Root>
   );
 };
 
@@ -228,32 +221,6 @@ const BranchPicker: FC<BranchPickerPrimitiveRootProps> = ({
   );
 };
 
-type TooltipIconButtonProps = ButtonProps & { tooltip: string };
-
-const TooltipIconButton: FC<TooltipIconButtonProps> = ({
-  children,
-  tooltip,
-  className,
-  ...rest
-}) => {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn("size-6 p-1", className)}
-          {...rest}
-        >
-          {children}
-          <span className="sr-only">{tooltip}</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="bottom">{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-};
-
 const CircleStopIcon = () => {
   return (
     <svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "@/registry/assistant-ui/syntax-highlighter";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "@/registry/assistant-ui/tooltip-icon-button";