From d059e74ddf32ff7e9f4b8d84de5de3f7f3c52502 Mon Sep 17 00:00:00 2001
From: Richard Gill <richard@rgill.co.uk>
Date: Sun, 2 Jun 2024 16:33:00 +0000
Subject: [PATCH] www: Fix homepage demo glitch

---
 apps/www/src/components/examples/Example.tsx                  | 2 +-
 .../www/src/components/examples/{contants.ts => constants.ts} | 2 ++
 apps/www/src/components/examples/examples.ts                  | 4 ++--
 3 files changed, 5 insertions(+), 3 deletions(-)
 rename apps/www/src/components/examples/{contants.ts => constants.ts} (86%)

diff --git a/apps/www/src/components/examples/Example.tsx b/apps/www/src/components/examples/Example.tsx
index c398a85a..393a4a81 100644
--- a/apps/www/src/components/examples/Example.tsx
+++ b/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";
 
diff --git a/apps/www/src/components/examples/contants.ts b/apps/www/src/components/examples/constants.ts
similarity index 86%
rename from apps/www/src/components/examples/contants.ts
rename to apps/www/src/components/examples/constants.ts
index f8e57443..769f7f01 100644
--- a/apps/www/src/components/examples/contants.ts
+++ b/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 = "‎";
diff --git a/apps/www/src/components/examples/examples.ts b/apps/www/src/components/examples/examples.ts
index 3decd197..f16737ed 100644
--- a/apps/www/src/components/examples/examples.ts
+++ b/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/).