diff --git a/charm/src/iframe/static.ts b/charm/src/iframe/static.ts index 9b5817dcf..f8134b4f0 100644 --- a/charm/src/iframe/static.ts +++ b/charm/src/iframe/static.ts @@ -125,8 +125,27 @@ Create an interactive React component that fulfills the user's request. Focus on - **useReactiveCell is a React Hook** and must follow all React hook rules - It should only be used for persistent state and must draw from the provided schema - For any ephemeral state, use \`React.useState\` - - Only call useReactiveCell at the top level of your function components or custom hooks + - Only call useReactiveCell at the top level of your React function components or custom hooks - Do not call useReactiveCell inside loops, conditions, or nested functions + - Do not call useReactiveCell directly inside the onReady function - it can only be used inside React components + - The onReady function itself is not a React component and cannot use React hooks directly + - Example of correct usage: + \`\`\`jsx + function onReady(mount, sourceData, modules) { + // This is NOT a React component, so do NOT use hooks here! + + // Create a React component to use hooks properly: + function MyApp() { + // React hooks can be used here + const [data, setData] = useReactiveCell('myData', defaultValue); + return
{/* your JSX */}
; + } + + // Render the React component to the mount point + const root = ReactDOM.createRoot(mount); + root.render(); + } + \`\`\` diff --git a/jumble/integration/cache/llm-api-cache/3d0fbce7fd401830cddcbafc815811755891a538c1c3ad8401399a51f353d7c8.json b/jumble/integration/cache/llm-api-cache/3d0fbce7fd401830cddcbafc815811755891a538c1c3ad8401399a51f353d7c8.json new file mode 100644 index 000000000..3dabb45e8 --- /dev/null +++ b/jumble/integration/cache/llm-api-cache/3d0fbce7fd401830cddcbafc815811755891a538c1c3ad8401399a51f353d7c8.json @@ -0,0 +1,16 @@ +{ + "model": "anthropic:claude-3-7-sonnet-latest", + "system": "# React Component Builder\n\nCreate an interactive React component that fulfills the user's request. Focus on delivering a clean, useful implementation with appropriate features.\n\n\n**This task is part of a 2-Phase Process.**\n\n1. First phase (already completed):\n - Analyzed the user's request\n - Created a detailed specification\n - Generated a structured data schema\n\n2. Your job (second phase):\n - Create a reactive UI component based on the provided specification and schema\n - Implement the UI exactly according to the specification\n - Strictly adhere to the data schema provided\n\n\n\n- Define a title with `const title = 'Your App Name';`\n- Implement both `onLoad` and `onReady` functions\n- Use Tailwind CSS for styling with tasteful defaults\n- Do not write inline, use emoji for icons\n- Carefully avoid infinite loops and recursion that may cause performance issues\n\n\n\n- React and ReactDOM are pre-imported - don't import them again\n- All React hooks must be namespaced (e.g., `React.useState`, `React.useEffect`)\n- Follow React hooks rules - never nest or conditionally call hooks\n- For form handling, use `onClick` handlers instead of `onSubmit`\n\n\n\n- **useReactiveCell(keyPath: string[])** - Persistent data storage with reactive updates\n- **generateText({ system, messages })** - Generate text via Large Language Model\n- **generateObject({ system, messages })** - Generate JSON object via Large Language Model\n- **readWebpage(url)** - Fetch and parse external web content\n- **generateImage(prompt)** - Create AI-generated images\n\n \n ## Important Note About useReactiveCell(keyPath: string[])\n - **useReactiveCell is a React Hook** and must follow all React hook rules\n - It should only be used for persistent state and must draw from the provided schema\n - For any ephemeral state, use `React.useState`\n - Only call useReactiveCell at the top level of your React function components or custom hooks\n - Do not call useReactiveCell inside loops, conditions, or nested functions\n - Do not call useReactiveCell directly inside the onReady function - it can only be used inside React components\n - The onReady function itself is not a React component and cannot use React hooks directly\n - Example of correct usage:\n ```jsx\n function onReady(mount, sourceData, modules) {\n // This is NOT a React component, so do NOT use hooks here!\n \n // Create a React component to use hooks properly:\n function MyApp() {\n // React hooks can be used here\n const [data, setData] = useReactiveCell('myData', defaultValue);\n return
{/* your JSX */}
;\n }\n \n // Render the React component to the mount point\n const root = ReactDOM.createRoot(mount);\n root.render();\n }\n ```\n \n\n\n\n- Request additional libraries in `onLoad` by returning an array of module names\n- Available libraries:\n - imports : [object Object]\n- Only use the explicitly provided libraries\n\n\n\n\n- Do not use browser dialog functions (`prompt()`, `alert()`, `confirm()`)\n- Avoid any methods that could compromise security or user experience\n\n\n\n\n{\n \"type\": \"object\",\n \"properties\": {\n \"simplevalue2\": {\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n }\n }\n },\n \"displayData\": {\n \"type\": \"object\",\n \"title\": \"Display Data\",\n \"description\": \"The data being displayed from simpleValue2\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"title\": \"Values\",\n \"description\": \"The string values from simpleValue2\",\n \"items\": {\n \"type\": \"string\"\n },\n \"default\": []\n },\n \"lastUpdated\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Last Updated\",\n \"description\": \"When the display was last refreshed\"\n }\n },\n \"required\": [\n \"values\"\n ]\n },\n \"displaySettings\": {\n \"type\": \"object\",\n \"title\": \"Display Settings\",\n \"description\": \"Configuration for how the data is displayed\",\n \"properties\": {\n \"showTimestamp\": {\n \"type\": \"boolean\",\n \"title\": \"Show Timestamp\",\n \"description\": \"Whether to show when the data was last updated\",\n \"default\": true\n },\n \"refreshInterval\": {\n \"type\": \"integer\",\n \"title\": \"Refresh Interval\",\n \"description\": \"How often to refresh the display (in seconds)\",\n \"default\": 30\n }\n }\n }\n },\n \"title\": \"SimpleValue2 Viewer\",\n \"description\": \"A component to display the current values stored in the simpleValue2 charm.\"\n}\n\n\n\n# SDK Usage Guide\n\n\n## 1. `useReactiveCell` Hook\n\nThe `useReactiveCell` hook binds to a reactive cell given a key path and returns a tuple `[doc, setDoc]`:\n\nAny keys from the view-model-schema are valid for useReactiveCell, any other keys will fail. Provide a default as the second argument, **do not set an initial value explicitly**.\n\nFor this schema:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"counter\": {\n \"type\": \"number\",\n },\n \"title\": {\n \"type\": \"string\",\n \"default\": \"My Counter App\"\n }\n }\n}\n```\n\n```jsx\nfunction CounterComponent() {\n // Correct: useReactiveCell called at top level of component\n const [counter, setCounter] = useReactiveCell(\"counter\");\n const [maxValue, setMaxValue] = useReactiveCell(['settings', 'maxValue']);\n\n const onIncrement = useCallback(() => {\n // writing to the cell automatically triggers a re-render\n setCounter(counter + 1);\n }, [counter]);\n\n return (\n \n );\n}\n```\n\n\n\nSeveral APIs exist for generating text, JSON or image urls.\n\n\n`generateText({ system, messages}): Promise`\n\n```jsx\nasync function fetchLLMResponse() {\n const result = await generateText({\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke']\n })\n console.log('LLM responded:', result);\n}\n```\n\n\n\n\n`window.generateObject({ system, messages }): Promise`\n\nYou must give the exact schema of the response in the prompt.\n\nFor example: \"Generate a traditional Vietnamese recipe in JSON format, with the\nfollowing properties: name (string), ingredients (array of strings),\ninstructions (array of strings)\"\n\n`generateObject` returns a parsed object already, or `undefined`. Be defensive working with the response, the LLM may make mistakes.\n\n\n```jsx\nconst promptPayload = ;\nconst result = await generateObject({\n system: 'Translate all the messages to emojis, reply in JSON with the following properties: an array of objects, each with original_text (string), emoji_translation (string)',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke'],\n});\nconsole.log('JSON response from llm:', result);\n\n// [\n// {\n// \"original_text\": \"Hi\",\n// \"emoji_translation\": \"👋\"\n// },\n// {\n// \"original_text\": \"How can I help you today?\",\n// \"emoji_translation\": \"🤔❓🙋‍♂️📅\"\n// },\n// {\n// \"original_text\": \"tell me a joke\",\n// \"emoji_translation\": \"🗣️👉😂\"\n// }\n// ]\n```\n\n\n\nNOTE: Language model requests are globally cached based on your prompt.\nThis means that identical requests will return the same result. If your llm use\nrequires unique results on every request, make sure to introduce a cache-breaking\nstring such as a timestamp or incrementing number/id.\n\n```jsx\n// To avoid the cache we'll use a cache-busting string.\nconst cacheBreaker = Date.now();\n\nconst result = await generateObject({\n system: \"You are a professional chef specializing in Mexican cuisine. Generate a detailed, authentic Mexican recipe in JSON format with the following properties: title (string), ingredients (array of strings), instructions (array of strings), prepTime (integer in minutes), cookTime (integer in minutes)\",\n messages: [\"give me something spicy!\" + \" \" + cacheBreaker],\n});\nconsole.log('JSON response from llm:', result);\n\n// {\n// \"title\": \"Camarones a la Diabla (Devil Shrimp)\",\n// \"ingredients\": [\n// \"1.5 lbs Large Shrimp, peeled and deveined\",\n// \"4 tbsp Olive Oil\",\n// \"1 medium White Onion, finely chopped\",\n// \"4 cloves Garlic, minced\",\n// \"2-3 Habanero Peppers, finely chopped (adjust to your spice preference, remove seeds for less heat)\",\n// \"1 (28 oz) can Crushed Tomatoes\",\n// \"1/2 cup Chicken Broth\",\n// \"2 tbsp Tomato Paste\",\n// \"1 tbsp Apple Cider Vinegar\",\n// \"1 tbsp Dried Oregano\",\n// \"1 tsp Cumin\",\n// \"1/2 tsp Smoked Paprika\",\n// \"1/4 tsp Ground Cloves\",\n// \"Salt and Black Pepper to taste\",\n// \"Fresh Cilantro, chopped, for garnish\",\n// \"Lime wedges, for serving\"\n// ],\n// \"instructions\": [\n// \"In a large bowl, toss the shrimp with salt and pepper.\",\n// \"Heat the olive oil in a large skillet or Dutch oven over medium-high heat.\",\n// \"Add the onion and cook until softened, about 5 minutes.\",\n// \"Add the garlic and habanero peppers and cook for 1 minute more, until fragrant.\",\n// \"Stir in the crushed tomatoes, chicken broth, tomato paste, apple cider vinegar, oregano, cumin, smoked paprika, and cloves.\",\n// \"Bring the sauce to a simmer and cook for 15 minutes, stirring occasionally, until slightly thickened.\",\n// \"Add the shrimp to the sauce and cook for 3-5 minutes, or until the shrimp are pink and cooked through.\",\n// \"Taste and adjust seasoning with salt and pepper as needed.\",\n// \"Garnish with fresh cilantro and serve immediately with lime wedges. Serve with rice or tortillas.\"\n// ],\n// \"prepTime\": 20,\n// \"cookTime\": 30\n// }\n```\n\n\n\n\n\n\n\nSynchronous, generates a URL that will load the image.\n\n```jsx\nfunction ImageComponent() {\n return \"Generated;\n}\n```\n\n\n\n\n\n`readWebpage(url: string): Promise` Returns markdown format.\n\n```jsx\nasync function fetchFromUrl() {\n const url = 'https://twopm.studio';\n const result = await readWebpage(url);\n console.log('Markdown:', result.content);\n}\n```\n\n\n\nAll generated code must follow this pattern:\n\n```javascript\n// Import from modern ESM libraries:\n// - react\n// - react-dom\n// - react-dom/client\n// - d3\n// - moment\n// - marked\n// - @react-spring/web\n// - @use-gesture/react\n// - uuid\n// - tone\nfunction onLoad() {\n return ['@react-spring/web']; // Request the modules you need\n}\n\nconst title = 'My ESM App';\nfunction ImageComponent({ url }) {\n return \"Generated;\n}\n\nfunction MyComponent({ label, description }) {\n return (\n
\n

