chore: sync up with main and update ai-elements components

Author: felixnorden

.gitignore

@@ -13,7 +13,7 @@ node_modules/
 dist/
 build/
 lib/
-!src/**/lib
+!/**/src/**/lib
 
 # Cloudflare Workers
 .wrangler/

packages/playground/eslint.config.mjs

@@ -1,6 +1,7 @@
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
+import { defineConfig, globalIgnores } from "eslint/config";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -9,8 +10,9 @@ const compat = new FlatCompat({
   baseDirectory: __dirname,
 });
 
-const eslintConfig = [
+const eslintConfig = defineConfig([
   ...compat.extends("next/core-web-vitals", "next/typescript"),
-];
+  globalIgnores(["src/**/ai-elements/**"]),
+]);
 
 export default eslintConfig;

packages/playground/package.json

@@ -52,7 +52,7 @@
     "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
@@ -61,8 +61,8 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@xyflow/react": "^12.9.2",
-    "ai": "^5.0.27",
+    "@xyflow/react": "^12.9.3",
+    "ai": "^5.0.97",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -76,10 +76,10 @@
     "react-dom": "19.1.1",
     "react-hook-form": "^7.62.0",
     "react-syntax-highlighter": "^15.6.6",
-    "shiki": "^3.12.2",
-    "streamdown": "^1.2.0",
+    "shiki": "^3.15.0",
+    "streamdown": "^1.5.1",
     "tailwind-merge": "^3.3.1",
-    "tokenlens": "^1.1.2",
+    "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.1",
     "zod": "^4.1.5"
   },

packages/playground/src/components/add-agent-modal.tsx

@@ -82,7 +82,7 @@ export function AddAgentModal({
       if (!result.isOnline) {
         setError(`Connection failed: ${result.error}`);
       }
-    } catch (err) {
+    } catch {
       setError("Failed to test connection");
       setConnectionStatus({ tested: true, online: false });
     } finally {

packages/playground/src/components/ai-elements/chain-of-thought.tsx

@@ -14,8 +14,8 @@ import {
   DotIcon,
   type LucideIcon,
 } from "lucide-react";
-import type { ComponentProps } from "react";
-import { createContext, memo, useContext } from "react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
 
 type ChainOfThoughtContextValue = {
   isOpen: boolean;
@@ -57,8 +57,13 @@ export const ChainOfThought = memo(
       onChange: onOpenChange,
     });
 
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+
     return (
-      <ChainOfThoughtContext.Provider value={{ isOpen, setIsOpen }}>
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
         <div
           className={cn("not-prose max-w-prose space-y-4", className)}
           {...props}
@@ -105,8 +110,8 @@ export const ChainOfThoughtHeader = memo(
 
 export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
   icon?: LucideIcon;
-  label: string;
-  description?: string;
+  label: ReactNode;
+  description?: ReactNode;
   status?: "complete" | "active" | "pending";
 };
 

packages/playground/src/components/ai-elements/code-block.tsx

@@ -3,13 +3,22 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { createContext, useContext, useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
-  oneDark,
-  oneLight,
-} from "react-syntax-highlighter/dist/esm/styles/prism";
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { type BundledLanguage, codeToHtml, type ShikiTransformer } from "shiki";
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  code: string;
+  language: BundledLanguage;
+  showLineNumbers?: boolean;
+};
 
 type CodeBlockContextType = {
   code: string;
@@ -19,85 +28,106 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
   code: "",
 });
 
-export type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
-  code: string;
-  language: string;
-  showLineNumbers?: boolean;
-  children?: ReactNode;
+const lineNumberTransformer: ShikiTransformer = {
+  name: "line-numbers",
+  line(node, line) {
+    node.children.unshift({
+      type: "element",
+      tagName: "span",
+      properties: {
+        className: [
+          "inline-block",
+          "min-w-10",
+          "mr-4",
+          "text-right",
+          "select-none",
+          "text-muted-foreground",
+        ],
+      },
+      children: [{ type: "text", value: String(line) }],
+    });
+  },
 };
 
+export async function highlightCode(
+  code: string,
+  language: BundledLanguage,
+  showLineNumbers = false
+) {
+  const transformers: ShikiTransformer[] = showLineNumbers
+    ? [lineNumberTransformer]
+    : [];
+
+  return await Promise.all([
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-light",
+      transformers,
+    }),
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-dark-pro",
+      transformers,
+    }),
+  ]);
+}
+
 export const CodeBlock = ({
   code,
   language,
   showLineNumbers = false,
   className,
   children,
   ...props
-}: CodeBlockProps) => (
-  <CodeBlockContext.Provider value={{ code }}>
-    <div
-      className={cn(
-        "relative w-full overflow-hidden rounded-md border bg-background text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      <div className="relative">
-        <SyntaxHighlighter
-          className="overflow-hidden dark:hidden"
-          codeTagProps={{
-            className: "font-mono text-sm",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "1rem",
-            fontSize: "0.875rem",
-            background: "hsl(var(--background))",
-            color: "hsl(var(--foreground))",
-          }}
-          language={language}
-          lineNumberStyle={{
-            color: "hsl(var(--muted-foreground))",
-            paddingRight: "1rem",
-            minWidth: "2.5rem",
-          }}
-          showLineNumbers={showLineNumbers}
-          style={oneLight}
-        >
-          {code}
-        </SyntaxHighlighter>
-        <SyntaxHighlighter
-          className="hidden overflow-hidden dark:block"
-          codeTagProps={{
-            className: "font-mono text-sm",
-          }}
-          customStyle={{
-            margin: 0,
-            padding: "1rem",
-            fontSize: "0.875rem",
-            background: "hsl(var(--background))",
-            color: "hsl(var(--foreground))",
-          }}
-          language={language}
-          lineNumberStyle={{
-            color: "hsl(var(--muted-foreground))",
-            paddingRight: "1rem",
-            minWidth: "2.5rem",
-          }}
-          showLineNumbers={showLineNumbers}
-          style={oneDark}
-        >
-          {code}
-        </SyntaxHighlighter>
-        {children && (
-          <div className="absolute top-2 right-2 flex items-center gap-2">
-            {children}
-          </div>
+}: CodeBlockProps) => {
+  const [html, setHtml] = useState<string>("");
+  const [darkHtml, setDarkHtml] = useState<string>("");
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+      if (!mounted.current) {
+        setHtml(light);
+        setDarkHtml(dark);
+        mounted.current = true;
+      }
+    });
+
+    return () => {
+      mounted.current = false;
+    };
+  }, [code, language, showLineNumbers]);
+
+  return (
+    <CodeBlockContext.Provider value={{ code }}>
+      <div
+        className={cn(
+          "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+          className
         )}
+        {...props}
+      >
+        <div className="relative">
+          <div
+            className="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+          <div
+            className="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            dangerouslySetInnerHTML={{ __html: darkHtml }}
+          />
+          {children && (
+            <div className="absolute top-2 right-2 flex items-center gap-2">
+              {children}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
-  </CodeBlockContext.Provider>
-);
+    </CodeBlockContext.Provider>
+  );
+};
 
 export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
   onCopy?: () => void;
