Fix spawnPattern data handling [CT-910] (commontoolsinc#1796)

* Fix `spawnPattern` data handling

* Clean up Charm types

Author: bfollington

packages/patterns/chatbot-note.tsx

@@ -26,10 +26,10 @@ import {
 
 import Chat from "./chatbot.tsx";
 
-type Charm = {
+export type MentionableCharm = {
   [NAME]: string;
   content?: string;
-  mentioned?: Charm[];
+  mentioned?: MentionableCharm[];
 };
 
 type NoteResult = {
@@ -38,13 +38,13 @@ type NoteResult = {
 
 export type NoteInput = {
   content: Default<string, "">;
-  allCharms: Cell<Charm[]>;
+  allCharms: Cell<MentionableCharm[]>;
 };
 
 const handleCharmLinkClick = handler<
   {
     detail: {
-      charm: Cell<Charm>;
+      charm: Cell<MentionableCharm>;
     };
   },
   Record<string, never>
@@ -72,7 +72,7 @@ export const Note = recipe<NoteInput>(
 );
 
 const handleCharmLinkClicked = handler(
-  (_: any, { charm }: { charm: Cell<Charm> }) => {
+  (_: any, { charm }: { charm: Cell<MentionableCharm> }) => {
     return navigateTo(charm);
   },
 );
@@ -82,13 +82,13 @@ type LLMTestInput = {
   messages: Default<Array<BuiltInLLMMessage>, []>;
   expandChat: Default<boolean, false>;
   content: Default<string, "">;
-  allCharms: Cell<Charm[]>;
+  allCharms: Cell<MentionableCharm[]>;
 };
 
 type LLMTestResult = {
   messages: Default<Array<BuiltInLLMMessage>, []>;
-  mentioned: Default<Array<Charm>, []>;
-  backlinks: Default<Array<Charm>, []>;
+  mentioned: Default<Array<MentionableCharm>, []>;
+  backlinks: Default<Array<MentionableCharm>, []>;
   content: Default<string, "">;
 };
 
@@ -163,7 +163,7 @@ export default recipe<LLMTestInput, LLMTestResult>(
     const chat = Chat({ messages, tools });
     const { addMessage, cancelGeneration, pending } = chat;
 
-    const mentioned = cell<Charm[]>([]);
+    const mentioned = cell<MentionableCharm[]>([]);
 
     // Must use JSONSchema here, CTS doesn't work correctly. See CT-901
     const computeBacklinks = lift(
@@ -179,7 +179,7 @@ export default recipe<LLMTestInput, LLMTestResult>(
         items: { type: "object" },
       } as JSONSchema,
       ({ allCharms, content }) => {
-        const cs: Charm[] = allCharms.get();
+        const cs: MentionableCharm[] = allCharms.get();
         if (!cs) return [];
 
         const self = cs.find((c) => c.content === content.get());
@@ -194,7 +194,7 @@ export default recipe<LLMTestInput, LLMTestResult>(
       },
     );
 
-    const backlinks: OpaqueRef<Charm[]> = computeBacklinks({
+    const backlinks: OpaqueRef<MentionableCharm[]> = computeBacklinks({
       allCharms,
       content,
     });
@@ -230,7 +230,7 @@ export default recipe<LLMTestInput, LLMTestResult>(
               <details>
                 <summary>Mentioned Charms</summary>
                 <ct-vstack>
-                  {mentioned.map((charm: Charm) => (
+                  {mentioned.map((charm: MentionableCharm) => (
                     <ct-button onClick={handleCharmLinkClicked({ charm })}>
                       {charm[NAME]}
                     </ct-button>
@@ -240,7 +240,7 @@ export default recipe<LLMTestInput, LLMTestResult>(
               <details>
                 <summary>Backlinks</summary>
                 <ct-vstack>
-                  {backlinks.map((charm: Charm) => (
+                  {backlinks.map((charm: MentionableCharm) => (
                     <ct-button onClick={handleCharmLinkClicked({ charm })}>
                       {charm[NAME]}
                     </ct-button>

packages/patterns/default-app.tsx

@@ -7,6 +7,7 @@ import {
   handler,
   NAME,
   navigateTo,
+  OpaqueRef,
   recipe,
   str,
   UI,
@@ -16,8 +17,11 @@ import {
 import Chatbot from "./chatbot.tsx";
 import ChatbotTools from "./chatbot-tools.tsx";
 import ChatbotOutliner from "./chatbot-outliner.tsx";
-import ChatbotNote from "./chatbot-note.tsx";
-import Note from "./note.tsx";
+import {
+  default as ChatbotNote,
+  type MentionableCharm,
+} from "./chatbot-note.tsx";
+import { default as Note } from "./note.tsx";
 
 export type Charm = {
   [NAME]?: string;
@@ -61,11 +65,64 @@ const removeCharm = handler<
   }
 });
 
-const spawnPattern = (recipe: any, params: any) =>
-  handler<Record<string, never>, Record<string, never>>((event, state) => {
-    const charm = recipe(params);
-    return navigateTo(charm);
-  });
+const spawnChatbot = handler<
+  Record<string, never>,
+  Record<string, never>
+>((_, state) => {
+  return navigateTo(Chatbot({
+    messages: [],
+    tools: undefined,
+  }));
+});
+
+const spawnChatbotTools = handler<
+  Record<string, never>,
+  Record<string, never>
+>((_, state) => {
+  return navigateTo(ChatbotTools({
+    title: "Chatbot Tools",
+    messages: [],
+    list: [],
+  }));
+});
+
+const spawnChatbotOutliner = handler<
+  Record<string, never>,
+  { allCharms: Cell<Charm[]> }
+>((_, state) => {
+  return navigateTo(ChatbotOutliner({
+    title: "Chatbot Outliner",
+    expandChat: false,
+    messages: [],
+    outline: {
+      root: { body: "", children: [], attachments: [] },
+    },
+    allCharms: state.allCharms,
+  }));
+});
+
+const spawnChatbotNote = handler<
+  Record<string, never>,
+  { allCharms: Cell<MentionableCharm[]> }
+>((_, state) => {
+  return navigateTo(ChatbotNote({
+    title: "New Note",
+    content: "",
+    expandChat: false,
+    messages: [],
+    allCharms: state.allCharms,
+  }));
+});
+
+const spawnNote = handler<
+  Record<string, never>,
+  Record<string, never>
+>((_, state) => {
+  return navigateTo(Note({
+    title: "New Note",
+    content: "",
+  }));
+});
 
 export default recipe<CharmsListInput, CharmsListOutput>(
   "DefaultCharmList",
@@ -79,47 +136,32 @@ export default recipe<CharmsListInput, CharmsListOutput>(
             <ct-hstack gap="2" align="center">
               <h3>Quicklaunch:</h3>
               <ct-button
-                onClick={spawnPattern(Chatbot, {
-                  messages: [],
-                  tools: undefined,
-                })({})}
+                onClick={spawnChatbot({})}
               >
                 💬 Chatbot
               </ct-button>
               <ct-button
-                onClick={spawnPattern(ChatbotTools, {
-                  title: "Chatbot Tools",
-                  chat: [],
-                  list: [],
-                })({})}
+                onClick={spawnChatbotTools({})}
               >
                 🔧 Chatbot Tools
               </ct-button>
               <ct-button
-                onClick={spawnPattern(ChatbotOutliner, {
-                  outline: {
-                    root: { body: "", children: [], attachments: [] },
-                  },
-                  allCharms,
-                })({})}
+                onClick={spawnChatbotOutliner({ allCharms })}
               >
                 📝 Chatbot Outliner
               </ct-button>
               <ct-button
-                onClick={spawnPattern(ChatbotNote, {
-                  title: "New Note",
-                  content: "",
-                  allCharms,
-                })({})}
+                onClick={spawnChatbotNote({
+                  // slight disagreement between Charm types but they are compatible
+                  allCharms: allCharms as unknown as OpaqueRef<
+                    MentionableCharm[]
+                  >,
+                })}
               >
                 🤖 Chatbot Note
               </ct-button>
               <ct-button
-                onClick={spawnPattern(Note, {
-                  title: "New Note",
-                  content: "",
-                  allCharms,
-                })({})}
+                onClick={spawnNote({})}
               >
                 📄 Note
               </ct-button>