{label}

\n

{description}

\n \n
\n );\n}\n\nfunction TodoItem({ todo, onToggle, onDelete }) {\n return (\n
\n \n \n {todo.text}\n \n \n Delete\n \n
\n );\n}\n\nfunction TodoList({ todo, setTodos}) {\n const [newTodo, setNewTodo] = React.useState('');\n\n const addTodo = () => {\n if (newTodo.trim() === '') return;\n\n const newTodoItem = {\n id: Date.now(),\n text: newTodo,\n completed: false\n };\n\n setTodos([...todos, newTodoItem]);\n setNewTodo('');\n };\n\n const toggleTodo = (id) => {\n setTodos(todos.map(todo =>\n todo.id === id ? { ...todo, completed: !todo.completed } : todo\n ));\n };\n\n const deleteTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n
\n

Todo List

\n\n
\n setNewTodo(e.target.value)}\n placeholder=\"Add a new todo\"\n className=\"flex-grow p-2 border rounded-l\"\n />\n \n Add\n \n
\n\n
\n {todos.length > 0 ? (\n todos.map(todo => (\n toggleTodo(todo.id)}\n onDelete={() => deleteTodo(todo.id)}\n />\n ))\n ) : (\n

No todos yet!

\n )}\n
\n
\n );\n}\n\n// Main application code with modules passed as third parameter\nfunction onReady(mount, sourceData, libs) {\n const { useState, useEffect } = React; // React is available globally\n const { useSpring, animated } = libs['@react-spring/web']; // Access imported module\n\n function MyApp() {\n const [count, setCount] = useReactiveCell('count');\n const [todos, setTodos] = useReactiveCell('todos');\n\n const props = useSpring({\n from: { opacity: 0 },\n to: { opacity: 1 }\n });\n\n return (\n
\n \n setCount(count + 1)}\n >\n Clicks: {count}\n \n \n \n
\n );\n }\n\n // Use the client API for React 18\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```\n\n", + "messages": [ + { + "role": "user", + "content": "The user asked you to create the source code with the following specification:\n```\n\nshow the data from `simpleValue2`\n\nShow the data from the `simpleValue2` charm, displaying its current value and any associated metadata.\n\n1. Access the simpleValue2 data from the existing schema\n2. Create a display component that renders the values array as a list\n3. Implement auto-refresh functionality to keep the display in sync with data changes\nThe SimpleValue2 Viewer will display all string values currently stored in the simpleValue2.values array. It will present the values in a clean, readable list format. The viewer will automatically update when the underlying data changes.\n```" + }, + { + "role": "assistant", + "content": "\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nconst title = 'SimpleValue2 Viewer';\n\nfunction ValuesList({ values }) {\n return (\n
\n

