fix build

apps/www/package.json

@@ -31,6 +31,7 @@
     "@llm-ui/markdown": "workspace:*",
     "@llm-ui/react": "workspace:*",
     "@llm-ui/json": "workspace:*",
+    "@llm-ui/csv": "workspace:*",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",

apps/www/src/components/demo/message/Message.tsx

@@ -1,11 +1,13 @@
 "use client";
-import { buttonsBlock as createButtonsBlock } from "@/components/examples/Buttons";
+import { buttonsCsvBlock as createCsvButtonsBlock } from "@/components/examples/ButtonsCsv";
+import { buttonsJsonBlock as createJsonButtonsBlock } from "@/components/examples/ButtonsJson";
 import { codeBlockBlock } from "@/components/examples/CodeBlock";
 import { Markdown } from "@/components/examples/Markdown";
 import { markdownLookBack } from "@llm-ui/markdown";
 import { useLLMOutput } from "@llm-ui/react";
 
-const buttonsBlock = createButtonsBlock();
+const buttonsJsonBlock = createJsonButtonsBlock();
+const buttonsCsvBlock = createCsvButtonsBlock();
 
 export const Message: React.FC<{
   message: string;
@@ -17,7 +19,7 @@ export const Message: React.FC<{
       component: Markdown,
       lookBack: markdownLookBack(),
     },
-    blocks: [codeBlockBlock, buttonsBlock],
+    blocks: [codeBlockBlock, buttonsJsonBlock, buttonsCsvBlock],
     isStreamFinished,
   });
 

apps/www/src/components/examples/ButtonsCsv.tsx

@@ -0,0 +1,32 @@
+import { starsAndConfetti } from "@/animations/buttonHandler";
+import { csvBlock, parseCsv } from "@llm-ui/csv";
+import type { LLMOutputBlock, LLMOutputComponent } from "@llm-ui/react";
+import { Button } from "../ui/Button";
+
+type OnClick = (buttonText: string | undefined) => void;
+
+const buttonsComponent = (onClick: OnClick) => {
+  const ButtonsComponent: LLMOutputComponent = ({ blockMatch }) => {
+    const buttons = parseCsv(blockMatch.output);
+    if (!buttons || !blockMatch.isVisible) {
+      return undefined;
+    }
+    return (
+      <div className="flex flex-row my-4 gap-2">
+        {buttons?.map((buttonText, index) => (
+          <Button key={index} onClick={() => onClick(buttonText ?? "")}>
+            {buttonText}
+          </Button>
+        ))}
+      </div>
+    );
+  };
+  return ButtonsComponent;
+};
+
+export const buttonsCsvBlock = (
+  onClick: OnClick = starsAndConfetti,
+): LLMOutputBlock => ({
+  ...csvBlock(),
+  component: buttonsComponent(onClick),
+});

apps/www/src/components/examples/Example.tsx

@@ -21,6 +21,7 @@ import React, {
 } from "react";
 import { Loader } from "../ui/custom/Loader";
 import { H2 } from "../ui/custom/Text";
+import { buttonsCsvBlock } from "./ButtonsCsv";
 import { buttonsJsonBlock } from "./ButtonsJson";
 import { codeBlockBlock } from "./CodeBlock";
 import { Controls } from "./Controls";
@@ -228,7 +229,7 @@ export const ExampleTabsTokenArray: React.FC<ExampleTokenArrayProps> = ({
   const { finishCount, restart, blockMatches, isFinished, visibleText } =
     useLLMOutput({
       llmOutput: output,
-      blocks: [codeBlockBlock, buttonsBlockRef.current],
+      blocks: [codeBlockBlock, buttonsBlockRef.current, buttonsCsvBlock()],
       fallbackBlock: {
         component: Markdown,
         lookBack: markdownLookBack(),
@@ -343,7 +344,7 @@ export const ExampleSideBySideTokenArray: React.FC<
   const { finishCount, restart, blockMatches, isFinished, visibleText } =
     useLLMOutput({
       llmOutput: output,
-      blocks: [codeBlockBlock, buttonsBlockRef.current],
+      blocks: [codeBlockBlock, buttonsBlockRef.current, buttonsCsvBlock()],
       fallbackBlock: {
         component: Markdown,
         lookBack: markdownLookBack(),

apps/www/src/content/docs/blocks/csv.mdx

@@ -26,7 +26,7 @@ Allow LLMs to reply with CSV, which can be rendered as custom components in your
 
 <ExampleSideBySide
   client:load
-  example={`Buttons:\n⦅Button 1,Button 2⦆`}
+  example={`Buttons:\n⦅Star ⭐,Confetti 🎉⦆`}
   options={{ delayMultiplier: 0.2 }}
 />
 

apps/www/src/content/docs/blocks/json.mdx

@@ -116,7 +116,7 @@ Generates:
 
 <CodeBlock code={buttonPrompt} />
 
-You can also hardcode the prompt into your application.
+You can also hardcode the prompt into your
 
 # Options
 

packages/csv/src/index.ts

@@ -4,3 +4,4 @@ export { csvBlockPrompt } from "./csvBlockPrompt";
 export { csvBlockLookBack } from "./lookback";
 export { findCompleteCsvBlock, findPartialCsvBlock } from "./matchers";
 export type { CsvBlockOptions } from "./options";
+export { parseCsv } from "./parseCsv";