diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx
index 7bacdee14..a24f3192d 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx
@@ -244,7 +244,7 @@ const DocumentEditor = () => {
         }}
       />
     ),
-  });
+  }, [agentState?.document]);
 
   // Action to write the document.
   useCopilotAction({
@@ -278,7 +278,7 @@ const DocumentEditor = () => {
       }
       return <></>;
     },
-  });
+  }, [agentState?.document]);
 
   return (
     <div className="relative min-h-screen w-full">
diff --git a/typescript-sdk/apps/dojo/src/files.json b/typescript-sdk/apps/dojo/src/files.json
index 3065bb788..82760d039 100644
--- a/typescript-sdk/apps/dojo/src/files.json
+++ b/typescript-sdk/apps/dojo/src/files.json
@@ -106,7 +106,7 @@
   "pydantic-ai::predictive_state_updates": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  });\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  });\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
+      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  }, [agentState?.document]);\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  }, [agentState?.document]);\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -340,7 +340,7 @@
   "server-starter-all-features::predictive_state_updates": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  });\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  });\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
+      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  }, [agentState?.document]);\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  }, [agentState?.document]);\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -488,7 +488,7 @@
   "langgraph::predictive_state_updates": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  });\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  });\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
+      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  }, [agentState?.document]);\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  }, [agentState?.document]);\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -689,7 +689,7 @@
   "langgraph-fastapi::predictive_state_updates": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  });\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  });\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
+      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  }, [agentState?.document]);\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  }, [agentState?.document]);\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -889,7 +889,7 @@
   "langgraph-typescript::predictive_state_updates": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  });\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  });\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
+      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  }, [agentState?.document]);\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  }, [agentState?.document]);\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1259,7 +1259,7 @@
   "crewai::predictive_state_updates": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  });\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  });\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
