[Docs] CSV Docs (#232)

.npmrc

@@ -0,0 +1,2 @@
+# this is needed to stop pnpm defaulting to workspace:* for the packages for some reason
+link-workspace-packages=false

apps/www/package.json

@@ -27,10 +27,11 @@
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/ri": "^1.1.20",
     "@llm-ui/code": "workspace:*",
+    "@llm-ui/csv": "workspace:*",
     "@llm-ui/examples": "workspace:*",
+    "@llm-ui/json": "workspace:*",
     "@llm-ui/markdown": "workspace:*",
     "@llm-ui/react": "workspace:*",
-    "@llm-ui/json": "workspace:*",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -73,6 +74,7 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
+    "@prettier/sync": "^0.5.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {

apps/www/src/animations/buttonHandler.ts

@@ -0,0 +1,10 @@
+import { fireConfetti } from "./confetti";
+import { multipleStars } from "./stars";
+
+export const starsAndConfetti = (text: string = "") => {
+  if (text.toLowerCase().includes("star")) {
+    multipleStars();
+  } else if (text.toLowerCase().includes("confetti")) {
+    fireConfetti();
+  }
+};

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,38 @@
+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 options = {
+  type: "buttons",
+  delimiter: ";",
+};
+
+const buttonsComponent = (onClick: OnClick) => {
+  const ButtonsComponent: LLMOutputComponent = ({ blockMatch }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_type, ...buttons] = parseCsv(blockMatch.output, options);
+    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(options),
+  component: buttonsComponent(onClick),
+});

apps/www/src/components/examples/Buttons.tsx → apps/www/src/components/examples/ButtonsJson.tsx

@@ -1,5 +1,4 @@
-import { fireConfetti } from "@/animations/confetti";
-import { multipleStars } from "@/animations/stars";
+import { starsAndConfetti } from "@/animations/buttonHandler";
 import { jsonBlock, parseJson5 } from "@llm-ui/json";
 import type { LLMOutputBlock, LLMOutputComponent } from "@llm-ui/react";
 import z from "zod";
@@ -34,15 +33,7 @@ const buttonsComponent = (onClick: OnClick) => {
   return ButtonsComponent;
 };
 
-export const starsAndConfetti = (buttonText: string = "") => {
-  if (buttonText.toLowerCase().includes("star")) {
-    multipleStars();
-  } else if (buttonText.toLowerCase().includes("confetti")) {
-    fireConfetti();
-  }
-};
-
-export const buttonsBlock = (
+export const buttonsJsonBlock = (
   onClick: OnClick = starsAndConfetti,
 ): LLMOutputBlock => ({
   ...jsonBlock({ type: "buttons", defaultVisible: true }),

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

@@ -1,3 +1,4 @@
+import { starsAndConfetti } from "@/animations/buttonHandler";
 import { cn, delay } from "@/lib/utils";
 import { markdownLookBack } from "@llm-ui/markdown";
 import {
@@ -20,7 +21,8 @@ import React, {
 } from "react";
 import { Loader } from "../ui/custom/Loader";
 import { H2 } from "../ui/custom/Text";
-import { buttonsBlock, starsAndConfetti } from "./Buttons";
+import { buttonsCsvBlock } from "./ButtonsCsv";
+import { buttonsJsonBlock } from "./ButtonsJson";
 import { codeBlockBlock } from "./CodeBlock";
 import { Controls } from "./Controls";
 import { Markdown } from "./Markdown";
@@ -209,7 +211,9 @@ export const ExampleTabsTokenArray: React.FC<ExampleTokenArrayProps> = ({
       starsAndConfetti(buttonText);
     }
   }, []);
-  const buttonsBlockRef = useRef<LLMOutputBlock>(buttonsBlock(onButtonClick));
+  const buttonsBlockRef = useRef<LLMOutputBlock>(
+    buttonsJsonBlock(onButtonClick),
+  );
 
   const {
     output,
@@ -225,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(),
@@ -326,7 +330,7 @@ export const ExampleSideBySideTokenArray: React.FC<
 
   const [mobileTabIndex, setMobileTabIndex] = useState(0);
   const [desktopTabIndex, setDesktopTabIndex] = useState(0);
-  const buttonsBlockRef = useRef<LLMOutputBlock>(buttonsBlock());
+  const buttonsBlockRef = useRef<LLMOutputBlock>(buttonsJsonBlock());
   const {
     output,
     isStreamFinished,
@@ -340,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/components/examples/examples.ts

@@ -59,7 +59,7 @@ export const presentationPauseExample: TokenWithDelay[] = [
   ...stringToTokenArray(afterPause, defaultExampleProbs),
 ];
 
-export const buttonPrompt = jsonBlockPrompt({
+export const buttonJsonPrompt = jsonBlockPrompt({
   name: "Button",
   schema: buttonsSchema,
   examples: [