@pikku/assistant-ui 0.12.7 → 0.12.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pikku/assistant-ui",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "author": "yasser.fadl@gmail.com",
   "license": "MIT",
   "type": "module",
@@ -20,7 +20,9 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@assistant-ui/react": "^0.12.12 || ^0.14.0",
+    "@ag-ui/client": "^0.0.57",
+    "@assistant-ui/react": "^0.14.24",
+    "@assistant-ui/react-ag-ui": "^0.0.43",
     "react-markdown": "^10.1.0"
   },
   "peerDependencies": {

package/src/index.ts

@@ -1,6 +1,5 @@
 export {
   usePikkuAgentRuntime,
-  usePikkuAgentNonStreamingRuntime,
   PikkuApprovalContext,
   usePikkuApproval,
   convertDbMessages,

package/src/pikku-agent-chat.tsx

@@ -149,10 +149,14 @@ const ToolCallDisplay: FunctionComponent<{
 }> = ({ toolCallId, toolName, args, result, status, addResult }) => {
   const colors = useContext(ColorsContext)
   const hideToolCalls = useContext(HideToolCallsContext)
-  const { handleApproval } = usePikkuApproval()
+  const { handleApproval, pendingApprovals } = usePikkuApproval()
   const [expanded, setExpanded] = useState(false)
   const isApproval = status.type === 'requires-action'
-  const approvalReason = (args as any)?.__approvalReason
+  const approvalReason =
+    (args as any)?.__approvalReason ??
+    pendingApprovals.find(
+      (a) => a.toolCallId === toolCallId && a.type !== 'credential-request'
+    )?.reason
   const displayArgs = { ...args }
   delete (displayArgs as any).__approvalReason
   const [responded, setResponded] = useState<'approved' | 'denied' | null>(null)
@@ -214,10 +218,11 @@ const ToolCallDisplay: FunctionComponent<{
         </pre>
         <div style={{ display: 'flex', gap: 8 }}>
           <button
-            onClick={() => {
+            onClick={async () => {
               setResponded('approved')
-              handleApproval(toolCallId, true)
-              addResult?.({ approved: true })
+              if (await handleApproval(toolCallId, true)) {
+                addResult?.({ approved: true })
+              }
             }}
             style={{
               padding: '4px 12px',
@@ -232,10 +237,11 @@ const ToolCallDisplay: FunctionComponent<{
             Approve
           </button>
           <button
-            onClick={() => {
+            onClick={async () => {
               setResponded('denied')
-              handleApproval(toolCallId, false)
-              addResult?.({ approved: false })
+              if (await handleApproval(toolCallId, false)) {
+                addResult?.({ approved: false })
+              }
             }}
             style={{
               padding: '4px 12px',