@llm-ui/csv: Added type option to distinguish between custom blocks (#…

…238)

.changeset/selfish-jars-mix.md

@@ -0,0 +1,5 @@
+---
+"@llm-ui/csv": minor
+---
+
+@llm-ui/csv: Added type option to distinguish between custom blocks

packages/csv/src/block.tsx

@@ -3,13 +3,11 @@ import { csvBlockLookBack } from "./lookback";
 import { findCompleteCsvBlock, findPartialCsvBlock } from "./matchers";
 import { CsvBlockOptions } from "./options";
 
-export const csvBlock = (
-  userOptions?: Partial<CsvBlockOptions>,
-): LLMOutputBlock => {
+export const csvBlock = (options: CsvBlockOptions): LLMOutputBlock => {
   return {
-    findCompleteMatch: findCompleteCsvBlock(userOptions),
-    findPartialMatch: findPartialCsvBlock(userOptions),
-    lookBack: csvBlockLookBack(userOptions),
+    findCompleteMatch: findCompleteCsvBlock(options),
+    findPartialMatch: findPartialCsvBlock(options),
+    lookBack: csvBlockLookBack(options),
     component: ({ blockMatch }) => (
       <div>
         <a href="https://llm-ui.com/docs/blocks/csv">

packages/csv/src/csvBlockExample.test.ts

@@ -5,7 +5,7 @@ import { CsvBlockOptions } from "./options";
 type TestCase = {
   name: string;
   example: string[];
-  options?: Partial<CsvBlockOptions>;
+  options: CsvBlockOptions;
   expected: string;
 };
 
@@ -14,24 +14,32 @@ describe("csvBlockExample", () => {
     {
       name: "single",
       example: ["abc"],
-      expected: "⦅abc⦆",
+      options: { type: "t" },
+      expected: "⦅t,abc⦆",
     },
     {
       name: "multiple",
       example: ["abc", "def"],
-      expected: "⦅abc,def⦆",
+      options: { type: "t" },
+      expected: "⦅t,abc,def⦆",
+    },
+    {
+      name: "custom type",
+      example: ["abc", "def"],
+      options: { type: "type", delimiter: ";" },
+      expected: "⦅type;abc;def⦆",
     },
     {
       name: "custom delimiter",
       example: ["abc", "def"],
-      options: { delimiter: ";" },
-      expected: "⦅abc;def⦆",
+      options: { type: "t", delimiter: ";" },
+      expected: "⦅t;abc;def⦆",
     },
     {
       name: "custom start and end chars",
       example: ["abc", "def"],
-      options: { startChar: "x", endChar: "y" },
-      expected: "xabc,defy",
+      options: { type: "t", startChar: "x", endChar: "y" },
+      expected: "xt,abc,defy",
     },
   ];
 

packages/csv/src/csvBlockExample.ts

@@ -2,8 +2,8 @@ import { CsvBlockOptions, getOptions } from "./options";
 
 export const csvBlockExample = (
   example: string[],
-  userOptions?: Partial<CsvBlockOptions>,
+  options: CsvBlockOptions,
 ): string => {
-  const { startChar, endChar, delimiter } = getOptions(userOptions);
-  return `${startChar}${example.join(delimiter)}${endChar}`;
+  const { startChar, endChar, delimiter, type } = getOptions(options);
+  return `${startChar}${[type, ...example].join(delimiter)}${endChar}`;
 };

packages/csv/src/csvBlockPrompt.test.ts

@@ -6,71 +6,70 @@ describe("csvBlockPrompt", () => {
     expect(
       csvBlockPrompt({
         name: "simple",
+        options: { type: "buttons" },
         examples: [["abc"]],
       }),
     ).toMatchInlineSnapshot(`
-      "You can respond with a simple component by wrapping a , separated string in ⦅⦆ tags.
+      "You can respond with a simple component using the following , delimited syntax: ⦅buttons,⦆
 
       Examples: 
-      ⦅abc⦆"
+      ⦅buttons,abc⦆"
     `);
   });
 
   it("complex", () => {
     expect(
       csvBlockPrompt({
         name: "complex",
-
+        options: { type: "buttons" },
         examples: [
           ["abc", "def"],
           ["ghi", "jkl"],
         ],
       }),
     ).toMatchInlineSnapshot(`
-      "You can respond with a complex component by wrapping a , separated string in ⦅⦆ tags.
+      "You can respond with a complex component using the following , delimited syntax: ⦅buttons,⦆
 
       Examples: 
-      ⦅abc,def⦆
-      ⦅ghi,jkl⦆"
+      ⦅buttons,abc,def⦆
+      ⦅buttons,ghi,jkl⦆"
     `);
   });
 
   it("custom delimiter", () => {
     expect(
       csvBlockPrompt({
         name: "complex",
-
+        options: { type: "buttons", delimiter: ";" },
         examples: [
           ["abc", "def"],
           ["ghi", "jkl"],
         ],
-        userOptions: { delimiter: ";" },
       }),
     ).toMatchInlineSnapshot(`
-      "You can respond with a complex component by wrapping a ; separated string in ⦅⦆ tags.
+      "You can respond with a complex component using the following ; delimited syntax: ⦅buttons;⦆
 
       Examples: 
-      ⦅abc;def⦆
-      ⦅ghi;jkl⦆"
+      ⦅buttons;abc;def⦆
+      ⦅buttons;ghi;jkl⦆"
     `);
   });
   it("custom start and end chars", () => {
     expect(
       csvBlockPrompt({
         name: "complex",
-
+        options: { type: "type", startChar: "x", endChar: "y" },
         examples: [
           ["abc", "def"],
           ["ghi", "jkl"],
         ],
-        userOptions: { startChar: "x", endChar: "y" },
       }),
     ).toMatchInlineSnapshot(`
-      "You can respond with a complex component by wrapping a , separated string in xy tags.
+      "You can respond with a complex component using the following , delimited syntax: xtype,y
 
       Examples: 
-      xabc,defy
-      xghi,jkly"
+      xtype,abc,defy
+      xtype,ghi,jkly"
     `);
   });
 });

packages/csv/src/csvBlockPrompt.ts

@@ -4,15 +4,15 @@ import { CsvBlockOptions, getOptions } from "./options";
 export const csvBlockPrompt = ({
   name,
   examples,
-  userOptions,
+  options,
 }: {
   name: string;
   examples: string[][];
-  userOptions?: Partial<CsvBlockOptions>;
+  options: CsvBlockOptions;
 }): string => {
-  const { startChar, endChar, delimiter } = getOptions(userOptions);
+  const { startChar, endChar, delimiter, type } = getOptions(options);
   const examplePrompts = examples.map((example) =>
-    csvBlockExample(example, userOptions),
+    csvBlockExample(example, options),
   );
-  return `You can respond with a ${name} component by wrapping a ${delimiter} separated string in ${startChar}${endChar} tags.\n\nExamples: \n${examplePrompts.join(`\n`)}`;
+  return `You can respond with a ${name} component using the following ${delimiter} delimited syntax: ${startChar}${type}${delimiter}${endChar}\n\nExamples: \n${examplePrompts.join(`\n`)}`;
 };