+      "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\n\nimport MarkdownIt from \"markdown-it\";\nimport React from \"react\";\n\nimport { diffWords } from \"diff\";\nimport { useEditor, EditorContent } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat, CopilotSidebar } from \"@copilotkit/react-ui\";\nimport { useMobileView } from \"@/utils/use-mobile-view\";\nimport { useMobileChat } from \"@/utils/use-mobile-chat\";\n\nconst extensions = [StarterKit];\n\ninterface PredictiveStateUpdatesProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nexport default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {\n  const { integrationId } = React.use(params);\n  const { isMobile } = useMobileView();\n  const defaultChatHeight = 50\n  const {\n    isChatOpen,\n    setChatHeight,\n    setIsChatOpen,\n    isDragging,\n    chatHeight,\n    handleDragStart\n  } = useMobileChat(defaultChatHeight)\n  const chatTitle = 'AI Document Editor'\n  const chatDescription = 'Ask me to create or edit a document'\n  const initialLabel = 'Hi 👋 How can I help with your document?'\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"predictive_state_updates\"\n    >\n      <div\n        className=\"min-h-screen w-full\"\n        style={\n          {\n            // \"--copilot-kit-primary-color\": \"#222\",\n            // \"--copilot-kit-separator-color\": \"#CCC\",\n          } as React.CSSProperties\n        }\n      >\n        {isMobile ? (\n          <>\n            {/* Chat Toggle Button */}\n            <div className=\"fixed bottom-0 left-0 right-0 z-50\">\n              <div className=\"bg-gradient-to-t from-white via-white to-transparent h-6\"></div>\n              <div\n                className=\"bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg\"\n                onClick={() => {\n                  if (!isChatOpen) {\n                    setChatHeight(defaultChatHeight); // Reset to good default when opening\n                  }\n                  setIsChatOpen(!isChatOpen);\n                }}\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div>\n                    <div className=\"font-medium text-gray-900\">{chatTitle}</div>\n                    <div className=\"text-sm text-gray-500\">{chatDescription}</div>\n                  </div>\n                </div>\n                <div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>\n                  <svg className=\"w-6 h-6 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            {/* Pull-Up Chat Container */}\n            <div\n              className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${\n                isChatOpen ? 'translate-y-0' : 'translate-y-full'\n              } ${isDragging ? 'transition-none' : ''}`}\n              style={{\n                height: `${chatHeight}vh`,\n                paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding\n              }}\n            >\n              {/* Drag Handle Bar */}\n              <div\n                className=\"flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing\"\n                onMouseDown={handleDragStart}\n              >\n                <div className=\"w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors\"></div>\n              </div>\n\n              {/* Chat Header */}\n              <div className=\"px-4 py-3 border-b border-gray-100 flex-shrink-0\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <h3 className=\"font-semibold text-gray-900\">{chatTitle}</h3>\n                  </div>\n                  <button\n                    onClick={() => setIsChatOpen(false)}\n                    className=\"p-2 hover:bg-gray-100 rounded-full transition-colors\"\n                  >\n                    <svg className=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n\n              {/* Chat Content - Flexible container for messages and input */}\n              <div className=\"flex-1 flex flex-col min-h-0 overflow-hidden pb-16\">\n                <CopilotChat\n                  className=\"h-full flex flex-col\"\n                  labels={{\n                    initial: initialLabel,\n                  }}\n                />\n              </div>\n            </div>\n\n            {/* Backdrop */}\n            {isChatOpen && (\n              <div\n                className=\"fixed inset-0 z-30\"\n                onClick={() => setIsChatOpen(false)}\n              />\n            )}\n          </>\n        ) : (\n          <CopilotSidebar\n            defaultOpen={true}\n            labels={{\n              title: chatTitle,\n              initial: initialLabel,\n            }}\n            clickOutsideToClose={false}\n          />\n        )}\n        <DocumentEditor />\n      </div>\n    </CopilotKit>\n  );\n}\n\ninterface AgentState {\n  document: string;\n}\n\nconst DocumentEditor = () => {\n  const editor = useEditor({\n    extensions,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: { class: \"min-h-screen p-10\" },\n    },\n  });\n  const [placeholderVisible, setPlaceholderVisible] = useState(false);\n  const [currentDocument, setCurrentDocument] = useState(\"\");\n  const { isLoading } = useCopilotChat();\n\n  const {\n    state: agentState,\n    setState: setAgentState,\n    nodeName,\n  } = useCoAgent<AgentState>({\n    name: \"predictive_state_updates\",\n    initialState: {\n      document: \"\",\n    },\n  });\n\n  useEffect(() => {\n    if (isLoading) {\n      setCurrentDocument(editor?.getText() || \"\");\n    }\n    editor?.setEditable(!isLoading);\n  }, [isLoading]);\n\n  useEffect(() => {\n    if (nodeName == \"end\") {\n      // set the text one final time when loading is done\n      if (currentDocument.trim().length > 0 && currentDocument !== agentState?.document) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument, true);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [nodeName]);\n\n  useEffect(() => {\n    if (isLoading) {\n      if (currentDocument.trim().length > 0) {\n        const newDocument = agentState?.document || \"\";\n        const diff = diffPartialText(currentDocument, newDocument);\n        const markdown = fromMarkdown(diff);\n        editor?.commands.setContent(markdown);\n      } else {\n        const markdown = fromMarkdown(agentState?.document || \"\");\n        editor?.commands.setContent(markdown);\n      }\n    }\n  }, [agentState?.document]);\n\n  const text = editor?.getText() || \"\";\n\n  useEffect(() => {\n    setPlaceholderVisible(text.length === 0);\n\n    if (!isLoading) {\n      setCurrentDocument(text);\n      setAgentState({\n        document: text,\n      });\n    }\n  }, [text]);\n\n  // TODO(steve): Remove this when all agents have been updated to use write_document tool.\n  useCopilotAction({\n    name: \"confirm_changes\",\n    renderAndWaitForResponse: ({ args, respond, status }) => (\n      <ConfirmChanges\n        args={args}\n        respond={respond}\n        status={status}\n        onReject={() => {\n          editor?.commands.setContent(fromMarkdown(currentDocument));\n          setAgentState({ document: currentDocument });\n        }}\n        onConfirm={() => {\n          editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n          setCurrentDocument(agentState?.document || \"\");\n          setAgentState({ document: agentState?.document || \"\" });\n        }}\n      />\n    ),\n  }, [agentState?.document]);\n\n  // Action to write the document.\n  useCopilotAction({\n    name: \"write_document\",\n    description: `Present the proposed changes to the user for review`,\n    parameters: [\n      {\n        name: \"document\",\n        type: \"string\",\n        description: \"The full updated document in markdown format\",\n      },\n    ],\n    renderAndWaitForResponse({ args, status, respond }) {\n      if (status === \"executing\") {\n        return (\n          <ConfirmChanges\n            args={args}\n            respond={respond}\n            status={status}\n            onReject={() => {\n              editor?.commands.setContent(fromMarkdown(currentDocument));\n              setAgentState({ document: currentDocument });\n            }}\n            onConfirm={() => {\n              editor?.commands.setContent(fromMarkdown(agentState?.document || \"\"));\n              setCurrentDocument(agentState?.document || \"\");\n              setAgentState({ document: agentState?.document || \"\" });\n            }}\n          />\n        );\n      }\n      return <></>;\n    },\n  }, [agentState?.document]);\n\n  return (\n    <div className=\"relative min-h-screen w-full\">\n      {placeholderVisible && (\n        <div className=\"absolute top-6 left-6 m-4 pointer-events-none text-gray-400\">\n          Write whatever you want here in Markdown format...\n        </div>\n      )}\n      <EditorContent editor={editor} />\n    </div>\n  );\n};\n\ninterface ConfirmChangesProps {\n  args: any;\n  respond: any;\n  status: any;\n  onReject: () => void;\n  onConfirm: () => void;\n}\n\nfunction ConfirmChanges({ args, respond, status, onReject, onConfirm }: ConfirmChangesProps) {\n  const [accepted, setAccepted] = useState<boolean | null>(null);\n  return (\n    <div \n    data-testid=\"confirm-changes-modal\"\n    className=\"bg-white p-6 rounded shadow-lg border border-gray-200 mt-5 mb-5\">\n      <h2 className=\"text-lg font-bold mb-4\">Confirm Changes</h2>\n      <p className=\"mb-6\">Do you want to accept the changes?</p>\n      {accepted === null && (\n        <div className=\"flex justify-end space-x-4\">\n          <button\n            data-testid=\"reject-button\"\n            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(false);\n                onReject();\n                respond({ accepted: false });\n              }\n            }}\n          >\n            Reject\n          </button>\n          <button\n            data-testid=\"confirm-button\"\n            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${\n              status === \"executing\" ? \"cursor-pointer\" : \"cursor-default\"\n            }`}\n            disabled={status !== \"executing\"}\n            onClick={() => {\n              if (respond) {\n                setAccepted(true);\n                onConfirm();\n                respond({ accepted: true });\n              }\n            }}\n          >\n            Confirm\n          </button>\n        </div>\n      )}\n      {accepted !== null && (\n        <div className=\"flex justify-end\">\n          <div \n          data-testid=\"status-display\"\n          className=\"mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block\">\n            {accepted ? \"✓ Accepted\" : \"✗ Rejected\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction fromMarkdown(text: string) {\n  const md = new MarkdownIt({\n    typographer: true,\n    html: true,\n  });\n\n  return md.render(text);\n}\n\nfunction diffPartialText(oldText: string, newText: string, isComplete: boolean = false) {\n  let oldTextToCompare = oldText;\n  if (oldText.length > newText.length && !isComplete) {\n    // make oldText shorter\n    oldTextToCompare = oldText.slice(0, newText.length);\n  }\n\n  const changes = diffWords(oldTextToCompare, newText);\n\n  let result = \"\";\n  changes.forEach((part) => {\n    if (part.added) {\n      result += `<em>${part.value}</em>`;\n    } else if (part.removed) {\n      result += `<s>${part.value}</s>`;\n    } else {\n      result += part.value;\n    }\n  });\n\n  if (oldText.length > newText.length && !isComplete) {\n    result += oldText.slice(newText.length);\n  }\n\n  return result;\n}\n\nfunction isAlpha(text: string) {\n  return /[a-zA-Z\\u00C0-\\u017F]/.test(text.trim());\n}\n",
       "language": "typescript",
       "type": "file"
     },