Values

\n {values && values.length > 0 ? (\n
    \n {values.map((value, index) => (\n
  • \n {value}\n
    • \n ))}\n
\n ) : (\n

No values available

\n )}\n
\n );\n}\n\nfunction LastUpdatedInfo({ timestamp, showTimestamp }) {\n if (!showTimestamp || !timestamp) return null;\n \n const formattedDate = new Date(timestamp).toLocaleString();\n \n return (\n
\n Last updated: {formattedDate}\n
\n );\n}\n\nfunction RefreshButton({ onRefresh, isLoading }) {\n return (\n \n {isLoading ? 'Refreshing...' : '🔄 Refresh Now'}\n \n );\n}\n\nfunction SettingsPanel({ showTimestamp, setShowTimestamp, refreshInterval, setRefreshInterval }) {\n return (\n
\n

Display Settings

\n \n
\n setShowTimestamp(e.target.checked)}\n className=\"mr-2 h-4 w-4\"\n />\n \n
\n \n
\n \n setRefreshInterval(Math.max(5, parseInt(e.target.value) || 30))}\n min=\"5\"\n className=\"border border-gray-300 rounded px-3 py-2 w-32\"\n />\n
\n
\n );\n}\n\nfunction SimpleValue2Viewer() {\n // Access the data from simpleValue2\n const [simpleValue2Data, setSimpleValue2Data] = useReactiveCell(['simplevalue2', 'values'], []);\n \n // Access display data\n const [displayData, setDisplayData] = useReactiveCell(['displayData', 'values'], []);\n const [lastUpdated, setLastUpdated] = useReactiveCell(['displayData', 'lastUpdated'], '');\n \n // Access display settings\n const [showTimestamp, setShowTimestamp] = useReactiveCell(['displaySettings', 'showTimestamp'], true);\n const [refreshInterval, setRefreshInterval] = useReactiveCell(['displaySettings', 'refreshInterval'], 30);\n \n // Local state for UI\n const [isRefreshing, setIsRefreshing] = React.useState(false);\n \n // Function to update the display data\n const refreshData = React.useCallback(() => {\n setIsRefreshing(true);\n \n // Update the display data with the current simpleValue2 values\n setDisplayData(simpleValue2Data || []);\n setLastUpdated(new Date().toISOString());\n \n setTimeout(() => {\n setIsRefreshing(false);\n }, 500);\n }, [simpleValue2Data, setDisplayData, setLastUpdated]);\n \n // Set up auto-refresh\n React.useEffect(() => {\n refreshData(); // Initial refresh\n \n const intervalId = setInterval(() => {\n refreshData();\n }, refreshInterval * 1000);\n \n return () => clearInterval(intervalId);\n }, [refreshData, refreshInterval]);\n \n // Watch for changes in simpleValue2Data and refresh when it changes\n React.useEffect(() => {\n refreshData();\n }, [simpleValue2Data, refreshData]);\n \n return (\n
\n
\n

SimpleValue2 Viewer

\n \n
\n \n
\n \n \n
\n \n \n
\n );\n}\n\nfunction onReady(mount, sourceData) {\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```" + } + ], + "stop": "\n```", + "maxTokens": 64000 +} \ No newline at end of file diff --git a/jumble/integration/cache/llm-api-cache/b0a1a973797ea0e477e6bf4d1cc83cf9ec59127763bea39a7428ec03e7ca2313.json b/jumble/integration/cache/llm-api-cache/b0a1a973797ea0e477e6bf4d1cc83cf9ec59127763bea39a7428ec03e7ca2313.json index 4128bb616..05195068b 100644 --- a/jumble/integration/cache/llm-api-cache/b0a1a973797ea0e477e6bf4d1cc83cf9ec59127763bea39a7428ec03e7ca2313.json +++ b/jumble/integration/cache/llm-api-cache/b0a1a973797ea0e477e6bf4d1cc83cf9ec59127763bea39a7428ec03e7ca2313.json @@ -9,7 +9,7 @@ }, { "role": "assistant", - "content": "\nLet's analyze what we have:\n\n1. The user wants to display data from a `simpleValue2` charm.\n2. The existing schema shows that `simpleValue2` contains an object with a property called `values`, which is an array of strings.\n\nThe user wants a simple way to view this data. I'll create a simple viewer component that displays the current values in the array.\n\nFor the schema, I'll keep it minimal since we're just displaying existing data. The result schema will represent what the viewer component will display - the values from the array and potentially some metadata about the display.\n\n\n\nSimpleValue2 Viewer\n\n\n\nA component to display the current values stored in the simpleValue2 charm.\n\n\n\nThe viewer will display all string values currently stored in the simpleValue2.values array. Each value will be presented in a readable format with appropriate styling. The component will update automatically when the underlying data changes.\n\n\n\n1. Create a viewer component that reads from the existing simpleValue2.values array\n2. Implement the display logic to render each string value in the array\n3. Add basic styling and empty state handling when the array is empty\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"SimpleValue2 Viewer\",\n \"description\": \"Display configuration for the SimpleValue2 values\",\n \"properties\": {\n \"displayMode\": {\n \"type\": \"string\",\n \"title\": \"Display Mode\",\n \"description\": \"How to display the values\",\n \"default\": \"list\",\n \"enum\": [\"list\", \"cards\", \"inline\"]\n },\n \"showCount\": {\n \"type\": \"boolean\",\n \"title\": \"Show Count\",\n \"description\": \"Whether to show the total count of values\",\n \"default\": true\n },\n \"emptyMessage\": {\n \"type\": \"string\",\n \"title\": \"Empty Message\",\n \"description\": \"Message to display when there are no values\",\n \"default\": \"No values to display\"\n },\n \"title\": {\n \"type\": \"string\",\n \"title\": \"Viewer Title\",\n \"description\": \"Title to display above the values\",\n \"default\": \"SimpleValue2 Data\"\n }\n },\n \"required\": [\"displayMode\", \"showCount\"]\n}\n```\n" + "content": "\nLet's analyze what we have:\n\n1. The user wants to display data from a `simpleValue2` charm.\n2. The existing schema shows that `simpleValue2` contains an object with a property called `values`, which is an array of strings.\n\nThe user wants a simple way to view this data. I'll create a simple viewer component that displays the current values in the array.\n\nFor the schema, I'll keep it minimal since we're just displaying existing data. The result schema will represent what the viewer component will display - the values from the array and potentially some metadata about the display.\n\n\n\nSimpleValue2 Viewer\n\n\n\nA component to display the current values stored in the simpleValue2 charm.\n\n\n\nThe SimpleValue2 Viewer will display all string values currently stored in the simpleValue2.values array. It will present the values in a clean, readable list format. The viewer will automatically update when the underlying data changes.\n\n\n\n1. Access the simpleValue2 data from the existing schema\n2. Create a display component that renders the values array as a list\n3. Implement auto-refresh functionality to keep the display in sync with data changes\n\n\n\n{\n \"type\": \"object\",\n \"title\": \"SimpleValue2 Viewer\",\n \"description\": \"Display configuration for simpleValue2 data\",\n \"properties\": {\n \"displayData\": {\n \"type\": \"object\",\n \"title\": \"Display Data\",\n \"description\": \"The data being displayed from simpleValue2\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"title\": \"Values\",\n \"description\": \"The string values from simpleValue2\",\n \"items\": {\n \"type\": \"string\"\n },\n \"default\": []\n },\n \"lastUpdated\": {\n \"type\": \"string\",\n \"format\": \"date-time\",\n \"title\": \"Last Updated\",\n \"description\": \"When the display was last refreshed\"\n }\n },\n \"required\": [\"values\"]\n },\n \"displaySettings\": {\n \"type\": \"object\",\n \"title\": \"Display Settings\",\n \"description\": \"Configuration for how the data is displayed\",\n \"properties\": {\n \"showTimestamp\": {\n \"type\": \"boolean\",\n \"title\": \"Show Timestamp\",\n \"description\": \"Whether to show when the data was last updated\",\n \"default\": true\n },\n \"refreshInterval\": {\n \"type\": \"integer\",\n \"title\": \"Refresh Interval\",\n \"description\": \"How often to refresh the display (in seconds)\",\n \"default\": 30\n }\n }\n }\n },\n \"required\": [\"displayData\"]\n}\n" } ], "maxTokens": 64000 diff --git a/jumble/integration/cache/llm-api-cache/fa94cc4941bcd6408c15eee3a7fd531b842043b4a4e21b3296f0a93f1b69e153.json b/jumble/integration/cache/llm-api-cache/fa94cc4941bcd6408c15eee3a7fd531b842043b4a4e21b3296f0a93f1b69e153.json deleted file mode 100644 index 9b9f096ee..000000000 --- a/jumble/integration/cache/llm-api-cache/fa94cc4941bcd6408c15eee3a7fd531b842043b4a4e21b3296f0a93f1b69e153.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "model": "anthropic:claude-3-7-sonnet-latest", - "system": "# React Component Builder\n\nCreate an interactive React component that fulfills the user's request. Focus on delivering a clean, useful implementation with appropriate features.\n\n\n**This task is part of a 2-Phase Process.**\n\n1. First phase (already completed):\n - Analyzed the user's request\n - Created a detailed specification\n - Generated a structured data schema\n\n2. Your job (second phase):\n - Create a reactive UI component based on the provided specification and schema\n - Implement the UI exactly according to the specification\n - Strictly adhere to the data schema provided\n\n\n\n- Define a title with `const title = 'Your App Name';`\n- Implement both `onLoad` and `onReady` functions\n- Use Tailwind CSS for styling with tasteful defaults\n- Do not write inline, use emoji for icons\n- Carefully avoid infinite loops and recursion that may cause performance issues\n\n\n\n- React and ReactDOM are pre-imported - don't import them again\n- All React hooks must be namespaced (e.g., `React.useState`, `React.useEffect`)\n- Follow React hooks rules - never nest or conditionally call hooks\n- For form handling, use `onClick` handlers instead of `onSubmit`\n\n\n\n- **useReactiveCell(keyPath: string[])** - Persistent data storage with reactive updates\n- **generateText({ system, messages })** - Generate text via Large Language Model\n- **generateObject({ system, messages })** - Generate JSON object via Large Language Model\n- **readWebpage(url)** - Fetch and parse external web content\n- **generateImage(prompt)** - Create AI-generated images\n\n \n ## Important Note About useReactiveCell(keyPath: string[])\n - **useReactiveCell is a React Hook** and must follow all React hook rules\n - It should only be used for persistent state and must draw from the provided schema\n - For any ephemeral state, use `React.useState`\n - Only call useReactiveCell at the top level of your function components or custom hooks\n - Do not call useReactiveCell inside loops, conditions, or nested functions\n \n\n\n\n- Request additional libraries in `onLoad` by returning an array of module names\n- Available libraries:\n - imports : [object Object]\n- Only use the explicitly provided libraries\n\n\n\n\n- Do not use browser dialog functions (`prompt()`, `alert()`, `confirm()`)\n- Avoid any methods that could compromise security or user experience\n\n\n\n\n{\n \"type\": \"object\",\n \"properties\": {\n \"simplevalue2\": {\n \"type\": \"object\",\n \"properties\": {\n \"values\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n }\n }\n }\n },\n \"title\": \"SimpleValue2 Viewer\",\n \"description\": \"A component to display the current values stored in the simpleValue2 charm.\"\n}\n\n\n\n# SDK Usage Guide\n\n\n## 1. `useReactiveCell` Hook\n\nThe `useReactiveCell` hook binds to a reactive cell given a key path and returns a tuple `[doc, setDoc]`:\n\nAny keys from the view-model-schema are valid for useReactiveCell, any other keys will fail. Provide a default as the second argument, **do not set an initial value explicitly**.\n\nFor this schema:\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {\n \"counter\": {\n \"type\": \"number\",\n },\n \"title\": {\n \"type\": \"string\",\n \"default\": \"My Counter App\"\n }\n }\n}\n```\n\n```jsx\nfunction CounterComponent() {\n // Correct: useReactiveCell called at top level of component\n const [counter, setCounter] = useReactiveCell(\"counter\");\n const [maxValue, setMaxValue] = useReactiveCell(['settings', 'maxValue']);\n\n const onIncrement = useCallback(() => {\n // writing to the cell automatically triggers a re-render\n setCounter(counter + 1);\n }, [counter]);\n\n return (\n \n );\n}\n```\n\n\n\nSeveral APIs exist for generating text, JSON or image urls.\n\n\n`generateText({ system, messages}): Promise`\n\n```jsx\nasync function fetchLLMResponse() {\n const result = await generateText({\n system: 'Translate all the messages to emojis, reply in JSON.',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke']\n })\n console.log('LLM responded:', result);\n}\n```\n\n\n\n\n`window.generateObject({ system, messages }): Promise`\n\nYou must give the exact schema of the response in the prompt.\n\nFor example: \"Generate a traditional Vietnamese recipe in JSON format, with the\nfollowing properties: name (string), ingredients (array of strings),\ninstructions (array of strings)\"\n\n`generateObject` returns a parsed object already, or `undefined`. Be defensive working with the response, the LLM may make mistakes.\n\n\n```jsx\nconst promptPayload = ;\nconst result = await generateObject({\n system: 'Translate all the messages to emojis, reply in JSON with the following properties: an array of objects, each with original_text (string), emoji_translation (string)',\n messages: ['Hi', 'How can I help you today?', 'tell me a joke'],\n});\nconsole.log('JSON response from llm:', result);\n\n// [\n// {\n// \"original_text\": \"Hi\",\n// \"emoji_translation\": \"👋\"\n// },\n// {\n// \"original_text\": \"How can I help you today?\",\n// \"emoji_translation\": \"🤔❓🙋‍♂️📅\"\n// },\n// {\n// \"original_text\": \"tell me a joke\",\n// \"emoji_translation\": \"🗣️👉😂\"\n// }\n// ]\n```\n\n\n\nNOTE: Language model requests are globally cached based on your prompt.\nThis means that identical requests will return the same result. If your llm use\nrequires unique results on every request, make sure to introduce a cache-breaking\nstring such as a timestamp or incrementing number/id.\n\n```jsx\n// To avoid the cache we'll use a cache-busting string.\nconst cacheBreaker = Date.now();\n\nconst result = await generateObject({\n system: \"You are a professional chef specializing in Mexican cuisine. Generate a detailed, authentic Mexican recipe in JSON format with the following properties: title (string), ingredients (array of strings), instructions (array of strings), prepTime (integer in minutes), cookTime (integer in minutes)\",\n messages: [\"give me something spicy!\" + \" \" + cacheBreaker],\n});\nconsole.log('JSON response from llm:', result);\n\n// {\n// \"title\": \"Camarones a la Diabla (Devil Shrimp)\",\n// \"ingredients\": [\n// \"1.5 lbs Large Shrimp, peeled and deveined\",\n// \"4 tbsp Olive Oil\",\n// \"1 medium White Onion, finely chopped\",\n// \"4 cloves Garlic, minced\",\n// \"2-3 Habanero Peppers, finely chopped (adjust to your spice preference, remove seeds for less heat)\",\n// \"1 (28 oz) can Crushed Tomatoes\",\n// \"1/2 cup Chicken Broth\",\n// \"2 tbsp Tomato Paste\",\n// \"1 tbsp Apple Cider Vinegar\",\n// \"1 tbsp Dried Oregano\",\n// \"1 tsp Cumin\",\n// \"1/2 tsp Smoked Paprika\",\n// \"1/4 tsp Ground Cloves\",\n// \"Salt and Black Pepper to taste\",\n// \"Fresh Cilantro, chopped, for garnish\",\n// \"Lime wedges, for serving\"\n// ],\n// \"instructions\": [\n// \"In a large bowl, toss the shrimp with salt and pepper.\",\n// \"Heat the olive oil in a large skillet or Dutch oven over medium-high heat.\",\n// \"Add the onion and cook until softened, about 5 minutes.\",\n// \"Add the garlic and habanero peppers and cook for 1 minute more, until fragrant.\",\n// \"Stir in the crushed tomatoes, chicken broth, tomato paste, apple cider vinegar, oregano, cumin, smoked paprika, and cloves.\",\n// \"Bring the sauce to a simmer and cook for 15 minutes, stirring occasionally, until slightly thickened.\",\n// \"Add the shrimp to the sauce and cook for 3-5 minutes, or until the shrimp are pink and cooked through.\",\n// \"Taste and adjust seasoning with salt and pepper as needed.\",\n// \"Garnish with fresh cilantro and serve immediately with lime wedges. Serve with rice or tortillas.\"\n// ],\n// \"prepTime\": 20,\n// \"cookTime\": 30\n// }\n```\n\n\n\n\n\n\n\nSynchronous, generates a URL that will load the image.\n\n```jsx\nfunction ImageComponent() {\n return \"Generated;\n}\n```\n\n\n\n\n\n`readWebpage(url: string): Promise` Returns markdown format.\n\n```jsx\nasync function fetchFromUrl() {\n const url = 'https://twopm.studio';\n const result = await readWebpage(url);\n console.log('Markdown:', result.content);\n}\n```\n\n\n\nAll generated code must follow this pattern:\n\n```javascript\n// Import from modern ESM libraries:\n// - react\n// - react-dom\n// - react-dom/client\n// - d3\n// - moment\n// - marked\n// - @react-spring/web\n// - @use-gesture/react\n// - uuid\n// - tone\nfunction onLoad() {\n return ['@react-spring/web']; // Request the modules you need\n}\n\nconst title = 'My ESM App';\nfunction ImageComponent({ url }) {\n return \"Generated;\n}\n\nfunction MyComponent({ label, description }) {\n return (\n
\n