@@ -117,7 +147,7 @@ export const CodeBlockCopyButton = ({
   const { code } = useContext(CodeBlockContext);
 
   const copyToClipboard = async () => {
-    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
       onError?.(new Error("Clipboard API not available"));
       return;
     }

packages/playground/src/components/ai-elements/confirmation.tsx

@@ -96,6 +96,12 @@ export type ConfirmationRequestProps = {
 export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {
   const { state } = useConfirmation();
 
+  // Only show when approval is requested
+  //@ts-ignore
+  if (state !== "approval-requested") {
+    return null;
+  }
+
   return children;
 };
 
@@ -109,7 +115,14 @@ export const ConfirmationAccepted = ({
   const { approval, state } = useConfirmation();
 
   // Only show when approved and in response states
-  if (!approval?.approved || state !== "output-available") {
+  if (
+    !approval?.approved ||
+    //@ts-ignore
+    (state !== "approval-responded" &&
+      //@ts-ignore
+      state !== "output-denied" &&
+      state !== "output-available")
+  ) {
     return null;
   }
 
@@ -126,7 +139,14 @@ export const ConfirmationRejected = ({
   const { approval, state } = useConfirmation();
 
   // Only show when rejected and in response states
-  if (approval?.approved !== false || state !== "output-available") {
+  if (
+    approval?.approved !== false ||
+    //@ts-ignore
+    (state !== "approval-responded" &&
+      //@ts-ignore
+      state !== "output-denied" &&
+      state !== "output-available")
+  ) {
     return null;
   }
 
@@ -141,6 +161,12 @@ export const ConfirmationActions = ({
 }: ConfirmationActionsProps) => {
   const { state } = useConfirmation();
 
+  // Only show when approval is requested
+  //@ts-ignore
+  if (state !== "approval-requested") {
+    return null;
+  }
+
   return (
     <div
       className={cn("flex items-center justify-end gap-2 self-end", className)}