www: Fix homepage demo glitch

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

@@ -27,7 +27,7 @@ import { codeBlockBlock } from "./CodeBlock";
 import { Controls } from "./Controls";
 import { Markdown } from "./Markdown";
 import { NeverShrinkContainer } from "./NeverShrinkContainer";
-import { defaultExampleProbs } from "./contants";
+import { defaultExampleProbs } from "./constants";
 import { getThrottle, type ThrottleType } from "./throttle";
 import type { Tab } from "./types";
 

apps/www/src/components/examples/contants.ts → apps/www/src/components/examples/constants.ts

@@ -4,3 +4,5 @@ export const defaultExampleProbs: ProbabilityOptions = {
   delayMsProbabilities: [{ delayMs: 90, prob: 1 }],
   tokenCharsProbabilities: [{ tokenChars: 3, prob: 1 }],
 };
+
+export const HIDDEN_CHAR = "‎";

apps/www/src/components/examples/examples.ts

@@ -1,7 +1,7 @@
 import { jsonBlockPrompt } from "@llm-ui/json";
 import { stringToTokenArray, type TokenWithDelay } from "@llm-ui/react";
 import { buttonsSchema } from "./buttonsSchema";
-import { defaultExampleProbs } from "./contants";
+import { HIDDEN_CHAR, defaultExampleProbs } from "./constants";
 
 const ctaBeforePause = `# llm-ui
 
@@ -19,7 +19,7 @@ Lets add a custom button:
 
 This works by prompting the LLM to let it know it can use buttons by replying like this:
 \`\`\`plain
-【{type:"buttons",buttons:[{text:"Star ⭐"}, {text:"Confetti 🎉"}]}】
+【{type:"${HIDDEN_CHAR}buttons",buttons:[{text:"Star ⭐"}, {text:"Confetti 🎉"}]}】
 \`\`\`
 
 ^^^ llm-ui also has code blocks with syntax highlighting for over 100 languages with [Shiki](https://shiki.style/).