{label}

\n

{description}

\n \n
\n );\n}\n\nfunction TodoItem({ todo, onToggle, onDelete }) {\n return (\n
\n \n \n {todo.text}\n \n \n Delete\n \n
\n );\n}\n\nfunction TodoList({ todo, setTodos}) {\n const [newTodo, setNewTodo] = React.useState('');\n\n const addTodo = () => {\n if (newTodo.trim() === '') return;\n\n const newTodoItem = {\n id: Date.now(),\n text: newTodo,\n completed: false\n };\n\n setTodos([...todos, newTodoItem]);\n setNewTodo('');\n };\n\n const toggleTodo = (id) => {\n setTodos(todos.map(todo =>\n todo.id === id ? { ...todo, completed: !todo.completed } : todo\n ));\n };\n\n const deleteTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n
\n

Todo List

\n\n
\n setNewTodo(e.target.value)}\n placeholder=\"Add a new todo\"\n className=\"flex-grow p-2 border rounded-l\"\n />\n \n Add\n \n
\n\n
\n {todos.length > 0 ? (\n todos.map(todo => (\n toggleTodo(todo.id)}\n onDelete={() => deleteTodo(todo.id)}\n />\n ))\n ) : (\n

No todos yet!

\n )}\n
\n
\n );\n}\n\n// Main application code with modules passed as third parameter\nfunction onReady(mount, sourceData, libs) {\n const { useState, useEffect } = React; // React is available globally\n const { useSpring, animated } = libs['@react-spring/web']; // Access imported module\n\n function MyApp() {\n const [count, setCount] = useReactiveCell('count');\n const [todos, setTodos] = useReactiveCell('todos');\n\n const props = useSpring({\n from: { opacity: 0 },\n to: { opacity: 1 }\n });\n\n return (\n
\n \n setCount(count + 1)}\n >\n Clicks: {count}\n \n \n \n
\n );\n }\n\n // Use the client API for React 18\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```\n\n", - "messages": [ - { - "role": "user", - "content": "The user asked you to create the source code with the following specification:\n```\n\nshow the data from `simpleValue2`\n\nShow the data from the `simpleValue2` charm, displaying its current value and any associated metadata.\n\n1. Create a viewer component that reads from the existing simpleValue2.values array\n2. Implement the display logic to render each string value in the array\n3. Add basic styling and empty state handling when the array is empty\nThe viewer will display all string values currently stored in the simpleValue2.values array. Each value will be presented in a readable format with appropriate styling. The component will update automatically when the underlying data changes.\n```" - }, - { - "role": "assistant", - "content": "\nfunction onLoad() {\n return []; // No additional libraries needed\n}\n\nconst title = 'SimpleValue2 Viewer';\n\nfunction ValueItem({ value, index }) {\n return (\n
\n
\n #{index + 1}\n {value}\n
\n
\n );\n}\n\nfunction EmptyState() {\n return (\n
\n 📋\n

No values found

\n

The simpleValue2.values array is currently empty.

\n
\n );\n}\n\nfunction SimpleValue2Viewer() {\n // Access the values array from the simpleValue2 object\n const [values, setValues] = useReactiveCell(['simplevalue2', 'values'], []);\n\n return (\n
\n
\n

{title}

\n

\n Displaying current values from simpleValue2\n

\n
\n \n
\n
\n

Values

\n \n {values.length} items\n \n
\n \n {values.length > 0 ? (\n
\n {values.map((value, index) => (\n \n ))}\n
\n ) : (\n \n )}\n
\n
\n );\n}\n\nfunction onReady(mount, sourceData) {\n const root = ReactDOM.createRoot(mount);\n root.render();\n}\n```" - } - ], - "stop": "\n```", - "maxTokens": 64000 -} \ No newline at end of file