Knock + Cloudflare Agent HITL example

├── card-issue-agent ├── src │ ├── client │ │ ├── vite-env.d.ts │ │ ├── main.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ └── ui │ │ │ │ ├── textarea.tsx │ │ │ │ ├── avatar.tsx │ │ │ │ ├── tooltip.tsx │ │ │ │ ├── button.tsx │ │ │ │ ├── code-block.tsx │ │ │ │ ├── markdown.tsx │ │ │ │ ├── message.tsx │ │ │ │ ├── prompt-suggestion.tsx │ │ │ │ ├── prompt-input.tsx │ │ │ │ └── chat-container.tsx │ │ ├── index.css │ │ └── Chat.tsx │ ├── lib │ │ └── utils.ts │ └── agent │ │ ├── api.ts │ │ ├── helper.ts │ │ ├── app.ts │ │ ├── constants.ts │ │ ├── tools.ts │ │ └── index.ts ├── public │ ├── knock-logo.png │ ├── slope-logo.png │ └── vite.svg ├── tsconfig.worker.json ├── tsconfig.json ├── index.html ├── .gitignore ├── components.json ├── vite.config.ts ├── tsconfig.node.json ├── tsconfig.app.json ├── eslint.config.js ├── README.md ├── wrangler.json └── package.json ├── agent-sdk-chat-with-approval ├── .env.example ├── src │ ├── client │ │ ├── vite-env.d.ts │ │ ├── main.tsx │ │ ├── Notifications.tsx │ │ ├── index.css │ │ └── App.tsx │ ├── lib │ │ └── utils.ts │ ├── components │ │ └── ui │ │ │ ├── textarea.tsx │ │ │ ├── avatar.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── button.tsx │ │ │ ├── code-block.tsx │ │ │ ├── markdown.tsx │ │ │ ├── message.tsx │ │ │ ├── prompt-suggestion.tsx │ │ │ ├── prompt-input.tsx │ │ │ └── chat-container.tsx │ └── agent │ │ ├── tools.ts │ │ ├── helper.ts │ │ └── index.ts ├── tsconfig.worker.json ├── tsconfig.json ├── index.html ├── .gitignore ├── components.json ├── vite.config.ts ├── tsconfig.node.json ├── tsconfig.app.json ├── eslint.config.js ├── public │ └── vite.svg ├── README.md ├── wrangler.json └── package.json ├── README.md └── LICENSE /card-issue-agent/src/client/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/.env.example: -------------------------------------------------------------------------------- 1 | VITE_KNOCK_PUBLIC_KEY= 2 | VITE_KNOCK_FEED_ID= -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/src/client/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /card-issue-agent/public/knock-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/knocklabs/ai-agent-examples/HEAD/card-issue-agent/public/knock-logo.png -------------------------------------------------------------------------------- /card-issue-agent/public/slope-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/knocklabs/ai-agent-examples/HEAD/card-issue-agent/public/slope-logo.png -------------------------------------------------------------------------------- /card-issue-agent/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /card-issue-agent/tsconfig.worker.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.node.json", 3 | "compilerOptions": { 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo", 5 | "types": ["vite/client", "./worker-configuration.d.ts"] 6 | }, 7 | "include": ["src/worker"] 8 | } 9 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/tsconfig.worker.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.node.json", 3 | "compilerOptions": { 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo", 5 | "types": ["vite/client", "./worker-configuration.d.ts"] 6 | }, 7 | "include": ["src/worker"] 8 | } 9 | -------------------------------------------------------------------------------- /card-issue-agent/src/client/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App.tsx"; 5 | 6 | createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/src/client/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App.tsx"; 5 | 6 | createRoot(document.getElementById("root")!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /card-issue-agent/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" }, 6 | { "path": "./tsconfig.worker.json" } 7 | ], 8 | "compilerOptions": { 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"] 12 | }, 13 | "types": ["@cloudflare/workers-types/2023-07-01"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" }, 6 | { "path": "./tsconfig.worker.json" } 7 | ], 8 | "compilerOptions": { 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"] 12 | }, 13 | "types": ["@cloudflare/workers-types/2023-07-01"] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /card-issue-agent/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Knock + Cloudflare Agent HITL example 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Knock + Cloudflare Agent HITL example 7 | 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /card-issue-agent/src/agent/api.ts: -------------------------------------------------------------------------------- 1 | export type IssuedCard = { 2 | cardId: string; 3 | last4: string; 4 | expiry: string; 5 | userId: string; 6 | name: string; 7 | }; 8 | 9 | export async function issueCard(userId: string, name: string) { 10 | return { 11 | cardId: `card_${Math.random().toString(36).substring(2, 15)}`, 12 | userId, 13 | name, 14 | last4: "4242", 15 | expiry: "12/2028", 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /card-issue-agent/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # wrangler files 27 | .wrangler 28 | .dev.vars* 29 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # wrangler files 27 | .wrangler 28 | .dev.vars* 29 | -------------------------------------------------------------------------------- /card-issue-agent/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/client/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/client/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /card-issue-agent/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | import { defineConfig } from "vite"; 4 | import react from "@vitejs/plugin-react"; 5 | import { cloudflare } from "@cloudflare/vite-plugin"; 6 | 7 | export default defineConfig({ 8 | plugins: [react(), cloudflare(), tailwindcss()], 9 | server: { 10 | allowedHosts: ["26e9-47-185-68-94.ngrok-free.app", "localhost"], 11 | }, 12 | resolve: { 13 | alias: { 14 | "@": path.resolve(__dirname, "./src"), 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | import { defineConfig } from "vite"; 4 | import react from "@vitejs/plugin-react"; 5 | import { cloudflare } from "@cloudflare/vite-plugin"; 6 | 7 | export default defineConfig({ 8 | plugins: [react(), cloudflare(), tailwindcss()], 9 | server: { 10 | allowedHosts: ["a8b8-141-157-241-19.ngrok-free.app", "localhost"], 11 | }, 12 | resolve: { 13 | alias: { 14 | "@": path.resolve(__dirname, "./src"), 15 | }, 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Knock Agent Toolkit examples 2 | 3 | A repository of AI Agent examples integrating Knock's [Agent Toolkit](https://docs.knock.app/developer-tools/agent-toolkit) across various Agent frameworks and platforms. 4 | 5 | You can use the [Knock Agent Toolkit](https://github.com/knocklabs/agent-toolkit) to integrate Knock into Agent applications, giving your Agent the ability to send cross-channel messaging and easily power deferred tool executions for human-in-the-loop interactions. 6 | 7 | ## Examples 8 | 9 | - [Cloudflare Agent SDK + Vercel AI SDK + HITL approval](/agent-sdk-chat-with-approval/README.md) 10 | -------------------------------------------------------------------------------- /card-issue-agent/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /card-issue-agent/src/client/App.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { generateId } from "ai"; 4 | import { useLocalStorage } from "usehooks-ts"; 5 | import { useCallback, useEffect } from "react"; 6 | import Chat from "./Chat"; 7 | 8 | function App() { 9 | const [userId, setUserId] = useLocalStorage( 10 | "userId", 11 | undefined 12 | ); 13 | 14 | const resetUserId = useCallback(() => { 15 | setUserId(generateId()); 16 | }, [setUserId]); 17 | 18 | useEffect(() => { 19 | // Set the initial userId if it's not set 20 | if (!userId) resetUserId(); 21 | }, [resetUserId, userId]); 22 | 23 | return userId ? ( 24 | 25 | ) : null; 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /card-issue-agent/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src/client"] 26 | } 27 | -------------------------------------------------------------------------------- /agent-sdk-chat-with-approval/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src/client"] 26 | } 27 | -------------------------------------------------------------------------------- /card-issue-agent/src/client/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |

15 |   )
16 | }
17 | 
18 | export { Textarea }
19 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | export { Textarea }
19 |

--------------------------------------------------------------------------------
/card-issue-agent/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ["dist"] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ["**/*.{ts,tsx}"],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       "react-hooks": reactHooks,
18 |       "react-refresh": reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       "react-refresh/only-export-components": [
23 |         "warn",
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | );
29 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ["dist"] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ["**/*.{ts,tsx}"],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       "react-hooks": reactHooks,
18 |       "react-refresh": reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       "react-refresh/only-export-components": [
23 |         "warn",
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | );
29 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Knock Labs, Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/client/Notifications.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useRef } from "react";
 2 | import {
 3 |   NotificationIconButton,
 4 |   NotificationFeedPopover,
 5 |   useKnockFeed,
 6 | } from "@knocklabs/react";
 7 | 
 8 | // Required CSS import, unless you're overriding the styling
 9 | import "@knocklabs/react/dist/index.css";
10 | 
11 | const Notifications = () => {
12 |   const [isVisible, setIsVisible] = useState(false);
13 |   const notifButtonRef = useRef<HTMLButtonElement>(null);
14 | 
15 |   const { feedClient } = useKnockFeed();
16 | 
17 |   return (
18 |     <div className="notifications-container">
19 |       <div className="notifications-button">
20 |         <NotificationIconButton
21 |           ref={notifButtonRef}
22 |           onClick={(e) => setIsVisible(!isVisible)}
23 |         />
24 |       </div>
25 |       {notifButtonRef.current && (
26 |         <NotificationFeedPopover
27 |           buttonRef={notifButtonRef as React.RefObject<HTMLElement>}
28 |           isVisible={isVisible}
29 |           onClose={() => setIsVisible(false)}
30 |           onNotificationButtonClick={(item) => {
31 |             feedClient.markAsArchived(item);
32 |             return false;
33 |           }}
34 |         />
35 |       )}
36 |     </div>
37 |   );
38 | };
39 | 
40 | export default Notifications;
41 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/agent/tools.ts:
--------------------------------------------------------------------------------
 1 | import { createKnockToolkit } from "@knocklabs/agent/ai-sdk";
 2 | import { tool } from "ai";
 3 | import { z } from "zod";
 4 | 
 5 | type Env = {
 6 |   KNOCK_SERVICE_TOKEN: string;
 7 | };
 8 | 
 9 | const addTool = tool({
10 |   description: "Add two numbers together. ALWAYS use this tool when you are asked to do addition DO NOT assume the result.",
11 |   parameters: z.object({
12 |     a: z.number(),
13 |     b: z.number(),
14 |   }),
15 |   execute: async ({ a, b }) => {
16 |     return a + b;
17 |   },
18 | });
19 | 
20 | const subtractTool = tool({
21 |   description: "Subtract two numbers together. ALWAYS use this tool when you are asked to do subtraction DO NOT assume the result.",
22 |   parameters: z.object({
23 |     a: z.number(),
24 |     b: z.number(),
25 |   }),
26 |   execute: async ({ a, b }) => {
27 |     return a - b;
28 |   },
29 | });
30 | 
31 | async function initializeToolkit(env: Env) {
32 |   const toolkit = await createKnockToolkit({
33 |     serviceToken: env.KNOCK_SERVICE_TOKEN,
34 |     permissions: {},
35 |   });
36 | 
37 |   const tools = toolkit.requireHumanInput({ add: addTool }, {
38 |     workflow: "approve-tool-call",
39 |     recipients: ["admin_user_1"],
40 |   });
41 | 
42 |   return { toolkit, tools: { ...tools, subtract: subtractTool } };
43 | }
44 | 
45 | export { initializeToolkit };
46 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Avatar({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12 |   return (
13 |     <AvatarPrimitive.Root
14 |       data-slot="avatar"
15 |       className={cn(
16 |         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | function AvatarImage({
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28 |   return (
29 |     <AvatarPrimitive.Image
30 |       data-slot="avatar-image"
31 |       className={cn("aspect-square size-full", className)}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function AvatarFallback({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41 |   return (
42 |     <AvatarPrimitive.Fallback
43 |       data-slot="avatar-fallback"
44 |       className={cn(
45 |         "bg-muted flex size-full items-center justify-center rounded-full",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   )
51 | }
52 | 
53 | export { Avatar, AvatarImage, AvatarFallback }
54 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
 5 | 
 6 | import { cn } from "../../../lib/utils";
 7 | 
 8 | function Avatar({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12 |   return (
13 |     <AvatarPrimitive.Root
14 |       data-slot="avatar"
15 |       className={cn(
16 |         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   );
22 | }
23 | 
24 | function AvatarImage({
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28 |   return (
29 |     <AvatarPrimitive.Image
30 |       data-slot="avatar-image"
31 |       className={cn("aspect-square size-full", className)}
32 |       {...props}
33 |     />
34 |   );
35 | }
36 | 
37 | function AvatarFallback({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41 |   return (
42 |     <AvatarPrimitive.Fallback
43 |       data-slot="avatar-fallback"
44 |       className={cn(
45 |         "bg-muted flex size-full items-center justify-center rounded-full",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   );
51 | }
52 | 
53 | export { Avatar, AvatarImage, AvatarFallback };
54 |

--------------------------------------------------------------------------------
/card-issue-agent/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/agent/helper.ts:
--------------------------------------------------------------------------------
 1 | import { CoreAssistantMessage, CoreToolMessage, Message } from "ai";
 2 | import { deferredToolCallToToolInvocation } from "@knocklabs/agent/ai-sdk";
 3 | import { type DeferredToolCall } from "@knocklabs/agent/types";
 4 | 
 5 | type ResponseMessage = (CoreAssistantMessage | CoreToolMessage) & {
 6 |   id: string;
 7 | };
 8 | 
 9 | /**
10 |  * Returns a new assistant message that includes the deferred tool call and the result so it can be
11 |  * shown in the UI.
12 |  *
13 |  * @param toolCall
14 |  */
15 | export function responseToAssistantMessage(
16 |   responseMessage: ResponseMessage,
17 |   deferredToolCall: DeferredToolCall,
18 |   toolResult: any
19 | ): Message {
20 |   const toolInvocation = deferredToolCallToToolInvocation(
21 |     deferredToolCall,
22 |     toolResult
23 |   );
24 | 
25 |   let textContent = "";
26 | 
27 |   for (const part of responseMessage.content) {
28 |     if (typeof part === "string") {
29 |       textContent += part;
30 |     } else if (part.type === "text") {
31 |       textContent += part.text;
32 |     }
33 |   }
34 | 
35 |   return {
36 |     role: "assistant",
37 |     id: responseMessage.id,
38 |     createdAt: new Date(),
39 |     content: textContent,
40 |     parts: [
41 |       { type: "step-start" },
42 |       { type: "tool-invocation", toolInvocation },
43 |       { type: "step-start" },
44 |       { type: "text", text: textContent },
45 |     ],
46 |     toolInvocations: [toolInvocation],
47 |   };
48 | }
49 |

--------------------------------------------------------------------------------
/card-issue-agent/src/agent/helper.ts:
--------------------------------------------------------------------------------
 1 | import { CoreAssistantMessage, CoreToolMessage, Message } from "ai";
 2 | import { deferredToolCallToToolInvocation } from "@knocklabs/agent-toolkit/ai-sdk";
 3 | // import { type DeferredToolCall } from "@knocklabs/agent-toolkit/human-in-the-loop";
 4 | 
 5 | type ResponseMessage = (CoreAssistantMessage | CoreToolMessage) & {
 6 |   id: string;
 7 | };
 8 | 
 9 | /**
10 |  * Returns a new assistant message that includes the deferred tool call and the result so it can be
11 |  * shown in the UI.
12 |  *
13 |  * @param toolCall
14 |  */
15 | export function responseToAssistantMessage(
16 |   responseMessage: ResponseMessage,
17 |   deferredToolCall: any,
18 |   toolResult: any
19 | ): Message {
20 |   const toolInvocation = deferredToolCallToToolInvocation(
21 |     deferredToolCall,
22 |     toolResult
23 |   );
24 | 
25 |   let textContent = "";
26 | 
27 |   for (const part of responseMessage.content) {
28 |     if (typeof part === "string") {
29 |       textContent += part;
30 |     } else if (part.type === "text") {
31 |       textContent += part.text;
32 |     }
33 |   }
34 | 
35 |   return {
36 |     role: "assistant",
37 |     id: responseMessage.id,
38 |     createdAt: new Date(),
39 |     content: textContent,
40 |     parts: [
41 |       { type: "step-start" },
42 |       { type: "tool-invocation", toolInvocation },
43 |       { type: "step-start" },
44 |       { type: "text", text: textContent },
45 |     ],
46 |     toolInvocations: [toolInvocation],
47 |   };
48 | }
49 |

--------------------------------------------------------------------------------
/card-issue-agent/src/agent/app.ts:
--------------------------------------------------------------------------------
 1 | import { getAgentByName, routeAgentRequest } from "agents";
 2 | import { Hono } from "hono";
 3 | import { Knock } from "@knocklabs/node";
 4 | import { Env } from ".";
 5 | 
 6 | const app = new Hono();
 7 | 
 8 | const knock = new Knock(process.env.KNOCK_API_KEY);
 9 | 
10 | app.get("/card-issued/approve", async (c) => {
11 |   const { messageId } = c.req.query();
12 | 
13 |   await knock.put(`/v1/messages/${messageId}/interacted`, {
14 |     metadata: {
15 |       status: "approved",
16 |     },
17 |   });
18 | 
19 |   return c.text("Approved");
20 | });
21 | 
22 | app.post("/incoming/knock/webhook", async (c) => {
23 |   const body = await c.req.json();
24 |   const env = c.env as Env;
25 | 
26 |   // Find the user ID from the tool call for the original issuer.
27 |   // TODO: move this to the `body.data.actors[0]` on the Message object.
28 |   // this requires us using the `actor` on the workflow.
29 |   const userId = body?.data?.actors[0];
30 | 
31 |   if (!userId) {
32 |     return c.text("No user ID found", { status: 400 });
33 |   }
34 | 
35 |   const existingAgent = await getAgentByName(env.AIAgent, userId);
36 | 
37 |   if (existingAgent) {
38 |     const result = await existingAgent.handleIncomingWebhook(body);
39 | 
40 |     return c.json(result);
41 |   } else {
42 |     return c.text("Not found", { status: 404 });
43 |   }
44 | });
45 | 
46 | app.get("*", async (c) => {
47 |   return (
48 |     // Route the request to our agent or return 404 if not found
49 |     (await routeAgentRequest(c.req.raw, c.env)) ||
50 |     c.text("Not found", { status: 404 })
51 |   );
52 | });
53 | 
54 | export default app;
55 |

--------------------------------------------------------------------------------
/card-issue-agent/README.md:
--------------------------------------------------------------------------------
 1 | # React Chat with human-in-the-loop approval
 2 | 
 3 | This application demonstrates using Knock to power a deferred tool call as part of a human-in-the-loop interaction in an Agent chat.
 4 | 
 5 | ## Powered by
 6 | 
 7 | - [Cloudflare Workers](https://developers.cloudflare.com/workers/)
 8 | - [Cloudflare Agents SDK](https://developers.cloudflare.com/agents/api-reference/)
 9 | - [Vercel AI SDK](https://sdk.vercel.ai/)
10 | - [Knock Agent Toolkit](https://docs.knock.app/developer-tools/agent-toolkit/overview)
11 | 
12 | ## Prerequisites
13 | 
14 | - A [Knock account](https://dashboard.knock.app/signup)
15 |   - A service token configured
16 |   - A `approve-tool-call` workflow configured with a single in-app feed channel step
17 |   - A `message.interacted` webhook configured that sends a request back to `http://localhost:5173/incoming/webhook`
18 | - A [Cloudflare developer account](https://dash.cloudflare.com/sign-up/workers?_gl=1*s0kyay*_gcl_au*MTg1MTMyOTk5NS4xNzQ0ODEyNzA3*_ga*MTc1NTAwNzc3NS4xNzQ0ODEyNzA3*_ga_SQCRB0TXZW*MTc0NTQzNjU1NC41LjEuMTc0NTQzNjU1OS41NS4wLjA.)
19 | 
20 | ## Development
21 | 
22 | Install dependencies:
23 | 
24 | ```bash
25 | npm install
26 | ```
27 | 
28 | Start the development server with:
29 | 
30 | ```bash
31 | npm run dev
32 | ```
33 | 
34 | Your application will be available at [http://localhost:5173](http://localhost:5173).
35 | 
36 | ## Production
37 | 
38 | Build your project for production:
39 | 
40 | ```bash
41 | npm run build
42 | ```
43 | 
44 | Preview your build locally:
45 | 
46 | ```bash
47 | npm run preview
48 | ```
49 | 
50 | Deploy your project to Cloudflare Workers:
51 | 
52 | ```bash
53 | npx wrangler deploy
54 | ```
55 | 
56 | ## Additional Resources
57 | 
58 | - [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/)
59 | - [Vite Documentation](https://vitejs.dev/guide/)
60 | - [React Documentation](https://reactjs.org/)
61 | - [Hono Documentation](https://hono.dev/)
62 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/README.md:
--------------------------------------------------------------------------------
 1 | # React Chat with human-in-the-loop approval
 2 | 
 3 | This application demonstrates using Knock to power a deferred tool call as part of a human-in-the-loop interaction in an Agent chat.
 4 | 
 5 | ## Powered by
 6 | 
 7 | - [Cloudflare Workers](https://developers.cloudflare.com/workers/)
 8 | - [Cloudflare Agents SDK](https://developers.cloudflare.com/agents/api-reference/)
 9 | - [Vercel AI SDK](https://sdk.vercel.ai/)
10 | - [Knock Agent Toolkit](https://docs.knock.app/developer-tools/agent-toolkit/overview)
11 | 
12 | ## Prerequisites
13 | 
14 | - A [Knock account](https://dashboard.knock.app/signup)
15 |   - A service token configured
16 |   - A `approve-tool-call` workflow configured with a single in-app feed channel step
17 |   - A `message.interacted` webhook configured that sends a request back to `http://localhost:5173/incoming/webhook`
18 | - A [Cloudflare developer account](https://dash.cloudflare.com/sign-up/workers?_gl=1*s0kyay*_gcl_au*MTg1MTMyOTk5NS4xNzQ0ODEyNzA3*_ga*MTc1NTAwNzc3NS4xNzQ0ODEyNzA3*_ga_SQCRB0TXZW*MTc0NTQzNjU1NC41LjEuMTc0NTQzNjU1OS41NS4wLjA.)
19 | 
20 | ## Development
21 | 
22 | Install dependencies:
23 | 
24 | ```bash
25 | npm install
26 | ```
27 | 
28 | Start the development server with:
29 | 
30 | ```bash
31 | npm run dev
32 | ```
33 | 
34 | Your application will be available at [http://localhost:5173](http://localhost:5173).
35 | 
36 | ## Production
37 | 
38 | Build your project for production:
39 | 
40 | ```bash
41 | npm run build
42 | ```
43 | 
44 | Preview your build locally:
45 | 
46 | ```bash
47 | npm run preview
48 | ```
49 | 
50 | Deploy your project to Cloudflare Workers:
51 | 
52 | ```bash
53 | npx wrangler deploy
54 | ```
55 | 
56 | ## Additional Resources
57 | 
58 | - [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/)
59 | - [Vite Documentation](https://vitejs.dev/guide/)
60 | - [React Documentation](https://reactjs.org/)
61 | - [Hono Documentation](https://hono.dev/)
62 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | function TooltipProvider({
 7 |   delayDuration = 0,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
10 |   return (
11 |     <TooltipPrimitive.Provider
12 |       data-slot="tooltip-provider"
13 |       delayDuration={delayDuration}
14 |       {...props}
15 |     />
16 |   )
17 | }
18 | 
19 | function Tooltip({
20 |   ...props
21 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
22 |   return (
23 |     <TooltipProvider>
24 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
25 |     </TooltipProvider>
26 |   )
27 | }
28 | 
29 | function TooltipTrigger({
30 |   ...props
31 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
32 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
33 | }
34 | 
35 | function TooltipContent({
36 |   className,
37 |   sideOffset = 0,
38 |   children,
39 |   ...props
40 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
41 |   return (
42 |     <TooltipPrimitive.Portal>
43 |       <TooltipPrimitive.Content
44 |         data-slot="tooltip-content"
45 |         sideOffset={sideOffset}
46 |         className={cn(
47 |           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
48 |           className
49 |         )}
50 |         {...props}
51 |       >
52 |         {children}
53 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
54 |       </TooltipPrimitive.Content>
55 |     </TooltipPrimitive.Portal>
56 |   )
57 | }
58 | 
59 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
60 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | function TooltipProvider({
 7 |   delayDuration = 0,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
10 |   return (
11 |     <TooltipPrimitive.Provider
12 |       data-slot="tooltip-provider"
13 |       delayDuration={delayDuration}
14 |       {...props}
15 |     />
16 |   )
17 | }
18 | 
19 | function Tooltip({
20 |   ...props
21 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
22 |   return (
23 |     <TooltipProvider>
24 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
25 |     </TooltipProvider>
26 |   )
27 | }
28 | 
29 | function TooltipTrigger({
30 |   ...props
31 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
32 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
33 | }
34 | 
35 | function TooltipContent({
36 |   className,
37 |   sideOffset = 0,
38 |   children,
39 |   ...props
40 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
41 |   return (
42 |     <TooltipPrimitive.Portal>
43 |       <TooltipPrimitive.Content
44 |         data-slot="tooltip-content"
45 |         sideOffset={sideOffset}
46 |         className={cn(
47 |           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
48 |           className
49 |         )}
50 |         {...props}
51 |       >
52 |         {children}
53 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
54 |       </TooltipPrimitive.Content>
55 |     </TooltipPrimitive.Portal>
56 |   )
57 | }
58 | 
59 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
60 |

--------------------------------------------------------------------------------
/card-issue-agent/wrangler.json:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * For more details on how to configure Wrangler, refer to:
 3 |  * https://developers.cloudflare.com/workers/wrangler/configuration/
 4 |  */
 5 | {
 6 |   "$schema": "node_modules/wrangler/config-schema.json",
 7 |   "name": "knock-card-issue-agent",
 8 |   "main": "./src/agent/index.ts",
 9 |   "compatibility_date": "2025-04-01",
10 |   "compatibility_flags": ["nodejs_compat"],
11 |   "observability": {
12 |     "enabled": true
13 |   },
14 |   "upload_source_maps": true,
15 |   "assets": {
16 |     "not_found_handling": "none"
17 |   },
18 |   "durable_objects": {
19 |     "bindings": [
20 |       {
21 |         "name": "AIAgent",
22 |         "class_name": "AIAgent"
23 |       }
24 |     ]
25 |   },
26 |   "migrations": [
27 |     {
28 |       "tag": "v1",
29 |       // Mandatory for the Agent to store state
30 |       "new_sqlite_classes": ["AIAgent"]
31 |     }
32 |   ]
33 |   /**
34 |    * Smart Placement
35 |    * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
36 |    */
37 |   // "placement": { "mode": "smart" },
38 | 
39 |   /**
40 |    * Bindings
41 |    * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
42 |    * databases, object storage, AI inference, real-time communication and more.
43 |    * https://developers.cloudflare.com/workers/runtime-apis/bindings/
44 |    */
45 | 
46 |   /**
47 |    * Environment Variables
48 |    * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
49 |    */
50 |   // "vars": { "MY_VARIABLE": "production_value" },
51 |   /**
52 |    * Note: Use secrets to store sensitive data.
53 |    * https://developers.cloudflare.com/workers/configuration/secrets/
54 |    */
55 | 
56 |   /**
57 |    * Static Assets
58 |    * https://developers.cloudflare.com/workers/static-assets/binding/
59 |    */
60 |   // "assets": { "directory": "./public/", "binding": "ASSETS" },
61 | 
62 |   /**
63 |    * Service Bindings (communicate between multiple Workers)
64 |    * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
65 |    */
66 |   // "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
67 | }
68 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/wrangler.json:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * For more details on how to configure Wrangler, refer to:
 3 |  * https://developers.cloudflare.com/workers/wrangler/configuration/
 4 |  */
 5 | {
 6 | 	"$schema": "node_modules/wrangler/config-schema.json",
 7 | 	"name": "agent-sdk-chat-with-approval",
 8 | 	"main": "./src/agent/index.ts",
 9 | 	"compatibility_date": "2025-04-01",
10 | 	"compatibility_flags": [
11 | 		"nodejs_compat"
12 | 	],
13 | 	"observability": {
14 | 		"enabled": true
15 | 	},
16 | 	"upload_source_maps": true,
17 | 	"assets": {
18 | 		"not_found_handling": "single-page-application"
19 | 	},
20 | 	"durable_objects": {
21 |     "bindings": [
22 |       {
23 |         "name": "AIAgent",
24 |         "class_name": "AIAgent",
25 |       },
26 |     ],
27 |   },
28 |   "migrations": [
29 |     {
30 |       "tag": "v1",
31 |       // Mandatory for the Agent to store state
32 |       "new_sqlite_classes": ["AIAgent"],
33 |     },
34 |   ],
35 | 	/**
36 | 	 * Smart Placement
37 | 	 * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
38 | 	 */
39 | 	// "placement": { "mode": "smart" },
40 | 
41 | 	/**
42 | 	 * Bindings
43 | 	 * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
44 | 	 * databases, object storage, AI inference, real-time communication and more.
45 | 	 * https://developers.cloudflare.com/workers/runtime-apis/bindings/
46 | 	 */
47 | 
48 | 	/**
49 | 	 * Environment Variables
50 | 	 * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
51 | 	 */
52 | 	// "vars": { "MY_VARIABLE": "production_value" },
53 | 	/**
54 | 	 * Note: Use secrets to store sensitive data.
55 | 	 * https://developers.cloudflare.com/workers/configuration/secrets/
56 | 	 */
57 | 
58 | 	/**
59 | 	 * Static Assets
60 | 	 * https://developers.cloudflare.com/workers/static-assets/binding/
61 | 	 */
62 | 	// "assets": { "directory": "./public/", "binding": "ASSETS" },
63 | 
64 | 	/**
65 | 	 * Service Bindings (communicate between multiple Workers)
66 | 	 * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
67 | 	 */
68 | 	// "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
69 | }
70 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite-react-template",
 3 |   "description": "A template for building a React application with Vite, Hono, and Cloudflare Workers",
 4 |   "version": "0.0.0",
 5 |   "cloudflare": {
 6 |     "label": "Vite React Template",
 7 |     "products": [
 8 |       "Workers"
 9 |     ],
10 |     "categories": [],
11 |     "icon_urls": [
12 |       "https://imagedelivery.net/wSMYJvS3Xw-n339CbDyDIA/5ca0ca32-e897-4699-d4c1-6b680512f000/public"
13 |     ],
14 |     "preview_image_url": "https://imagedelivery.net/wSMYJvS3Xw-n339CbDyDIA/fc7b4b62-442b-4769-641b-ad4422d74300/public",
15 |     "dash": true
16 |   },
17 |   "dependencies": {
18 |     "@ai-sdk/openai": "^1.3.16",
19 |     "@ai-sdk/react": "^1.2.9",
20 |     "@ai-sdk/ui-utils": "^1.2.8",
21 |     "@knocklabs/agent": "file:../../agent-toolkit",
22 |     "@knocklabs/react": "^0.7.3",
23 |     "@radix-ui/react-avatar": "^1.1.7",
24 |     "@radix-ui/react-slot": "^1.2.0",
25 |     "@radix-ui/react-tooltip": "^1.2.4",
26 |     "@tailwindcss/vite": "^4.1.4",
27 |     "agents": "^0.0.62",
28 |     "ai": "^4.3.9",
29 |     "class-variance-authority": "^0.7.1",
30 |     "clsx": "^2.1.1",
31 |     "hono": "4.7.5",
32 |     "lucide-react": "^0.503.0",
33 |     "marked": "^15.0.11",
34 |     "react": "19.0.0",
35 |     "react-dom": "19.0.0",
36 |     "react-markdown": "^10.1.0",
37 |     "remark-gfm": "^4.0.1",
38 |     "shiki": "^3.3.0",
39 |     "tailwind-merge": "^3.2.0",
40 |     "tailwindcss": "^4.1.4"
41 |   },
42 |   "devDependencies": {
43 |     "@cloudflare/vite-plugin": "1.0.2",
44 |     "@cloudflare/workers-types": "^4.20250420.0",
45 |     "@eslint/js": "9.23.0",
46 |     "@types/node": "^22.15.2",
47 |     "@types/react": "19.0.10",
48 |     "@types/react-dom": "19.0.4",
49 |     "@vitejs/plugin-react": "4.3.4",
50 |     "eslint": "9.23.0",
51 |     "eslint-plugin-react-hooks": "5.2.0",
52 |     "eslint-plugin-react-refresh": "0.4.19",
53 |     "globals": "15.15.0",
54 |     "tw-animate-css": "^1.2.8",
55 |     "typescript": "5.8.2",
56 |     "typescript-eslint": "8.29.0",
57 |     "vite": "6.2.5",
58 |     "wrangler": "^4.12.0"
59 |   },
60 |   "scripts": {
61 |     "build": "tsc -b && vite build",
62 |     "deploy": "npm run build && wrangler deploy",
63 |     "dev": "vite",
64 |     "lint": "eslint .",
65 |     "preview": "npm run build && vite preview",
66 |     "types": "wrangler types"
67 |   },
68 |   "type": "module"
69 | }
70 |

--------------------------------------------------------------------------------
/card-issue-agent/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "knock-card-issue-agent",
 3 |   "description": "A simple AI agent that can assist with issuing new credit cards.",
 4 |   "version": "0.1.0",
 5 |   "cloudflare": {
 6 |     "products": [
 7 |       "Workers"
 8 |     ],
 9 |     "categories": [],
10 |     "icon_urls": [
11 |       "https://imagedelivery.net/wSMYJvS3Xw-n339CbDyDIA/5ca0ca32-e897-4699-d4c1-6b680512f000/public"
12 |     ],
13 |     "preview_image_url": "https://imagedelivery.net/wSMYJvS3Xw-n339CbDyDIA/fc7b4b62-442b-4769-641b-ad4422d74300/public",
14 |     "dash": true
15 |   },
16 |   "dependencies": {
17 |     "@ai-sdk/openai": "^1.3.16",
18 |     "@ai-sdk/react": "^1.2.9",
19 |     "@ai-sdk/ui-utils": "^1.2.8",
20 |     "@knocklabs/agent-toolkit": "file:../../agent-toolkit",
21 |     "@knocklabs/react": "^0.7.3",
22 |     "@radix-ui/react-avatar": "^1.1.7",
23 |     "@radix-ui/react-slot": "^1.2.0",
24 |     "@radix-ui/react-tooltip": "^1.2.4",
25 |     "@tailwindcss/vite": "^4.1.4",
26 |     "agents": "^0.0.62",
27 |     "ai": "^4.3.9",
28 |     "class-variance-authority": "^0.7.1",
29 |     "clsx": "^2.1.1",
30 |     "hono": "4.7.5",
31 |     "lucide-react": "^0.503.0",
32 |     "marked": "^15.0.11",
33 |     "react": "19.0.0",
34 |     "react-dom": "19.0.0",
35 |     "react-markdown": "^10.1.0",
36 |     "remark-gfm": "^4.0.1",
37 |     "shiki": "^3.3.0",
38 |     "tailwind-merge": "^3.2.0",
39 |     "tailwindcss": "^4.1.4",
40 |     "usehooks-ts": "^3.1.1",
41 |     "uuid": "^11.1.0"
42 |   },
43 |   "devDependencies": {
44 |     "@cloudflare/vite-plugin": "1.0.2",
45 |     "@cloudflare/workers-types": "^4.20250420.0",
46 |     "@eslint/js": "9.23.0",
47 |     "@types/node": "^22.15.2",
48 |     "@types/react": "19.0.10",
49 |     "@types/react-dom": "19.0.4",
50 |     "@vitejs/plugin-react": "4.3.4",
51 |     "eslint": "9.23.0",
52 |     "eslint-plugin-react-hooks": "5.2.0",
53 |     "eslint-plugin-react-refresh": "0.4.19",
54 |     "globals": "15.15.0",
55 |     "tw-animate-css": "^1.2.8",
56 |     "typescript": "5.8.2",
57 |     "typescript-eslint": "8.29.0",
58 |     "vite": "6.2.5",
59 |     "wrangler": "^4.12.0"
60 |   },
61 |   "scripts": {
62 |     "build": "tsc -b && vite build",
63 |     "deploy": "npm run build && wrangler deploy",
64 |     "dev": "vite",
65 |     "lint": "eslint .",
66 |     "preview": "npm run build && vite preview",
67 |     "types": "wrangler types"
68 |   },
69 |   "type": "module"
70 | }
71 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "../../../lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | );
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean;
47 |   }) {
48 |   const Comp = asChild ? Slot : "button";
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   );
57 | }
58 | 
59 | export { Button, buttonVariants };
60 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/code-block.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | import React, { useEffect, useState } from "react"
 3 | import { codeToHtml } from "shiki"
 4 | 
 5 | export type CodeBlockProps = {
 6 |   children?: React.ReactNode
 7 |   className?: string
 8 | } & React.HTMLProps<HTMLDivElement>
 9 | 
10 | function CodeBlock({ children, className, ...props }: CodeBlockProps) {
11 |   return (
12 |     <div
13 |       className={cn(
14 |         "not-prose flex w-full flex-col overflow-clip border",
15 |         "border-border bg-card text-card-foreground rounded-xl",
16 |         className
17 |       )}
18 |       {...props}
19 |     >
20 |       {children}
21 |     </div>
22 |   )
23 | }
24 | 
25 | export type CodeBlockCodeProps = {
26 |   code: string
27 |   language?: string
28 |   theme?: string
29 |   className?: string
30 | } & React.HTMLProps<HTMLDivElement>
31 | 
32 | function CodeBlockCode({
33 |   code,
34 |   language = "tsx",
35 |   theme = "github-light",
36 |   className,
37 |   ...props
38 | }: CodeBlockCodeProps) {
39 |   const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
40 | 
41 |   useEffect(() => {
42 |     async function highlight() {
43 |       if (!code) {
44 |         setHighlightedHtml("<pre><code></code></pre>")
45 |         return
46 |       }
47 | 
48 |       const html = await codeToHtml(code, { lang: language, theme })
49 |       setHighlightedHtml(html)
50 |     }
51 |     highlight()
52 |   }, [code, language, theme])
53 | 
54 |   const classNames = cn(
55 |     "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
56 |     className
57 |   )
58 | 
59 |   // SSR fallback: render plain code if not hydrated yet
60 |   return highlightedHtml ? (
61 |     <div
62 |       className={classNames}
63 |       dangerouslySetInnerHTML={{ __html: highlightedHtml }}
64 |       {...props}
65 |     />
66 |   ) : (
67 |     <div className={classNames} {...props}>
68 |       <pre>
69 |         <code>{code}</code>
70 |       </pre>
71 |     </div>
72 |   )
73 | }
74 | 
75 | export type CodeBlockGroupProps = React.HTMLAttributes<HTMLDivElement>
76 | 
77 | function CodeBlockGroup({
78 |   children,
79 |   className,
80 |   ...props
81 | }: CodeBlockGroupProps) {
82 |   return (
83 |     <div
84 |       className={cn("flex items-center justify-between", className)}
85 |       {...props}
86 |     >
87 |       {children}
88 |     </div>
89 |   )
90 | }
91 | 
92 | export { CodeBlockGroup, CodeBlockCode, CodeBlock }
93 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/code-block.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "../../../lib/utils";
 2 | import React, { useEffect, useState } from "react";
 3 | import { codeToHtml } from "shiki";
 4 | 
 5 | export type CodeBlockProps = {
 6 |   children?: React.ReactNode;
 7 |   className?: string;
 8 | } & React.HTMLProps<HTMLDivElement>;
 9 | 
10 | function CodeBlock({ children, className, ...props }: CodeBlockProps) {
11 |   return (
12 |     <div
13 |       className={cn(
14 |         "not-prose flex w-full flex-col overflow-clip border",
15 |         "border-border bg-card text-card-foreground rounded-xl",
16 |         className
17 |       )}
18 |       {...props}
19 |     >
20 |       {children}
21 |     </div>
22 |   );
23 | }
24 | 
25 | export type CodeBlockCodeProps = {
26 |   code: string;
27 |   language?: string;
28 |   theme?: string;
29 |   className?: string;
30 | } & React.HTMLProps<HTMLDivElement>;
31 | 
32 | function CodeBlockCode({
33 |   code,
34 |   language = "tsx",
35 |   theme = "github-light",
36 |   className,
37 |   ...props
38 | }: CodeBlockCodeProps) {
39 |   const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null);
40 | 
41 |   useEffect(() => {
42 |     async function highlight() {
43 |       if (!code) {
44 |         setHighlightedHtml("<pre><code></code></pre>");
45 |         return;
46 |       }
47 | 
48 |       const html = await codeToHtml(code, { lang: language, theme });
49 |       setHighlightedHtml(html);
50 |     }
51 |     highlight();
52 |   }, [code, language, theme]);
53 | 
54 |   const classNames = cn(
55 |     "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
56 |     className
57 |   );
58 | 
59 |   // SSR fallback: render plain code if not hydrated yet
60 |   return highlightedHtml ? (
61 |     <div
62 |       className={classNames}
63 |       dangerouslySetInnerHTML={{ __html: highlightedHtml }}
64 |       {...props}
65 |     />
66 |   ) : (
67 |     <div className={classNames} {...props}>
68 |       <pre>
69 |         <code>{code}</code>
70 |       </pre>
71 |     </div>
72 |   );
73 | }
74 | 
75 | export type CodeBlockGroupProps = React.HTMLAttributes<HTMLDivElement>;
76 | 
77 | function CodeBlockGroup({
78 |   children,
79 |   className,
80 |   ...props
81 | }: CodeBlockGroupProps) {
82 |   return (
83 |     <div
84 |       className={cn("flex items-center justify-between", className)}
85 |       {...props}
86 |     >
87 |       {children}
88 |     </div>
89 |   );
90 | }
91 | 
92 | export { CodeBlockGroup, CodeBlockCode, CodeBlock };
93 |

--------------------------------------------------------------------------------
/card-issue-agent/src/agent/constants.ts:
--------------------------------------------------------------------------------
 1 | export const ABOUT = `
 2 | This is a demo AI Agent chat that shows how to use Knock to power multi-channel human-in-the-loop messaging for your AI Agents. In this demo, we use Knock to power the approval process for a credit card issuing agent.
 3 | 
 4 | It's built with [Knock](https://knock.app/agent-toolkit), [Cloudflare Agents](https://developers.cloudflare.com/agents/), and the [Vercel AI SDK](https://sdk.vercel.ai/).
 5 | `;
 6 | 
 7 | export const WHAT_IS_KNOCK = `
 8 | [Knock](https://knock.app) is a developer tool for powering customer messaging. It's built as a set of primitives that you can use to power any kind of customer cross-channel messaging flow for your product or AI agent.
 9 | 
10 | You can sign up for a free Knock account at [knock.app](https://knock.app).
11 | `;
12 | 
13 | export const HOW_DOES_THIS_WORK = `
14 | When asked to explain how this demo works, here's the context. You do not have to use this verbatim, but you can use it as a guide to explain how the application works.
15 | 
16 | <explanation>
17 | This demo shows how to use Knock to power a cross-channel approval process for a credit card issuing agent. The [Knock workflow](https://docs.knock.app/concepts/workflows) will be invoked when you execute the "Issue card" tool, deferring the original tool call to wait for a human to approve or reject the card.
18 | 
19 | The Knock workflow will send an email and then the SMS with a link to approve or reject the card. Clicking the approve button in either message will route a request back to the worker with the approval context. The message approval will then be tracked _back_ to Knock as an "interaction" with the message ([docs](https://docs.knock.app/send-notifications/message-statuses)), sending through the approval result as metadata.
20 | 
21 | Knock will then send a "message.interacted" event as a webhook to the Cloudflare worker. The worker forwards the approval result back to the agent so that the agent can resume the tool call. At this point the card is issued as the deferred tool call is processed, and a message is sent to the originating user via the Agent process.
22 | 
23 | We use the [Knock Agent Toolkit](https://docs.knock.app/developer-tools/agent-toolkit/overview) to power the agent, and the [Knock Outbound Webhooks](https://docs.knock.app/developer-tools/outbound-webhooks/overview) to power the webhook integration. The Agent process keeps the state of which tool calls have been deferred and the cards that have been issued.
24 | </explanation>
25 | `;
26 | 
27 | export const BASE_URL = "http://localhost:5173";
28 |

--------------------------------------------------------------------------------
/card-issue-agent/src/agent/tools.ts:
--------------------------------------------------------------------------------
 1 | import { createKnockToolkit } from "@knocklabs/agent-toolkit/ai-sdk";
 2 | import { tool } from "ai";
 3 | import { z } from "zod";
 4 | 
 5 | import { AIAgent } from "./index";
 6 | import { issueCard } from "./api";
 7 | import { BASE_URL, HOW_DOES_THIS_WORK } from "./constants";
 8 | 
 9 | async function initializeToolkit(agent: AIAgent) {
10 |   const toolkit = await createKnockToolkit({
11 |     serviceToken: agent.env.KNOCK_SERVICE_TOKEN,
12 |     permissions: {
13 |       users: {
14 |         manage: true,
15 |       },
16 |     },
17 |     userId: agent.name,
18 |   });
19 | 
20 |   const issueCardTool = tool({
21 |     description:
22 |       "Issue a new credit card to a customer. Use this tool when you're requested to issue a new card. When this tool is used, the card will only be issued once an admin has approved the card.",
23 |     parameters: z.object({
24 |       customerId: z.string(),
25 |       name: z.string().describe("The name of the card. This is REQUIRED."),
26 |     }),
27 |     execute: async ({ customerId, name }) => {
28 |       const card = await issueCard(customerId, name);
29 |       agent.addIssuedCard(card);
30 |       return card;
31 |     },
32 |   });
33 | 
34 |   const listCardsTool = tool({
35 |     description:
36 |       "List all of the cards issued to the user. Use this tool when you're requested to list cards.",
37 |     parameters: z.object({
38 |       customerId: z.string(),
39 |     }),
40 |     execute: async ({ customerId }) => {
41 |       return agent.getIssuedCards();
42 |     },
43 |   });
44 | 
45 |   const explainTool = tool({
46 |     description:
47 |       "Explain how this demo works. Use this tool if you're asked to explain how this demo application works.",
48 |     parameters: z.object({}),
49 |     execute: async () => {
50 |       return HOW_DOES_THIS_WORK;
51 |     },
52 |   });
53 | 
54 |   const tools = toolkit.requireHumanInput(
55 |     { issueCard: issueCardTool },
56 |     {
57 |       onBeforeCallKnock: async (toolCall) => {
58 |         agent.setToolCallStatus(toolCall.id, "pending");
59 |       },
60 |       onAfterCallKnock: async (toolCall) => {
61 |         agent.setToolCallStatus(toolCall.id, "requested");
62 |       },
63 |       workflow: "approve-issued-card",
64 |       actor: {
65 |         id: agent.name,
66 |         email: `user_${agent.name}@example.com`,
67 |         name: "Jane Doe",
68 |       },
69 |       recipients: ["admin_user_1"],
70 |       metadata: {
71 |         approve_url: `${BASE_URL}/card-issued/approve`,
72 |         reject_url: `${BASE_URL}/card-issued/reject`,
73 |       },
74 |     }
75 |   );
76 | 
77 |   return {
78 |     toolkit,
79 |     tools: {
80 |       ...tools,
81 |       listCards: listCardsTool,
82 |       explainTool,
83 |       ...toolkit.getTools("users"),
84 |     },
85 |   };
86 | }
87 | 
88 | export { initializeToolkit };
89 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/markdown.tsx:
--------------------------------------------------------------------------------
  1 | import { cn } from "@/lib/utils"
  2 | import { marked } from "marked"
  3 | import { memo, useId, useMemo } from "react"
  4 | import ReactMarkdown, { Components } from "react-markdown"
  5 | import remarkGfm from "remark-gfm"
  6 | import { CodeBlock, CodeBlockCode } from "./code-block"
  7 | 
  8 | export type MarkdownProps = {
  9 |   children: string
 10 |   id?: string
 11 |   className?: string
 12 |   components?: Partial<Components>
 13 | }
 14 | 
 15 | function parseMarkdownIntoBlocks(markdown: string): string[] {
 16 |   const tokens = marked.lexer(markdown)
 17 |   return tokens.map((token) => token.raw)
 18 | }
 19 | 
 20 | function extractLanguage(className?: string): string {
 21 |   if (!className) return "plaintext"
 22 |   const match = className.match(/language-(\w+)/)
 23 |   return match ? match[1] : "plaintext"
 24 | }
 25 | 
 26 | const INITIAL_COMPONENTS: Partial<Components> = {
 27 |   code: function CodeComponent({ className, children, ...props }) {
 28 |     const isInline =
 29 |       !props.node?.position?.start.line ||
 30 |       props.node?.position?.start.line === props.node?.position?.end.line
 31 | 
 32 |     if (isInline) {
 33 |       return (
 34 |         <span
 35 |           className={cn(
 36 |             "bg-primary-foreground rounded-sm px-1 font-mono text-sm",
 37 |             className
 38 |           )}
 39 |           {...props}
 40 |         >
 41 |           {children}
 42 |         </span>
 43 |       )
 44 |     }
 45 | 
 46 |     const language = extractLanguage(className)
 47 | 
 48 |     return (
 49 |       <CodeBlock className={className}>
 50 |         <CodeBlockCode code={children as string} language={language} />
 51 |       </CodeBlock>
 52 |     )
 53 |   },
 54 |   pre: function PreComponent({ children }) {
 55 |     return <>{children}</>
 56 |   },
 57 | }
 58 | 
 59 | const MemoizedMarkdownBlock = memo(
 60 |   function MarkdownBlock({
 61 |     content,
 62 |     components = INITIAL_COMPONENTS,
 63 |   }: {
 64 |     content: string
 65 |     components?: Partial<Components>
 66 |   }) {
 67 |     return (
 68 |       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
 69 |         {content}
 70 |       </ReactMarkdown>
 71 |     )
 72 |   },
 73 |   function propsAreEqual(prevProps, nextProps) {
 74 |     return prevProps.content === nextProps.content
 75 |   }
 76 | )
 77 | 
 78 | MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock"
 79 | 
 80 | function MarkdownComponent({
 81 |   children,
 82 |   id,
 83 |   className,
 84 |   components = INITIAL_COMPONENTS,
 85 | }: MarkdownProps) {
 86 |   const generatedId = useId()
 87 |   const blockId = id ?? generatedId
 88 |   const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children])
 89 | 
 90 |   return (
 91 |     <div className={className}>
 92 |       {blocks.map((block, index) => (
 93 |         <MemoizedMarkdownBlock
 94 |           key={`${blockId}-block-${index}`}
 95 |           content={block}
 96 |           components={components}
 97 |         />
 98 |       ))}
 99 |     </div>
100 |   )
101 | }
102 | 
103 | const Markdown = memo(MarkdownComponent)
104 | Markdown.displayName = "Markdown"
105 | 
106 | export { Markdown }
107 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/markdown.tsx:
--------------------------------------------------------------------------------
  1 | import { cn } from "../../../lib/utils";
  2 | import { marked } from "marked";
  3 | import { memo, useId, useMemo } from "react";
  4 | import ReactMarkdown, { Components } from "react-markdown";
  5 | import remarkGfm from "remark-gfm";
  6 | import { CodeBlock, CodeBlockCode } from "./code-block";
  7 | 
  8 | export type MarkdownProps = {
  9 |   children: string;
 10 |   id?: string;
 11 |   className?: string;
 12 |   components?: Partial<Components>;
 13 | };
 14 | 
 15 | function parseMarkdownIntoBlocks(markdown: string): string[] {
 16 |   const tokens = marked.lexer(markdown);
 17 |   return tokens.map((token) => token.raw);
 18 | }
 19 | 
 20 | function extractLanguage(className?: string): string {
 21 |   if (!className) return "plaintext";
 22 |   const match = className.match(/language-(\w+)/);
 23 |   return match ? match[1] : "plaintext";
 24 | }
 25 | 
 26 | const INITIAL_COMPONENTS: Partial<Components> = {
 27 |   code: function CodeComponent({ className, children, ...props }) {
 28 |     const isInline =
 29 |       !props.node?.position?.start.line ||
 30 |       props.node?.position?.start.line === props.node?.position?.end.line;
 31 | 
 32 |     if (isInline) {
 33 |       return (
 34 |         <span
 35 |           className={cn(
 36 |             "bg-primary-foreground rounded-sm px-1 font-mono text-sm",
 37 |             className
 38 |           )}
 39 |           {...props}
 40 |         >
 41 |           {children}
 42 |         </span>
 43 |       );
 44 |     }
 45 | 
 46 |     const language = extractLanguage(className);
 47 | 
 48 |     return (
 49 |       <CodeBlock className={className}>
 50 |         <CodeBlockCode code={children as string} language={language} />
 51 |       </CodeBlock>
 52 |     );
 53 |   },
 54 |   pre: function PreComponent({ children }) {
 55 |     return <>{children}</>;
 56 |   },
 57 | };
 58 | 
 59 | const MemoizedMarkdownBlock = memo(
 60 |   function MarkdownBlock({
 61 |     content,
 62 |     components = INITIAL_COMPONENTS,
 63 |   }: {
 64 |     content: string;
 65 |     components?: Partial<Components>;
 66 |   }) {
 67 |     return (
 68 |       <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
 69 |         {content}
 70 |       </ReactMarkdown>
 71 |     );
 72 |   },
 73 |   function propsAreEqual(prevProps, nextProps) {
 74 |     return prevProps.content === nextProps.content;
 75 |   }
 76 | );
 77 | 
 78 | MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
 79 | 
 80 | function MarkdownComponent({
 81 |   children,
 82 |   id,
 83 |   className,
 84 |   components = INITIAL_COMPONENTS,
 85 | }: MarkdownProps) {
 86 |   const generatedId = useId();
 87 |   const blockId = id ?? generatedId;
 88 |   const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children]);
 89 | 
 90 |   return (
 91 |     <div className={className}>
 92 |       {blocks.map((block, index) => (
 93 |         <MemoizedMarkdownBlock
 94 |           key={`${blockId}-block-${index}`}
 95 |           content={block}
 96 |           components={components}
 97 |         />
 98 |       ))}
 99 |     </div>
100 |   );
101 | }
102 | 
103 | const Markdown = memo(MarkdownComponent);
104 | Markdown.displayName = "Markdown";
105 | 
106 | export { Markdown };
107 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/message.tsx:
--------------------------------------------------------------------------------
  1 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
  2 | import {
  3 |   Tooltip,
  4 |   TooltipContent,
  5 |   TooltipProvider,
  6 |   TooltipTrigger,
  7 | } from "@/components/ui/tooltip"
  8 | import { cn } from "@/lib/utils"
  9 | import { Markdown } from "./markdown"
 10 | 
 11 | export type MessageProps = {
 12 |   children: React.ReactNode
 13 |   className?: string
 14 | } & React.HTMLProps<HTMLDivElement>
 15 | 
 16 | const Message = ({ children, className, ...props }: MessageProps) => (
 17 |   <div className={cn("flex gap-3", className)} {...props}>
 18 |     {children}
 19 |   </div>
 20 | )
 21 | 
 22 | export type MessageAvatarProps = {
 23 |   src: string
 24 |   alt: string
 25 |   fallback?: string
 26 |   delayMs?: number
 27 |   className?: string
 28 | }
 29 | 
 30 | const MessageAvatar = ({
 31 |   src,
 32 |   alt,
 33 |   fallback,
 34 |   delayMs,
 35 |   className,
 36 | }: MessageAvatarProps) => {
 37 |   return (
 38 |     <Avatar className={cn("h-8 w-8 shrink-0", className)}>
 39 |       <AvatarImage src={src} alt={alt} />
 40 |       {fallback && (
 41 |         <AvatarFallback delayMs={delayMs}>{fallback}</AvatarFallback>
 42 |       )}
 43 |     </Avatar>
 44 |   )
 45 | }
 46 | 
 47 | export type MessageContentProps = {
 48 |   children: React.ReactNode
 49 |   markdown?: boolean
 50 |   className?: string
 51 | } & React.ComponentProps<typeof Markdown> &
 52 |   React.HTMLProps<HTMLDivElement>
 53 | 
 54 | const MessageContent = ({
 55 |   children,
 56 |   markdown = false,
 57 |   className,
 58 |   ...props
 59 | }: MessageContentProps) => {
 60 |   const classNames = cn(
 61 |     "rounded-lg p-2 text-foreground bg-secondary prose break-words whitespace-normal",
 62 |     className
 63 |   )
 64 | 
 65 |   return markdown ? (
 66 |     <Markdown className={classNames} {...props}>
 67 |       {children as string}
 68 |     </Markdown>
 69 |   ) : (
 70 |     <div className={classNames} {...props}>
 71 |       {children}
 72 |     </div>
 73 |   )
 74 | }
 75 | 
 76 | export type MessageActionsProps = {
 77 |   children: React.ReactNode
 78 |   className?: string
 79 | } & React.HTMLProps<HTMLDivElement>
 80 | 
 81 | const MessageActions = ({
 82 |   children,
 83 |   className,
 84 |   ...props
 85 | }: MessageActionsProps) => (
 86 |   <div
 87 |     className={cn("text-muted-foreground flex items-center gap-2", className)}
 88 |     {...props}
 89 |   >
 90 |     {children}
 91 |   </div>
 92 | )
 93 | 
 94 | export type MessageActionProps = {
 95 |   className?: string
 96 |   tooltip: React.ReactNode
 97 |   children: React.ReactNode
 98 |   side?: "top" | "bottom" | "left" | "right"
 99 | } & React.ComponentProps<typeof Tooltip>
100 | 
101 | const MessageAction = ({
102 |   tooltip,
103 |   children,
104 |   className,
105 |   side = "top",
106 |   ...props
107 | }: MessageActionProps) => {
108 |   return (
109 |     <TooltipProvider>
110 |       <Tooltip {...props}>
111 |         <TooltipTrigger asChild>{children}</TooltipTrigger>
112 |         <TooltipContent side={side} className={className}>
113 |           {tooltip}
114 |         </TooltipContent>
115 |       </Tooltip>
116 |     </TooltipProvider>
117 |   )
118 | }
119 | 
120 | export { Message, MessageAvatar, MessageContent, MessageActions, MessageAction }
121 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/message.tsx:
--------------------------------------------------------------------------------
  1 | import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
  2 | import {
  3 |   Tooltip,
  4 |   TooltipContent,
  5 |   TooltipProvider,
  6 |   TooltipTrigger,
  7 | } from "./tooltip";
  8 | import { cn } from "../../../lib/utils";
  9 | import { Markdown } from "./markdown";
 10 | 
 11 | export type MessageProps = {
 12 |   children: React.ReactNode;
 13 |   className?: string;
 14 | } & React.HTMLProps<HTMLDivElement>;
 15 | 
 16 | const Message = ({ children, className, ...props }: MessageProps) => (
 17 |   <div className={cn("flex gap-3", className)} {...props}>
 18 |     {children}
 19 |   </div>
 20 | );
 21 | 
 22 | export type MessageAvatarProps = {
 23 |   src: string;
 24 |   alt: string;
 25 |   fallback?: string;
 26 |   delayMs?: number;
 27 |   className?: string;
 28 | };
 29 | 
 30 | const MessageAvatar = ({
 31 |   src,
 32 |   alt,
 33 |   fallback,
 34 |   delayMs,
 35 |   className,
 36 | }: MessageAvatarProps) => {
 37 |   return (
 38 |     <Avatar className={cn("h-8 w-8 shrink-0", className)}>
 39 |       <AvatarImage src={src} alt={alt} />
 40 |       {fallback && (
 41 |         <AvatarFallback delayMs={delayMs}>{fallback}</AvatarFallback>
 42 |       )}
 43 |     </Avatar>
 44 |   );
 45 | };
 46 | 
 47 | export type MessageContentProps = {
 48 |   children: React.ReactNode;
 49 |   markdown?: boolean;
 50 |   className?: string;
 51 | } & React.ComponentProps<typeof Markdown> &
 52 |   React.HTMLProps<HTMLDivElement>;
 53 | 
 54 | const MessageContent = ({
 55 |   children,
 56 |   markdown = false,
 57 |   className,
 58 |   ...props
 59 | }: MessageContentProps) => {
 60 |   const classNames = cn(
 61 |     "rounded-lg p-2 text-foreground bg-secondary prose break-words whitespace-normal",
 62 |     className
 63 |   );
 64 | 
 65 |   return markdown ? (
 66 |     <Markdown className={classNames} {...props}>
 67 |       {children as string}
 68 |     </Markdown>
 69 |   ) : (
 70 |     <div className={classNames} {...props}>
 71 |       {children}
 72 |     </div>
 73 |   );
 74 | };
 75 | 
 76 | export type MessageActionsProps = {
 77 |   children: React.ReactNode;
 78 |   className?: string;
 79 | } & React.HTMLProps<HTMLDivElement>;
 80 | 
 81 | const MessageActions = ({
 82 |   children,
 83 |   className,
 84 |   ...props
 85 | }: MessageActionsProps) => (
 86 |   <div
 87 |     className={cn("text-muted-foreground flex items-center gap-2", className)}
 88 |     {...props}
 89 |   >
 90 |     {children}
 91 |   </div>
 92 | );
 93 | 
 94 | export type MessageActionProps = {
 95 |   className?: string;
 96 |   tooltip: React.ReactNode;
 97 |   children: React.ReactNode;
 98 |   side?: "top" | "bottom" | "left" | "right";
 99 | } & React.ComponentProps<typeof Tooltip>;
100 | 
101 | const MessageAction = ({
102 |   tooltip,
103 |   children,
104 |   className,
105 |   side = "top",
106 |   ...props
107 | }: MessageActionProps) => {
108 |   return (
109 |     <TooltipProvider>
110 |       <Tooltip {...props}>
111 |         <TooltipTrigger asChild>{children}</TooltipTrigger>
112 |         <TooltipContent side={side} className={className}>
113 |           {tooltip}
114 |         </TooltipContent>
115 |       </Tooltip>
116 |     </TooltipProvider>
117 |   );
118 | };
119 | 
120 | export {
121 |   Message,
122 |   MessageAvatar,
123 |   MessageContent,
124 |   MessageActions,
125 |   MessageAction,
126 | };
127 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/agent/index.ts:
--------------------------------------------------------------------------------
 1 | import { getAgentByName, routeAgentRequest } from "agents";
 2 | 
 3 | import { AIChatAgent } from "agents/ai-chat-agent";
 4 | import { openai } from "@ai-sdk/openai";
 5 | import { createDataStreamResponse, generateText, streamText } from "ai";
 6 | import { ExecutionContext } from "hono";
 7 | import { initializeToolkit } from "./tools";
 8 | import { responseToAssistantMessage } from "./helper";
 9 | 
10 | type Env = {
11 |   KNOCK_SERVICE_TOKEN: string;
12 |   AIAgent: AIAgent;
13 | };
14 | 
15 | export class AIAgent extends AIChatAgent {
16 |   env: Env;
17 | 
18 |   async onChatMessage(onFinish) {
19 |     const { tools } = await initializeToolkit(this.env);
20 | 
21 |     return createDataStreamResponse({
22 |       execute: async (dataStream) => {
23 |         try {
24 |           const stream = streamText({
25 |             model: openai("gpt-4o-mini"),
26 |             system:
27 |               "You are a helpful assistant that can answer questions and help with tasks.",
28 |             messages: this.messages,
29 |             onFinish, // call onFinish so that messages get saved
30 |             tools: tools,
31 |             maxSteps: 5,
32 |           });
33 | 
34 |           stream.mergeIntoDataStream(dataStream);
35 |         } catch (error) {
36 |           console.error(error);
37 |         }
38 |       },
39 |     });
40 |   }
41 | 
42 |   async handleIncomingWebhook(request: Request) {
43 |     const body = await request.json();
44 | 
45 |     const { toolkit } = await initializeToolkit(this.env);
46 |     const result = toolkit.handleMessageInteraction(body);
47 | 
48 |     if (!result) {
49 |       return new Response("Not found", { status: 404 });
50 |     }
51 | 
52 |     // This is one example on how to handle the result of the deferred tool execution by running a new LLM call with the result.
53 |     // You could also find the past tool call using the `toolCallResult.toolCallId` and append the result to the existing messages.
54 |     if (result.interaction.action === "#approve") {
55 |       const toolCallResult = await toolkit.resumeToolExecution(result.toolCall);
56 | 
57 |       const { response } = await generateText({
58 |         model: openai("gpt-4o-mini"),
59 |         prompt: `You are a helpful assistant that was asked to defer a tool execution to a human. The response from the tool execution is: ${JSON.stringify(
60 |           toolCallResult
61 |         )}.`,
62 |       });
63 | 
64 |       const message = responseToAssistantMessage(
65 |         response.messages[0],
66 |         result.toolCall,
67 |         toolCallResult
68 |       );
69 | 
70 |       this.persistMessages([...this.messages, message]);
71 |     }
72 | 
73 |     return Response.json({ status: "success" });
74 |   }
75 | }
76 | 
77 | export default {
78 |   async fetch(request: Request, env: Env, ctx: ExecutionContext) {
79 |     const url = new URL(request.url);
80 | 
81 |     if (url.pathname.startsWith("/incoming/webhook")) {
82 |       const existingAgent = await getAgentByName(env.AIAgent, "default");
83 | 
84 |       if (existingAgent) {
85 |         return await existingAgent.handleIncomingWebhook(request);
86 |       } else {
87 |         return new Response("Not found", { status: 404 });
88 |       }
89 |     }
90 | 
91 |     return (
92 |       // Route the request to our agent or return 404 if not found
93 |       (await routeAgentRequest(request, env)) ||
94 |       new Response("Not found", { status: 404 })
95 |     );
96 |   },
97 | };
98 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/prompt-suggestion.tsx:
--------------------------------------------------------------------------------
  1 | import { Button, buttonVariants } from "@/components/ui/button"
  2 | import { cn } from "@/lib/utils"
  3 | import { VariantProps } from "class-variance-authority"
  4 | 
  5 | export type PromptSuggestionProps = {
  6 |   children: React.ReactNode
  7 |   variant?: VariantProps<typeof buttonVariants>["variant"]
  8 |   size?: VariantProps<typeof buttonVariants>["size"]
  9 |   className?: string
 10 |   highlight?: string
 11 | } & React.ButtonHTMLAttributes<HTMLButtonElement>
 12 | 
 13 | function PromptSuggestion({
 14 |   children,
 15 |   variant,
 16 |   size,
 17 |   className,
 18 |   highlight,
 19 |   ...props
 20 | }: PromptSuggestionProps) {
 21 |   const isHighlightMode = highlight !== undefined && highlight.trim() !== ""
 22 |   const content = typeof children === "string" ? children : ""
 23 | 
 24 |   if (!isHighlightMode) {
 25 |     return (
 26 |       <Button
 27 |         variant={variant || "outline"}
 28 |         size={size || "lg"}
 29 |         className={cn("rounded-full", className)}
 30 |         {...props}
 31 |       >
 32 |         {children}
 33 |       </Button>
 34 |     )
 35 |   }
 36 | 
 37 |   if (!content) {
 38 |     return (
 39 |       <Button
 40 |         variant={variant || "ghost"}
 41 |         size={size || "sm"}
 42 |         className={cn(
 43 |           "w-full cursor-pointer justify-start rounded-xl py-2",
 44 |           "hover:bg-accent",
 45 |           className
 46 |         )}
 47 |         {...props}
 48 |       >
 49 |         {children}
 50 |       </Button>
 51 |     )
 52 |   }
 53 | 
 54 |   const trimmedHighlight = highlight.trim()
 55 |   const contentLower = content.toLowerCase()
 56 |   const highlightLower = trimmedHighlight.toLowerCase()
 57 |   const shouldHighlight = contentLower.includes(highlightLower)
 58 | 
 59 |   return (
 60 |     <Button
 61 |       variant={variant || "ghost"}
 62 |       size={size || "sm"}
 63 |       className={cn(
 64 |         "w-full cursor-pointer justify-start gap-0 rounded-xl py-2",
 65 |         "hover:bg-accent",
 66 |         className
 67 |       )}
 68 |       {...props}
 69 |     >
 70 |       {shouldHighlight ? (
 71 |         (() => {
 72 |           const index = contentLower.indexOf(highlightLower)
 73 |           if (index === -1)
 74 |             return (
 75 |               <span className="text-muted-foreground whitespace-pre-wrap">
 76 |                 {content}
 77 |               </span>
 78 |             )
 79 | 
 80 |           const actualHighlightedText = content.substring(
 81 |             index,
 82 |             index + highlightLower.length
 83 |           )
 84 | 
 85 |           const before = content.substring(0, index)
 86 |           const after = content.substring(index + actualHighlightedText.length)
 87 | 
 88 |           return (
 89 |             <>
 90 |               {before && (
 91 |                 <span className="text-muted-foreground whitespace-pre-wrap">
 92 |                   {before}
 93 |                 </span>
 94 |               )}
 95 |               <span className="text-primary font-medium whitespace-pre-wrap">
 96 |                 {actualHighlightedText}
 97 |               </span>
 98 |               {after && (
 99 |                 <span className="text-muted-foreground whitespace-pre-wrap">
100 |                   {after}
101 |                 </span>
102 |               )}
103 |             </>
104 |           )
105 |         })()
106 |       ) : (
107 |         <span className="text-muted-foreground whitespace-pre-wrap">
108 |           {content}
109 |         </span>
110 |       )}
111 |     </Button>
112 |   )
113 | }
114 | 
115 | export { PromptSuggestion }
116 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/prompt-suggestion.tsx:
--------------------------------------------------------------------------------
  1 | import { Button, buttonVariants } from "./button";
  2 | import { cn } from "../../../lib/utils";
  3 | import { VariantProps } from "class-variance-authority";
  4 | 
  5 | export type PromptSuggestionProps = {
  6 |   children: React.ReactNode;
  7 |   variant?: VariantProps<typeof buttonVariants>["variant"];
  8 |   size?: VariantProps<typeof buttonVariants>["size"];
  9 |   className?: string;
 10 |   highlight?: string;
 11 | } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 12 | 
 13 | function PromptSuggestion({
 14 |   children,
 15 |   variant,
 16 |   size,
 17 |   className,
 18 |   highlight,
 19 |   ...props
 20 | }: PromptSuggestionProps) {
 21 |   const isHighlightMode = highlight !== undefined && highlight.trim() !== "";
 22 |   const content = typeof children === "string" ? children : "";
 23 | 
 24 |   if (!isHighlightMode) {
 25 |     return (
 26 |       <Button
 27 |         variant={variant || "outline"}
 28 |         size={size || "lg"}
 29 |         className={cn("rounded-full", className)}
 30 |         {...props}
 31 |       >
 32 |         {children}
 33 |       </Button>
 34 |     );
 35 |   }
 36 | 
 37 |   if (!content) {
 38 |     return (
 39 |       <Button
 40 |         variant={variant || "ghost"}
 41 |         size={size || "sm"}
 42 |         className={cn(
 43 |           "w-full cursor-pointer justify-start rounded-xl py-2",
 44 |           "hover:bg-accent",
 45 |           className
 46 |         )}
 47 |         {...props}
 48 |       >
 49 |         {children}
 50 |       </Button>
 51 |     );
 52 |   }
 53 | 
 54 |   const trimmedHighlight = highlight.trim();
 55 |   const contentLower = content.toLowerCase();
 56 |   const highlightLower = trimmedHighlight.toLowerCase();
 57 |   const shouldHighlight = contentLower.includes(highlightLower);
 58 | 
 59 |   return (
 60 |     <Button
 61 |       variant={variant || "ghost"}
 62 |       size={size || "sm"}
 63 |       className={cn(
 64 |         "w-full cursor-pointer justify-start gap-0 rounded-xl py-2",
 65 |         "hover:bg-accent",
 66 |         className
 67 |       )}
 68 |       {...props}
 69 |     >
 70 |       {shouldHighlight ? (
 71 |         (() => {
 72 |           const index = contentLower.indexOf(highlightLower);
 73 |           if (index === -1)
 74 |             return (
 75 |               <span className="text-muted-foreground whitespace-pre-wrap">
 76 |                 {content}
 77 |               </span>
 78 |             );
 79 | 
 80 |           const actualHighlightedText = content.substring(
 81 |             index,
 82 |             index + highlightLower.length
 83 |           );
 84 | 
 85 |           const before = content.substring(0, index);
 86 |           const after = content.substring(index + actualHighlightedText.length);
 87 | 
 88 |           return (
 89 |             <>
 90 |               {before && (
 91 |                 <span className="text-muted-foreground whitespace-pre-wrap">
 92 |                   {before}
 93 |                 </span>
 94 |               )}
 95 |               <span className="text-primary font-medium whitespace-pre-wrap">
 96 |                 {actualHighlightedText}
 97 |               </span>
 98 |               {after && (
 99 |                 <span className="text-muted-foreground whitespace-pre-wrap">
100 |                   {after}
101 |                 </span>
102 |               )}
103 |             </>
104 |           );
105 |         })()
106 |       ) : (
107 |         <span className="text-muted-foreground whitespace-pre-wrap">
108 |           {content}
109 |         </span>
110 |       )}
111 |     </Button>
112 |   );
113 | }
114 | 
115 | export { PromptSuggestion };
116 |

--------------------------------------------------------------------------------
/card-issue-agent/src/agent/index.ts:
--------------------------------------------------------------------------------
  1 | import { AIChatAgent } from "agents/ai-chat-agent";
  2 | import { openai } from "@ai-sdk/openai";
  3 | import { createDataStreamResponse, generateText, streamText } from "ai";
  4 | 
  5 | import { initializeToolkit } from "./tools";
  6 | import { responseToAssistantMessage } from "./helper";
  7 | import app from "./app";
  8 | import { IssuedCard } from "./api";
  9 | import { ABOUT, WHAT_IS_KNOCK } from "./constants";
 10 | 
 11 | export type Env = {
 12 |   KNOCK_SERVICE_TOKEN: string;
 13 |   KNOCK_API_KEY: string;
 14 |   AIAgent: AIAgent;
 15 | };
 16 | 
 17 | export interface AgentState {
 18 |   issuedCards: IssuedCard[];
 19 |   toolCalls: Record<string, "pending" | "requested" | "approved" | "rejected">;
 20 | }
 21 | 
 22 | export class AIAgent extends AIChatAgent<Env, AgentState> {
 23 |   env: Env;
 24 | 
 25 |   initialState: AgentState = {
 26 |     issuedCards: [],
 27 |     toolCalls: {},
 28 |   };
 29 | 
 30 |   async onChatMessage(onFinish) {
 31 |     const { tools } = await initializeToolkit(this);
 32 | 
 33 |     return createDataStreamResponse({
 34 |       execute: async (dataStream) => {
 35 |         try {
 36 |           const stream = streamText({
 37 |             model: openai("gpt-4o-mini"),
 38 |             system: `You are a helpful assistant for a financial services company. You help customers with credit card issuing. The current user is ${this.name}.
 39 |             
 40 |             When you're asked about what this application is, you should respond with: ${ABOUT}.
 41 |             
 42 |             When you're asked about what Knock is, you should respond with: ${WHAT_IS_KNOCK}.`,
 43 |             messages: this.messages,
 44 |             onFinish, // call onFinish so that messages get saved
 45 |             tools: tools,
 46 |             maxSteps: 5,
 47 |           });
 48 | 
 49 |           stream.mergeIntoDataStream(dataStream);
 50 |         } catch (error) {
 51 |           console.error(error);
 52 |         }
 53 |       },
 54 |     });
 55 |   }
 56 | 
 57 |   // API for storing state on this agent process
 58 | 
 59 |   resetState() {
 60 |     this.setState(this.initialState);
 61 |   }
 62 | 
 63 |   getIssuedCards() {
 64 |     return this.state.issuedCards;
 65 |   }
 66 | 
 67 |   setToolCallStatus(
 68 |     toolCallId: string,
 69 |     status: "pending" | "requested" | "approved" | "rejected"
 70 |   ) {
 71 |     this.setState({
 72 |       ...this.state,
 73 |       toolCalls: { ...this.state.toolCalls, [toolCallId]: status },
 74 |     });
 75 |   }
 76 | 
 77 |   addIssuedCard(card: IssuedCard) {
 78 |     this.setState({
 79 |       ...this.state,
 80 |       issuedCards: [...this.state.issuedCards, card],
 81 |     });
 82 |   }
 83 | 
 84 |   async handleIncomingWebhook(body: any) {
 85 |     const { toolkit } = await initializeToolkit(this);
 86 | 
 87 |     const result = toolkit.handleMessageInteraction(body);
 88 | 
 89 |     if (!result) {
 90 |       return { error: "No result" };
 91 |     }
 92 | 
 93 |     const toolCallId = result.toolCall.id;
 94 | 
 95 |     // Guard against duplicate tool call requests
 96 |     if (this.state.toolCalls[toolCallId] !== "requested") {
 97 |       return { error: "Tool call is not requested" };
 98 |     }
 99 | 
100 |     if (result.interaction.status === "approved") {
101 |       const toolCallResult = await toolkit.resumeToolExecution(result.toolCall);
102 | 
103 |       this.setToolCallStatus(toolCallId, "approved");
104 | 
105 |       const { response } = await generateText({
106 |         model: openai("gpt-4o-mini"),
107 |         prompt: `You were asked to issue a card for a customer. The card is now approved. The result was: ${JSON.stringify(
108 |           toolCallResult
109 |         )}.`,
110 |       });
111 | 
112 |       const message = responseToAssistantMessage(
113 |         response.messages[0],
114 |         result.toolCall,
115 |         toolCallResult
116 |       );
117 | 
118 |       this.persistMessages([...this.messages, message]);
119 |     }
120 | 
121 |     return { status: "success" };
122 |   }
123 | }
124 | 
125 | export default app;
126 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/client/index.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | :root {
  7 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  8 |   line-height: 1.5;
  9 |   font-weight: 400;
 10 |   --radius: 0.625rem;
 11 |   --background: oklch(1 0 0);
 12 |   --foreground: oklch(0.145 0 0);
 13 |   --card: oklch(1 0 0);
 14 |   --card-foreground: oklch(0.145 0 0);
 15 |   --popover: oklch(1 0 0);
 16 |   --popover-foreground: oklch(0.145 0 0);
 17 |   --primary: oklch(0.205 0 0);
 18 |   --primary-foreground: oklch(0.985 0 0);
 19 |   --secondary: oklch(0.97 0 0);
 20 |   --secondary-foreground: oklch(0.205 0 0);
 21 |   --muted: oklch(0.97 0 0);
 22 |   --muted-foreground: oklch(0.556 0 0);
 23 |   --accent: oklch(0.97 0 0);
 24 |   --accent-foreground: oklch(0.205 0 0);
 25 |   --destructive: oklch(0.577 0.245 27.325);
 26 |   --border: oklch(0.922 0 0);
 27 |   --input: oklch(0.922 0 0);
 28 |   --ring: oklch(0.708 0 0);
 29 |   --chart-1: oklch(0.646 0.222 41.116);
 30 |   --chart-2: oklch(0.6 0.118 184.704);
 31 |   --chart-3: oklch(0.398 0.07 227.392);
 32 |   --chart-4: oklch(0.828 0.189 84.429);
 33 |   --chart-5: oklch(0.769 0.188 70.08);
 34 |   --sidebar: oklch(0.985 0 0);
 35 |   --sidebar-foreground: oklch(0.145 0 0);
 36 |   --sidebar-primary: oklch(0.205 0 0);
 37 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 38 |   --sidebar-accent: oklch(0.97 0 0);
 39 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 40 |   --sidebar-border: oklch(0.922 0 0);
 41 |   --sidebar-ring: oklch(0.708 0 0);
 42 | }
 43 | 
 44 | @theme inline {
 45 |   --radius-sm: calc(var(--radius) - 4px);
 46 |   --radius-md: calc(var(--radius) - 2px);
 47 |   --radius-lg: var(--radius);
 48 |   --radius-xl: calc(var(--radius) + 4px);
 49 |   --color-background: var(--background);
 50 |   --color-foreground: var(--foreground);
 51 |   --color-card: var(--card);
 52 |   --color-card-foreground: var(--card-foreground);
 53 |   --color-popover: var(--popover);
 54 |   --color-popover-foreground: var(--popover-foreground);
 55 |   --color-primary: var(--primary);
 56 |   --color-primary-foreground: var(--primary-foreground);
 57 |   --color-secondary: var(--secondary);
 58 |   --color-secondary-foreground: var(--secondary-foreground);
 59 |   --color-muted: var(--muted);
 60 |   --color-muted-foreground: var(--muted-foreground);
 61 |   --color-accent: var(--accent);
 62 |   --color-accent-foreground: var(--accent-foreground);
 63 |   --color-destructive: var(--destructive);
 64 |   --color-border: var(--border);
 65 |   --color-input: var(--input);
 66 |   --color-ring: var(--ring);
 67 |   --color-chart-1: var(--chart-1);
 68 |   --color-chart-2: var(--chart-2);
 69 |   --color-chart-3: var(--chart-3);
 70 |   --color-chart-4: var(--chart-4);
 71 |   --color-chart-5: var(--chart-5);
 72 |   --color-sidebar: var(--sidebar);
 73 |   --color-sidebar-foreground: var(--sidebar-foreground);
 74 |   --color-sidebar-primary: var(--sidebar-primary);
 75 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 76 |   --color-sidebar-accent: var(--sidebar-accent);
 77 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 78 |   --color-sidebar-border: var(--sidebar-border);
 79 |   --color-sidebar-ring: var(--sidebar-ring);
 80 | }
 81 | 
 82 | .dark {
 83 |   --background: oklch(0.145 0 0);
 84 |   --foreground: oklch(0.985 0 0);
 85 |   --card: oklch(0.205 0 0);
 86 |   --card-foreground: oklch(0.985 0 0);
 87 |   --popover: oklch(0.205 0 0);
 88 |   --popover-foreground: oklch(0.985 0 0);
 89 |   --primary: oklch(0.922 0 0);
 90 |   --primary-foreground: oklch(0.205 0 0);
 91 |   --secondary: oklch(0.269 0 0);
 92 |   --secondary-foreground: oklch(0.985 0 0);
 93 |   --muted: oklch(0.269 0 0);
 94 |   --muted-foreground: oklch(0.708 0 0);
 95 |   --accent: oklch(0.269 0 0);
 96 |   --accent-foreground: oklch(0.985 0 0);
 97 |   --destructive: oklch(0.704 0.191 22.216);
 98 |   --border: oklch(1 0 0 / 10%);
 99 |   --input: oklch(1 0 0 / 15%);
100 |   --ring: oklch(0.556 0 0);
101 |   --chart-1: oklch(0.488 0.243 264.376);
102 |   --chart-2: oklch(0.696 0.17 162.48);
103 |   --chart-3: oklch(0.769 0.188 70.08);
104 |   --chart-4: oklch(0.627 0.265 303.9);
105 |   --chart-5: oklch(0.645 0.246 16.439);
106 |   --sidebar: oklch(0.205 0 0);
107 |   --sidebar-foreground: oklch(0.985 0 0);
108 |   --sidebar-primary: oklch(0.488 0.243 264.376);
109 |   --sidebar-primary-foreground: oklch(0.985 0 0);
110 |   --sidebar-accent: oklch(0.269 0 0);
111 |   --sidebar-accent-foreground: oklch(0.985 0 0);
112 |   --sidebar-border: oklch(1 0 0 / 10%);
113 |   --sidebar-ring: oklch(0.556 0 0);
114 | }
115 | 
116 | @layer base {
117 |   * {
118 |     @apply border-border outline-ring/50;
119 |   }
120 |   body {
121 |     @apply bg-background text-foreground;
122 |   }
123 | }
124 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/index.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | :root {
  7 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  8 |   line-height: 1.5;
  9 |   font-weight: 400;
 10 |   --radius: 0.625rem;
 11 |   --background: oklch(1 0 0);
 12 |   --foreground: oklch(0.145 0 0);
 13 |   --card: oklch(1 0 0);
 14 |   --card-foreground: oklch(0.145 0 0);
 15 |   --popover: oklch(1 0 0);
 16 |   --popover-foreground: oklch(0.145 0 0);
 17 |   --primary: oklch(0.205 0 0);
 18 |   --primary-foreground: oklch(0.985 0 0);
 19 |   --secondary: oklch(0.97 0 0);
 20 |   --secondary-foreground: oklch(0.205 0 0);
 21 |   --muted: oklch(0.97 0 0);
 22 |   --muted-foreground: oklch(0.556 0 0);
 23 |   --accent: oklch(0.97 0 0);
 24 |   --accent-foreground: oklch(0.205 0 0);
 25 |   --destructive: oklch(0.577 0.245 27.325);
 26 |   --border: oklch(0.922 0 0);
 27 |   --input: oklch(0.922 0 0);
 28 |   --ring: oklch(0.708 0 0);
 29 |   --chart-1: oklch(0.646 0.222 41.116);
 30 |   --chart-2: oklch(0.6 0.118 184.704);
 31 |   --chart-3: oklch(0.398 0.07 227.392);
 32 |   --chart-4: oklch(0.828 0.189 84.429);
 33 |   --chart-5: oklch(0.769 0.188 70.08);
 34 |   --sidebar: oklch(0.985 0 0);
 35 |   --sidebar-foreground: oklch(0.145 0 0);
 36 |   --sidebar-primary: oklch(0.205 0 0);
 37 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 38 |   --sidebar-accent: oklch(0.97 0 0);
 39 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 40 |   --sidebar-border: oklch(0.922 0 0);
 41 |   --sidebar-ring: oklch(0.708 0 0);
 42 | }
 43 | 
 44 | @theme inline {
 45 |   --radius-sm: calc(var(--radius) - 4px);
 46 |   --radius-md: calc(var(--radius) - 2px);
 47 |   --radius-lg: var(--radius);
 48 |   --radius-xl: calc(var(--radius) + 4px);
 49 |   --color-background: var(--background);
 50 |   --color-foreground: var(--foreground);
 51 |   --color-card: var(--card);
 52 |   --color-card-foreground: var(--card-foreground);
 53 |   --color-popover: var(--popover);
 54 |   --color-popover-foreground: var(--popover-foreground);
 55 |   --color-primary: var(--primary);
 56 |   --color-primary-foreground: var(--primary-foreground);
 57 |   --color-secondary: var(--secondary);
 58 |   --color-secondary-foreground: var(--secondary-foreground);
 59 |   --color-muted: var(--muted);
 60 |   --color-muted-foreground: var(--muted-foreground);
 61 |   --color-accent: var(--accent);
 62 |   --color-accent-foreground: var(--accent-foreground);
 63 |   --color-destructive: var(--destructive);
 64 |   --color-border: var(--border);
 65 |   --color-input: var(--input);
 66 |   --color-ring: var(--ring);
 67 |   --color-chart-1: var(--chart-1);
 68 |   --color-chart-2: var(--chart-2);
 69 |   --color-chart-3: var(--chart-3);
 70 |   --color-chart-4: var(--chart-4);
 71 |   --color-chart-5: var(--chart-5);
 72 |   --color-sidebar: var(--sidebar);
 73 |   --color-sidebar-foreground: var(--sidebar-foreground);
 74 |   --color-sidebar-primary: var(--sidebar-primary);
 75 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 76 |   --color-sidebar-accent: var(--sidebar-accent);
 77 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 78 |   --color-sidebar-border: var(--sidebar-border);
 79 |   --color-sidebar-ring: var(--sidebar-ring);
 80 | }
 81 | 
 82 | .dark {
 83 |   --background: oklch(0.145 0 0);
 84 |   --foreground: oklch(0.985 0 0);
 85 |   --card: oklch(0.205 0 0);
 86 |   --card-foreground: oklch(0.985 0 0);
 87 |   --popover: oklch(0.205 0 0);
 88 |   --popover-foreground: oklch(0.985 0 0);
 89 |   --primary: oklch(0.922 0 0);
 90 |   --primary-foreground: oklch(0.205 0 0);
 91 |   --secondary: oklch(0.269 0 0);
 92 |   --secondary-foreground: oklch(0.985 0 0);
 93 |   --muted: oklch(0.269 0 0);
 94 |   --muted-foreground: oklch(0.708 0 0);
 95 |   --accent: oklch(0.269 0 0);
 96 |   --accent-foreground: oklch(0.985 0 0);
 97 |   --destructive: oklch(0.704 0.191 22.216);
 98 |   --border: oklch(1 0 0 / 10%);
 99 |   --input: oklch(1 0 0 / 15%);
100 |   --ring: oklch(0.556 0 0);
101 |   --chart-1: oklch(0.488 0.243 264.376);
102 |   --chart-2: oklch(0.696 0.17 162.48);
103 |   --chart-3: oklch(0.769 0.188 70.08);
104 |   --chart-4: oklch(0.627 0.265 303.9);
105 |   --chart-5: oklch(0.645 0.246 16.439);
106 |   --sidebar: oklch(0.205 0 0);
107 |   --sidebar-foreground: oklch(0.985 0 0);
108 |   --sidebar-primary: oklch(0.488 0.243 264.376);
109 |   --sidebar-primary-foreground: oklch(0.985 0 0);
110 |   --sidebar-accent: oklch(0.269 0 0);
111 |   --sidebar-accent-foreground: oklch(0.985 0 0);
112 |   --sidebar-border: oklch(1 0 0 / 10%);
113 |   --sidebar-ring: oklch(0.556 0 0);
114 | }
115 | 
116 | @layer base {
117 |   * {
118 |     @apply border-border outline-ring/50;
119 |   }
120 |   body {
121 |     @apply bg-background text-foreground;
122 |   }
123 | }
124 | 
125 | .chat-message-content p,
126 | .chat-message-content ul,
127 | .chat-message-content ol {
128 |   margin-bottom: 1rem;
129 | }
130 | 
131 | .chat-message-content li {
132 |   margin-bottom: 0.5rem;
133 | }
134 | 
135 | .chat-message-content li > p {
136 |   margin-bottom: 0.5rem;
137 | }
138 | 
139 | .chat-message-content p:last-child {
140 |   margin-bottom: 0;
141 | }
142 | 
143 | .chat-message-content a {
144 |   text-decoration: underline;
145 | }
146 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/prompt-input.tsx:
--------------------------------------------------------------------------------
  1 | import { Textarea } from "@/components/ui/textarea"
  2 | import {
  3 |   Tooltip,
  4 |   TooltipContent,
  5 |   TooltipProvider,
  6 |   TooltipTrigger,
  7 | } from "@/components/ui/tooltip"
  8 | import { cn } from "@/lib/utils"
  9 | import React, {
 10 |   createContext,
 11 |   useContext,
 12 |   useEffect,
 13 |   useRef,
 14 |   useState,
 15 | } from "react"
 16 | 
 17 | type PromptInputContextType = {
 18 |   isLoading: boolean
 19 |   value: string
 20 |   setValue: (value: string) => void
 21 |   maxHeight: number | string
 22 |   onSubmit?: () => void
 23 |   disabled?: boolean
 24 | }
 25 | 
 26 | const PromptInputContext = createContext<PromptInputContextType>({
 27 |   isLoading: false,
 28 |   value: "",
 29 |   setValue: () => {},
 30 |   maxHeight: 240,
 31 |   onSubmit: undefined,
 32 |   disabled: false,
 33 | })
 34 | 
 35 | function usePromptInput() {
 36 |   const context = useContext(PromptInputContext)
 37 |   if (!context) {
 38 |     throw new Error("usePromptInput must be used within a PromptInput")
 39 |   }
 40 |   return context
 41 | }
 42 | 
 43 | type PromptInputProps = {
 44 |   isLoading?: boolean
 45 |   value?: string
 46 |   onValueChange?: (value: string) => void
 47 |   maxHeight?: number | string
 48 |   onSubmit?: () => void
 49 |   children: React.ReactNode
 50 |   className?: string
 51 | }
 52 | 
 53 | function PromptInput({
 54 |   className,
 55 |   isLoading = false,
 56 |   maxHeight = 240,
 57 |   value,
 58 |   onValueChange,
 59 |   onSubmit,
 60 |   children,
 61 | }: PromptInputProps) {
 62 |   const [internalValue, setInternalValue] = useState(value || "")
 63 | 
 64 |   const handleChange = (newValue: string) => {
 65 |     setInternalValue(newValue)
 66 |     onValueChange?.(newValue)
 67 |   }
 68 | 
 69 |   return (
 70 |     <TooltipProvider>
 71 |       <PromptInputContext.Provider
 72 |         value={{
 73 |           isLoading,
 74 |           value: value ?? internalValue,
 75 |           setValue: onValueChange ?? handleChange,
 76 |           maxHeight,
 77 |           onSubmit,
 78 |         }}
 79 |       >
 80 |         <div
 81 |           className={cn(
 82 |             "border-input bg-background rounded-3xl border p-2 shadow-xs",
 83 |             className
 84 |           )}
 85 |         >
 86 |           {children}
 87 |         </div>
 88 |       </PromptInputContext.Provider>
 89 |     </TooltipProvider>
 90 |   )
 91 | }
 92 | 
 93 | export type PromptInputTextareaProps = {
 94 |   disableAutosize?: boolean
 95 | } & React.ComponentProps<typeof Textarea>
 96 | 
 97 | function PromptInputTextarea({
 98 |   className,
 99 |   onKeyDown,
100 |   disableAutosize = false,
101 |   ...props
102 | }: PromptInputTextareaProps) {
103 |   const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput()
104 |   const textareaRef = useRef<HTMLTextAreaElement>(null)
105 | 
106 |   useEffect(() => {
107 |     if (disableAutosize) return
108 | 
109 |     if (!textareaRef.current) return
110 |     textareaRef.current.style.height = "auto"
111 |     textareaRef.current.style.height =
112 |       typeof maxHeight === "number"
113 |         ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`
114 |         : `min(${textareaRef.current.scrollHeight}px, ${maxHeight})`
115 |   }, [value, maxHeight, disableAutosize])
116 | 
117 |   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
118 |     if (e.key === "Enter" && !e.shiftKey) {
119 |       e.preventDefault()
120 |       onSubmit?.()
121 |     }
122 |     onKeyDown?.(e)
123 |   }
124 | 
125 |   return (
126 |     <Textarea
127 |       ref={textareaRef}
128 |       value={value}
129 |       onChange={(e) => setValue(e.target.value)}
130 |       onKeyDown={handleKeyDown}
131 |       className={cn(
132 |         "text-primary min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
133 |         className
134 |       )}
135 |       rows={1}
136 |       disabled={disabled}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | 
142 | type PromptInputActionsProps = React.HTMLAttributes<HTMLDivElement>
143 | 
144 | function PromptInputActions({
145 |   children,
146 |   className,
147 |   ...props
148 | }: PromptInputActionsProps) {
149 |   return (
150 |     <div className={cn("flex items-center gap-2", className)} {...props}>
151 |       {children}
152 |     </div>
153 |   )
154 | }
155 | 
156 | type PromptInputActionProps = {
157 |   className?: string
158 |   tooltip: React.ReactNode
159 |   children: React.ReactNode
160 |   side?: "top" | "bottom" | "left" | "right"
161 | } & React.ComponentProps<typeof Tooltip>
162 | 
163 | function PromptInputAction({
164 |   tooltip,
165 |   children,
166 |   className,
167 |   side = "top",
168 |   ...props
169 | }: PromptInputActionProps) {
170 |   const { disabled } = usePromptInput()
171 | 
172 |   return (
173 |     <Tooltip {...props}>
174 |       <TooltipTrigger asChild disabled={disabled}>
175 |         {children}
176 |       </TooltipTrigger>
177 |       <TooltipContent side={side} className={className}>
178 |         {tooltip}
179 |       </TooltipContent>
180 |     </Tooltip>
181 |   )
182 | }
183 | 
184 | export {
185 |   PromptInput,
186 |   PromptInputTextarea,
187 |   PromptInputActions,
188 |   PromptInputAction,
189 | }
190 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/prompt-input.tsx:
--------------------------------------------------------------------------------
  1 | import { Textarea } from "./textarea";
  2 | import {
  3 |   Tooltip,
  4 |   TooltipContent,
  5 |   TooltipProvider,
  6 |   TooltipTrigger,
  7 | } from "./tooltip";
  8 | import { cn } from "../../../lib/utils";
  9 | import React, {
 10 |   createContext,
 11 |   useContext,
 12 |   useEffect,
 13 |   useRef,
 14 |   useState,
 15 | } from "react";
 16 | 
 17 | type PromptInputContextType = {
 18 |   isLoading: boolean;
 19 |   value: string;
 20 |   setValue: (value: string) => void;
 21 |   maxHeight: number | string;
 22 |   onSubmit?: () => void;
 23 |   disabled?: boolean;
 24 | };
 25 | 
 26 | const PromptInputContext = createContext<PromptInputContextType>({
 27 |   isLoading: false,
 28 |   value: "",
 29 |   setValue: () => {},
 30 |   maxHeight: 240,
 31 |   onSubmit: undefined,
 32 |   disabled: false,
 33 | });
 34 | 
 35 | function usePromptInput() {
 36 |   const context = useContext(PromptInputContext);
 37 |   if (!context) {
 38 |     throw new Error("usePromptInput must be used within a PromptInput");
 39 |   }
 40 |   return context;
 41 | }
 42 | 
 43 | type PromptInputProps = {
 44 |   isLoading?: boolean;
 45 |   value?: string;
 46 |   onValueChange?: (value: string) => void;
 47 |   maxHeight?: number | string;
 48 |   onSubmit?: () => void;
 49 |   children: React.ReactNode;
 50 |   className?: string;
 51 | };
 52 | 
 53 | function PromptInput({
 54 |   className,
 55 |   isLoading = false,
 56 |   maxHeight = 240,
 57 |   value,
 58 |   onValueChange,
 59 |   onSubmit,
 60 |   children,
 61 | }: PromptInputProps) {
 62 |   const [internalValue, setInternalValue] = useState(value || "");
 63 | 
 64 |   const handleChange = (newValue: string) => {
 65 |     setInternalValue(newValue);
 66 |     onValueChange?.(newValue);
 67 |   };
 68 | 
 69 |   return (
 70 |     <TooltipProvider>
 71 |       <PromptInputContext.Provider
 72 |         value={{
 73 |           isLoading,
 74 |           value: value ?? internalValue,
 75 |           setValue: onValueChange ?? handleChange,
 76 |           maxHeight,
 77 |           onSubmit,
 78 |         }}
 79 |       >
 80 |         <div
 81 |           className={cn(
 82 |             "border-input bg-background rounded-3xl border p-2 shadow-xs",
 83 |             className
 84 |           )}
 85 |         >
 86 |           {children}
 87 |         </div>
 88 |       </PromptInputContext.Provider>
 89 |     </TooltipProvider>
 90 |   );
 91 | }
 92 | 
 93 | export type PromptInputTextareaProps = {
 94 |   disableAutosize?: boolean;
 95 | } & React.ComponentProps<typeof Textarea>;
 96 | 
 97 | function PromptInputTextarea({
 98 |   className,
 99 |   onKeyDown,
100 |   disableAutosize = false,
101 |   ...props
102 | }: PromptInputTextareaProps) {
103 |   const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput();
104 |   const textareaRef = useRef<HTMLTextAreaElement>(null);
105 | 
106 |   useEffect(() => {
107 |     if (disableAutosize) return;
108 | 
109 |     if (!textareaRef.current) return;
110 |     textareaRef.current.style.height = "auto";
111 |     textareaRef.current.style.height =
112 |       typeof maxHeight === "number"
113 |         ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`
114 |         : `min(${textareaRef.current.scrollHeight}px, ${maxHeight})`;
115 |   }, [value, maxHeight, disableAutosize]);
116 | 
117 |   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
118 |     if (e.key === "Enter" && !e.shiftKey) {
119 |       e.preventDefault();
120 |       onSubmit?.();
121 |     }
122 |     onKeyDown?.(e);
123 |   };
124 | 
125 |   return (
126 |     <Textarea
127 |       ref={textareaRef}
128 |       value={value}
129 |       onChange={(e) => setValue(e.target.value)}
130 |       onKeyDown={handleKeyDown}
131 |       className={cn(
132 |         "text-primary min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
133 |         className
134 |       )}
135 |       rows={1}
136 |       disabled={disabled}
137 |       {...props}
138 |     />
139 |   );
140 | }
141 | 
142 | type PromptInputActionsProps = React.HTMLAttributes<HTMLDivElement>;
143 | 
144 | function PromptInputActions({
145 |   children,
146 |   className,
147 |   ...props
148 | }: PromptInputActionsProps) {
149 |   return (
150 |     <div className={cn("flex items-center gap-2", className)} {...props}>
151 |       {children}
152 |     </div>
153 |   );
154 | }
155 | 
156 | type PromptInputActionProps = {
157 |   className?: string;
158 |   tooltip: React.ReactNode;
159 |   children: React.ReactNode;
160 |   side?: "top" | "bottom" | "left" | "right";
161 | } & React.ComponentProps<typeof Tooltip>;
162 | 
163 | function PromptInputAction({
164 |   tooltip,
165 |   children,
166 |   className,
167 |   side = "top",
168 |   ...props
169 | }: PromptInputActionProps) {
170 |   const { disabled } = usePromptInput();
171 | 
172 |   return (
173 |     <Tooltip {...props}>
174 |       <TooltipTrigger asChild disabled={disabled}>
175 |         {children}
176 |       </TooltipTrigger>
177 |       <TooltipContent side={side} className={className}>
178 |         {tooltip}
179 |       </TooltipContent>
180 |     </Tooltip>
181 |   );
182 | }
183 | 
184 | export {
185 |   PromptInput,
186 |   PromptInputTextarea,
187 |   PromptInputActions,
188 |   PromptInputAction,
189 | };
190 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/client/App.tsx:
--------------------------------------------------------------------------------
  1 | import { useAgent } from "agents/react";
  2 | import { useAgentChat } from "agents/ai-react";
  3 | import Notifications from "./Notifications";
  4 | import { KnockProvider } from "@knocklabs/react";
  5 | import { KnockFeedProvider } from "@knocklabs/react";
  6 | 
  7 | import {
  8 |   PromptInput,
  9 |   PromptInputTextarea,
 10 |   PromptInputActions,
 11 |   PromptInputAction,
 12 | } from "../components/ui/prompt-input";
 13 | import { ArrowUp, Square } from "lucide-react";
 14 | import { ChangeEvent, useRef } from "react";
 15 | 
 16 | import { Button } from "../components/ui/button";
 17 | import { ChatContainer } from "../components/ui/chat-container";
 18 | import {
 19 |   Message,
 20 |   MessageAvatar,
 21 |   MessageContent,
 22 | } from "../components/ui/message";
 23 | import { Markdown } from "../components/ui/markdown";
 24 | import { PromptSuggestion } from "../components/ui/prompt-suggestion";
 25 | 
 26 | const KNOCK_USER_ID = "admin_user_1";
 27 | 
 28 | function ChatInterface() {
 29 |   // Connect to the agent
 30 |   const agent = useAgent({
 31 |     agent: "AIAgent",
 32 |   });
 33 | 
 34 |   const chatContainerRef = useRef<HTMLDivElement>(null);
 35 | 
 36 |   // Set up the chat interaction
 37 |   const {
 38 |     messages,
 39 |     input,
 40 |     handleInputChange,
 41 |     handleSubmit,
 42 |     clearHistory,
 43 |     isLoading,
 44 |   } = useAgentChat({
 45 |     agent,
 46 |     maxSteps: 5,
 47 |   });
 48 | 
 49 |   return (
 50 |     <KnockProvider
 51 |       apiKey={import.meta.env.VITE_KNOCK_PUBLIC_KEY}
 52 |       userId={KNOCK_USER_ID}
 53 |     >
 54 |       <KnockFeedProvider feedId={import.meta.env.VITE_KNOCK_FEED_ID}>
 55 |         <div className="chat-interface">
 56 |           <div className="flex p-2 flex-row items-center gap-2 border-b">
 57 |             <span className="text-lg font-bold">AI Assistant</span>
 58 | 
 59 |             <Button variant="outline" size="sm" onClick={clearHistory}>
 60 |               Clear chat
 61 |             </Button>
 62 |             <div className="ml-auto">
 63 |               <Notifications />
 64 |             </div>
 65 |           </div>
 66 | 
 67 |           <div className="flex h-[calc(100vh-70px)] w-[700px] flex-col overflow-hidden mx-auto">
 68 |             <ChatContainer
 69 |               className="flex-1 space-y-4 p-4"
 70 |               autoScroll
 71 |               ref={chatContainerRef}
 72 |             >
 73 |               {messages.map((message) => {
 74 |                 const isAssistant = message.role === "assistant";
 75 | 
 76 |                 return (
 77 |                   <Message
 78 |                     key={message.id}
 79 |                     className={
 80 |                       message.role === "user" ? "justify-end" : "justify-start"
 81 |                     }
 82 |                   >
 83 |                     {isAssistant && (
 84 |                       <MessageAvatar src="" alt="AI Assistant" fallback="AI" />
 85 |                     )}
 86 |                     <div className="max-w-[85%] flex-1 sm:max-w-[75%]">
 87 |                       {isAssistant ? (
 88 |                         <div className="bg-secondary text-foreground prose rounded-lg p-2">
 89 |                           <Markdown>{message.content}</Markdown>
 90 |                         </div>
 91 |                       ) : (
 92 |                         <MessageContent className="bg-primary text-primary-foreground">
 93 |                           {message.content}
 94 |                         </MessageContent>
 95 |                       )}
 96 |                     </div>
 97 |                   </Message>
 98 |                 );
 99 |               })}
100 |             </ChatContainer>
101 | 
102 |             <form onSubmit={handleSubmit} className="input-area">
103 |               <div className="flex flex-wrap gap-2 my-3">
104 |                 <PromptSuggestion
105 |                   onClick={() =>
106 |                     handleInputChange({
107 |                       target: {
108 |                         value: `Add ${Math.floor(
109 |                           Math.random() * 1000
110 |                         )} + ${Math.floor(Math.random() * 1000)}`,
111 |                       },
112 |                     } as ChangeEvent<HTMLInputElement>)
113 |                   }
114 |                 >
115 |                   Add two values together
116 |                 </PromptSuggestion>
117 |               </div>
118 |               <PromptInput
119 |                 value={input}
120 |                 onValueChange={(e) =>
121 |                   handleInputChange({
122 |                     target: { value: e },
123 |                   } as ChangeEvent<HTMLInputElement>)
124 |                 }
125 |                 isLoading={isLoading}
126 |                 onSubmit={handleSubmit}
127 |                 className="w-full max-w-(--breakpoint-md)"
128 |               >
129 |                 <PromptInputTextarea placeholder="Ask me anything..." />
130 |                 <PromptInputActions className="justify-end pt-2">
131 |                   <PromptInputAction
132 |                     tooltip={isLoading ? "Stop generation" : "Send message"}
133 |                   >
134 |                     <Button
135 |                       variant="default"
136 |                       size="icon"
137 |                       className="h-8 w-8 rounded-full"
138 |                       onClick={handleSubmit}
139 |                     >
140 |                       {isLoading ? (
141 |                         <Square className="size-5 fill-current" />
142 |                       ) : (
143 |                         <ArrowUp className="size-5" />
144 |                       )}
145 |                     </Button>
146 |                   </PromptInputAction>
147 |                 </PromptInputActions>
148 |               </PromptInput>
149 |             </form>
150 |           </div>
151 |         </div>
152 |       </KnockFeedProvider>
153 |     </KnockProvider>
154 |   );
155 | }
156 | 
157 | export default ChatInterface;
158 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/Chat.tsx:
--------------------------------------------------------------------------------
  1 | import { useAgent } from "agents/react";
  2 | import { useAgentChat } from "agents/ai-react";
  3 | import { ArrowUp, Square } from "lucide-react";
  4 | import { ChangeEvent, useRef } from "react";
  5 | 
  6 | import {
  7 |   PromptInput,
  8 |   PromptInputTextarea,
  9 |   PromptInputActions,
 10 |   PromptInputAction,
 11 | } from "./components/ui/prompt-input";
 12 | import { Button } from "./components/ui/button";
 13 | import { ChatContainer } from "./components/ui/chat-container";
 14 | import {
 15 |   Message,
 16 |   MessageAvatar,
 17 |   MessageContent,
 18 | } from "./components/ui/message";
 19 | import { Markdown } from "./components/ui/markdown";
 20 | import { PromptSuggestion } from "./components/ui/prompt-suggestion";
 21 | 
 22 | function Chat({
 23 |   userId,
 24 |   resetUserId,
 25 | }: {
 26 |   userId: string;
 27 |   resetUserId: () => void;
 28 | }) {
 29 |   const agent = useAgent({ agent: "AIAgent", name: userId });
 30 |   const chatContainerRef = useRef<HTMLDivElement>(null);
 31 | 
 32 |   const { messages, input, handleInputChange, handleSubmit, isLoading } =
 33 |     useAgentChat({
 34 |       agent,
 35 |       maxSteps: 5,
 36 |     });
 37 | 
 38 |   const setInput = (value: string) => {
 39 |     handleInputChange({
 40 |       target: { value },
 41 |     } as ChangeEvent<HTMLInputElement>);
 42 |   };
 43 | 
 44 |   return (
 45 |     <div className="chat-interface">
 46 |       <div className="flex p-2 flex-row items-center gap-2 border-b">
 47 |         <img src="/slope-logo.png" alt="Slope logo" className="w-20" />
 48 | 
 49 |         <Button
 50 |           variant="outline"
 51 |           size="sm"
 52 |           onClick={resetUserId}
 53 |           className="ml-auto"
 54 |         >
 55 |           New chat
 56 |         </Button>
 57 |       </div>
 58 | 
 59 |       <div className="flex h-[calc(100vh-70px)] w-[700px] flex-col overflow-hidden mx-auto">
 60 |         <ChatContainer
 61 |           className="flex-1 space-y-4 p-4"
 62 |           autoScroll
 63 |           ref={chatContainerRef}
 64 |         >
 65 |           {messages.map((message) => {
 66 |             const isAssistant = message.role === "assistant";
 67 | 
 68 |             return (
 69 |               <Message
 70 |                 key={message.id}
 71 |                 className={
 72 |                   message.role === "user" ? "justify-end" : "justify-start"
 73 |                 }
 74 |               >
 75 |                 {isAssistant && (
 76 |                   <MessageAvatar src="" alt="AI Assistant" fallback="AI" />
 77 |                 )}
 78 |                 <div className="max-w-[85%] flex-1 sm:max-w-[75%]">
 79 |                   {isAssistant ? (
 80 |                     <div className="bg-secondary text-foreground prose rounded-lg p-3">
 81 |                       <Markdown className="chat-message-content">
 82 |                         {message.content}
 83 |                       </Markdown>
 84 |                     </div>
 85 |                   ) : (
 86 |                     <MessageContent className="bg-primary text-primary-foreground">
 87 |                       {message.content}
 88 |                     </MessageContent>
 89 |                   )}
 90 |                 </div>
 91 |               </Message>
 92 |             );
 93 |           })}
 94 |         </ChatContainer>
 95 | 
 96 |         <form onSubmit={handleSubmit} className="input-area">
 97 |           <div className="flex flex-wrap gap-2 my-3 overflow-x-scroll w-full">
 98 |             <PromptSuggestion
 99 |               variant="outline"
100 |               size="sm"
101 |               onClick={() => setInput(`Can you issue me a new card`)}
102 |             >
103 |               ✅ Issue a new card
104 |             </PromptSuggestion>
105 |             <PromptSuggestion
106 |               variant="outline"
107 |               size="sm"
108 |               onClick={() => setInput(`Can you list all my cards?`)}
109 |             >
110 |               List all cards
111 |             </PromptSuggestion>
112 |             <PromptSuggestion
113 |               variant="outline"
114 |               size="sm"
115 |               onClick={() =>
116 |                 setInput(`Can you tell me more about this application?`)
117 |               }
118 |             >
119 |               What is this?
120 |             </PromptSuggestion>
121 |             <PromptSuggestion
122 |               variant="outline"
123 |               size="sm"
124 |               onClick={() => setInput(`What is Knock?`)}
125 |             >
126 |               What is Knock?
127 |             </PromptSuggestion>
128 |             <PromptSuggestion
129 |               variant="outline"
130 |               size="sm"
131 |               onClick={() => setInput(`How does this demo application work?`)}
132 |             >
133 |               How does this work?
134 |             </PromptSuggestion>
135 |           </div>
136 |           <PromptInput
137 |             value={input}
138 |             onValueChange={(e) =>
139 |               handleInputChange({
140 |                 target: { value: e },
141 |               } as ChangeEvent<HTMLInputElement>)
142 |             }
143 |             isLoading={isLoading}
144 |             onSubmit={handleSubmit}
145 |             className="w-full max-w-(--breakpoint-md)"
146 |           >
147 |             <PromptInputTextarea placeholder="Ask me anything..." />
148 |             <PromptInputActions className="justify-end pt-2">
149 |               <PromptInputAction
150 |                 tooltip={isLoading ? "Stop generation" : "Send message"}
151 |               >
152 |                 <Button
153 |                   variant="default"
154 |                   size="icon"
155 |                   className="h-8 w-8 rounded-full"
156 |                   onClick={handleSubmit}
157 |                 >
158 |                   {isLoading ? (
159 |                     <Square className="size-5 fill-current" />
160 |                   ) : (
161 |                     <ArrowUp className="size-5" />
162 |                   )}
163 |                 </Button>
164 |               </PromptInputAction>
165 |             </PromptInputActions>
166 |           </PromptInput>
167 |         </form>
168 |       </div>
169 |     </div>
170 |   );
171 | }
172 | 
173 | export default Chat;
174 |

--------------------------------------------------------------------------------
/agent-sdk-chat-with-approval/src/components/ui/chat-container.tsx:
--------------------------------------------------------------------------------
  1 | import { cn } from "@/lib/utils"
  2 | import { Children, useCallback, useEffect, useRef, useState } from "react"
  3 | 
  4 | const useAutoScroll = (
  5 |   containerRef: React.RefObject<HTMLDivElement | null>,
  6 |   enabled: boolean
  7 | ) => {
  8 |   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true)
  9 |   const lastScrollTopRef = useRef(0)
 10 |   const autoScrollingRef = useRef(false)
 11 |   const [newMessageAdded, setNewMessageAdded] = useState(false)
 12 |   const prevChildrenCountRef = useRef(0)
 13 |   const scrollTriggeredRef = useRef(false)
 14 | 
 15 |   const isAtBottom = useCallback((element: HTMLDivElement) => {
 16 |     const { scrollTop, scrollHeight, clientHeight } = element
 17 |     return scrollHeight - scrollTop - clientHeight <= 8
 18 |   }, [])
 19 | 
 20 |   const scrollToBottom = useCallback(
 21 |     (behavior: ScrollBehavior = "smooth") => {
 22 |       const container = containerRef.current
 23 |       if (!container) return
 24 | 
 25 |       autoScrollingRef.current = true
 26 |       scrollTriggeredRef.current = true
 27 | 
 28 |       const targetScrollTop = container.scrollHeight - container.clientHeight
 29 | 
 30 |       container.scrollTo({
 31 |         top: targetScrollTop,
 32 |         behavior: behavior,
 33 |       })
 34 | 
 35 |       const checkScrollEnd = () => {
 36 |         if (Math.abs(container.scrollTop - targetScrollTop) < 5) {
 37 |           autoScrollingRef.current = false
 38 |           scrollTriggeredRef.current = false
 39 |           return
 40 |         }
 41 | 
 42 |         requestAnimationFrame(checkScrollEnd)
 43 |       }
 44 | 
 45 |       requestAnimationFrame(checkScrollEnd)
 46 | 
 47 |       const safetyTimeout = setTimeout(() => {
 48 |         autoScrollingRef.current = false
 49 |         scrollTriggeredRef.current = false
 50 |       }, 500)
 51 | 
 52 |       try {
 53 |         const handleScrollEnd = () => {
 54 |           autoScrollingRef.current = false
 55 |           scrollTriggeredRef.current = false
 56 |           clearTimeout(safetyTimeout)
 57 |           container.removeEventListener("scrollend", handleScrollEnd)
 58 |         }
 59 | 
 60 |         container.addEventListener("scrollend", handleScrollEnd, {
 61 |           once: true,
 62 |         })
 63 |       } catch (e) {
 64 |         // scrollend event not supported in this browser, fallback to requestAnimationFrame
 65 |       }
 66 |     },
 67 |     [containerRef]
 68 |   )
 69 | 
 70 |   useEffect(() => {
 71 |     if (!enabled) return
 72 | 
 73 |     const container = containerRef?.current
 74 |     if (!container) return
 75 | 
 76 |     lastScrollTopRef.current = container.scrollTop
 77 | 
 78 |     const handleScroll = () => {
 79 |       if (autoScrollingRef.current) return
 80 | 
 81 |       const currentScrollTop = container.scrollTop
 82 | 
 83 |       if (currentScrollTop < lastScrollTopRef.current && autoScrollEnabled) {
 84 |         setAutoScrollEnabled(false)
 85 |       }
 86 | 
 87 |       if (isAtBottom(container) && !autoScrollEnabled) {
 88 |         setAutoScrollEnabled(true)
 89 |       }
 90 | 
 91 |       lastScrollTopRef.current = currentScrollTop
 92 |     }
 93 | 
 94 |     const handleWheel = (e: WheelEvent) => {
 95 |       if (e.deltaY < 0 && autoScrollEnabled) {
 96 |         setAutoScrollEnabled(false)
 97 |       }
 98 |     }
 99 | 
100 |     const handleTouchStart = () => {
101 |       lastScrollTopRef.current = container.scrollTop
102 |     }
103 | 
104 |     const handleTouchMove = () => {
105 |       if (container.scrollTop < lastScrollTopRef.current && autoScrollEnabled) {
106 |         setAutoScrollEnabled(false)
107 |       }
108 | 
109 |       lastScrollTopRef.current = container.scrollTop
110 |     }
111 | 
112 |     const handleTouchEnd = () => {
113 |       if (isAtBottom(container) && !autoScrollEnabled) {
114 |         setAutoScrollEnabled(true)
115 |       }
116 |     }
117 | 
118 |     container.addEventListener("scroll", handleScroll, { passive: true })
119 |     container.addEventListener("wheel", handleWheel, { passive: true })
120 |     container.addEventListener("touchstart", handleTouchStart, {
121 |       passive: true,
122 |     })
123 |     container.addEventListener("touchmove", handleTouchMove, { passive: true })
124 |     container.addEventListener("touchend", handleTouchEnd, { passive: true })
125 | 
126 |     return () => {
127 |       container.removeEventListener("scroll", handleScroll)
128 |       container.removeEventListener("wheel", handleWheel)
129 |       container.removeEventListener("touchstart", handleTouchStart)
130 |       container.removeEventListener("touchmove", handleTouchMove)
131 |       container.removeEventListener("touchend", handleTouchEnd)
132 |     }
133 |   }, [containerRef, enabled, autoScrollEnabled, isAtBottom])
134 | 
135 |   return {
136 |     autoScrollEnabled,
137 |     scrollToBottom,
138 |     isScrolling: autoScrollingRef.current,
139 |     scrollTriggered: scrollTriggeredRef.current,
140 |     newMessageAdded,
141 |     setNewMessageAdded,
142 |     prevChildrenCountRef,
143 |   }
144 | }
145 | 
146 | export type ChatContainerProps = {
147 |   children: React.ReactNode
148 |   className?: string
149 |   autoScroll?: boolean
150 |   scrollToRef?: React.RefObject<HTMLDivElement | null>
151 |   ref?: React.RefObject<HTMLDivElement | null>
152 | } & React.HTMLAttributes<HTMLDivElement>
153 | 
154 | function ChatContainer({
155 |   className,
156 |   children,
157 |   autoScroll = true,
158 |   scrollToRef,
159 |   ref,
160 |   ...props
161 | }: ChatContainerProps) {
162 |   const containerRef = useRef<HTMLDivElement>(null)
163 |   const localBottomRef = useRef<HTMLDivElement>(null)
164 |   const bottomRef = scrollToRef || localBottomRef
165 |   const chatContainerRef = ref || containerRef
166 |   const prevChildrenRef = useRef<React.ReactNode>(null)
167 |   const contentChangedWithoutNewMessageRef = useRef(false)
168 | 
169 |   const {
170 |     autoScrollEnabled,
171 |     scrollToBottom,
172 |     isScrolling,
173 |     scrollTriggered,
174 |     newMessageAdded,
175 |     setNewMessageAdded,
176 |     prevChildrenCountRef,
177 |   } = useAutoScroll(chatContainerRef, autoScroll)
178 | 
179 |   useEffect(() => {
180 |     const childrenArray = Children.toArray(children)
181 |     const currentChildrenCount = childrenArray.length
182 | 
183 |     if (currentChildrenCount > prevChildrenCountRef.current) {
184 |       setNewMessageAdded(true)
185 |     } else if (prevChildrenRef.current !== children) {
186 |       contentChangedWithoutNewMessageRef.current = true
187 |     }
188 | 
189 |     prevChildrenCountRef.current = currentChildrenCount
190 |     prevChildrenRef.current = children
191 |   }, [children, setNewMessageAdded])
192 | 
193 |   useEffect(() => {
194 |     if (!autoScroll) return
195 | 
196 |     const scrollHandler = () => {
197 |       if (newMessageAdded) {
198 |         scrollToBottom("smooth")
199 |         setNewMessageAdded(false)
200 |         contentChangedWithoutNewMessageRef.current = false
201 |       } else if (
202 |         contentChangedWithoutNewMessageRef.current &&
203 |         autoScrollEnabled &&
204 |         !isScrolling &&
205 |         !scrollTriggered
206 |       ) {
207 |         scrollToBottom("smooth")
208 |         contentChangedWithoutNewMessageRef.current = false
209 |       }
210 |     }
211 | 
212 |     requestAnimationFrame(scrollHandler)
213 |   }, [
214 |     children,
215 |     autoScroll,
216 |     autoScrollEnabled,
217 |     isScrolling,
218 |     scrollTriggered,
219 |     scrollToBottom,
220 |     newMessageAdded,
221 |     setNewMessageAdded,
222 |   ])
223 | 
224 |   return (
225 |     <div
226 |       className={cn("flex flex-col overflow-y-auto", className)}
227 |       role="log"
228 |       ref={chatContainerRef}
229 |       {...props}
230 |     >
231 |       {children}
232 |       <div
233 |         ref={bottomRef}
234 |         className="h-[1px] w-full flex-shrink-0 scroll-mt-4"
235 |         aria-hidden="true"
236 |       />
237 |     </div>
238 |   )
239 | }
240 | 
241 | export { ChatContainer }
242 |

--------------------------------------------------------------------------------
/card-issue-agent/src/client/components/ui/chat-container.tsx:
--------------------------------------------------------------------------------
  1 | import { cn } from "../../../lib/utils";
  2 | import { Children, useCallback, useEffect, useRef, useState } from "react";
  3 | 
  4 | const useAutoScroll = (
  5 |   containerRef: React.RefObject<HTMLDivElement | null>,
  6 |   enabled: boolean
  7 | ) => {
  8 |   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
  9 |   const lastScrollTopRef = useRef(0);
 10 |   const autoScrollingRef = useRef(false);
 11 |   const [newMessageAdded, setNewMessageAdded] = useState(false);
 12 |   const prevChildrenCountRef = useRef(0);
 13 |   const scrollTriggeredRef = useRef(false);
 14 | 
 15 |   const isAtBottom = useCallback((element: HTMLDivElement) => {
 16 |     const { scrollTop, scrollHeight, clientHeight } = element;
 17 |     return scrollHeight - scrollTop - clientHeight <= 8;
 18 |   }, []);
 19 | 
 20 |   const scrollToBottom = useCallback(
 21 |     (behavior: ScrollBehavior = "smooth") => {
 22 |       const container = containerRef.current;
 23 |       if (!container) return;
 24 | 
 25 |       autoScrollingRef.current = true;
 26 |       scrollTriggeredRef.current = true;
 27 | 
 28 |       const targetScrollTop = container.scrollHeight - container.clientHeight;
 29 | 
 30 |       container.scrollTo({
 31 |         top: targetScrollTop,
 32 |         behavior: behavior,
 33 |       });
 34 | 
 35 |       const checkScrollEnd = () => {
 36 |         if (Math.abs(container.scrollTop - targetScrollTop) < 5) {
 37 |           autoScrollingRef.current = false;
 38 |           scrollTriggeredRef.current = false;
 39 |           return;
 40 |         }
 41 | 
 42 |         requestAnimationFrame(checkScrollEnd);
 43 |       };
 44 | 
 45 |       requestAnimationFrame(checkScrollEnd);
 46 | 
 47 |       const safetyTimeout = setTimeout(() => {
 48 |         autoScrollingRef.current = false;
 49 |         scrollTriggeredRef.current = false;
 50 |       }, 500);
 51 | 
 52 |       try {
 53 |         const handleScrollEnd = () => {
 54 |           autoScrollingRef.current = false;
 55 |           scrollTriggeredRef.current = false;
 56 |           clearTimeout(safetyTimeout);
 57 |           container.removeEventListener("scrollend", handleScrollEnd);
 58 |         };
 59 | 
 60 |         container.addEventListener("scrollend", handleScrollEnd, {
 61 |           once: true,
 62 |         });
 63 |       } catch (e) {
 64 |         // scrollend event not supported in this browser, fallback to requestAnimationFrame
 65 |       }
 66 |     },
 67 |     [containerRef]
 68 |   );
 69 | 
 70 |   useEffect(() => {
 71 |     if (!enabled) return;
 72 | 
 73 |     const container = containerRef?.current;
 74 |     if (!container) return;
 75 | 
 76 |     lastScrollTopRef.current = container.scrollTop;
 77 | 
 78 |     const handleScroll = () => {
 79 |       if (autoScrollingRef.current) return;
 80 | 
 81 |       const currentScrollTop = container.scrollTop;
 82 | 
 83 |       if (currentScrollTop < lastScrollTopRef.current && autoScrollEnabled) {
 84 |         setAutoScrollEnabled(false);
 85 |       }
 86 | 
 87 |       if (isAtBottom(container) && !autoScrollEnabled) {
 88 |         setAutoScrollEnabled(true);
 89 |       }
 90 | 
 91 |       lastScrollTopRef.current = currentScrollTop;
 92 |     };
 93 | 
 94 |     const handleWheel = (e: WheelEvent) => {
 95 |       if (e.deltaY < 0 && autoScrollEnabled) {
 96 |         setAutoScrollEnabled(false);
 97 |       }
 98 |     };
 99 | 
100 |     const handleTouchStart = () => {
101 |       lastScrollTopRef.current = container.scrollTop;
102 |     };
103 | 
104 |     const handleTouchMove = () => {
105 |       if (container.scrollTop < lastScrollTopRef.current && autoScrollEnabled) {
106 |         setAutoScrollEnabled(false);
107 |       }
108 | 
109 |       lastScrollTopRef.current = container.scrollTop;
110 |     };
111 | 
112 |     const handleTouchEnd = () => {
113 |       if (isAtBottom(container) && !autoScrollEnabled) {
114 |         setAutoScrollEnabled(true);
115 |       }
116 |     };
117 | 
118 |     container.addEventListener("scroll", handleScroll, { passive: true });
119 |     container.addEventListener("wheel", handleWheel, { passive: true });
120 |     container.addEventListener("touchstart", handleTouchStart, {
121 |       passive: true,
122 |     });
123 |     container.addEventListener("touchmove", handleTouchMove, { passive: true });
124 |     container.addEventListener("touchend", handleTouchEnd, { passive: true });
125 | 
126 |     return () => {
127 |       container.removeEventListener("scroll", handleScroll);
128 |       container.removeEventListener("wheel", handleWheel);
129 |       container.removeEventListener("touchstart", handleTouchStart);
130 |       container.removeEventListener("touchmove", handleTouchMove);
131 |       container.removeEventListener("touchend", handleTouchEnd);
132 |     };
133 |   }, [containerRef, enabled, autoScrollEnabled, isAtBottom]);
134 | 
135 |   return {
136 |     autoScrollEnabled,
137 |     scrollToBottom,
138 |     isScrolling: autoScrollingRef.current,
139 |     scrollTriggered: scrollTriggeredRef.current,
140 |     newMessageAdded,
141 |     setNewMessageAdded,
142 |     prevChildrenCountRef,
143 |   };
144 | };
145 | 
146 | export type ChatContainerProps = {
147 |   children: React.ReactNode;
148 |   className?: string;
149 |   autoScroll?: boolean;
150 |   scrollToRef?: React.RefObject<HTMLDivElement | null>;
151 |   ref?: React.RefObject<HTMLDivElement | null>;
152 | } & React.HTMLAttributes<HTMLDivElement>;
153 | 
154 | function ChatContainer({
155 |   className,
156 |   children,
157 |   autoScroll = true,
158 |   scrollToRef,
159 |   ref,
160 |   ...props
161 | }: ChatContainerProps) {
162 |   const containerRef = useRef<HTMLDivElement>(null);
163 |   const localBottomRef = useRef<HTMLDivElement>(null);
164 |   const bottomRef = scrollToRef || localBottomRef;
165 |   const chatContainerRef = ref || containerRef;
166 |   const prevChildrenRef = useRef<React.ReactNode>(null);
167 |   const contentChangedWithoutNewMessageRef = useRef(false);
168 | 
169 |   const {
170 |     autoScrollEnabled,
171 |     scrollToBottom,
172 |     isScrolling,
173 |     scrollTriggered,
174 |     newMessageAdded,
175 |     setNewMessageAdded,
176 |     prevChildrenCountRef,
177 |   } = useAutoScroll(chatContainerRef, autoScroll);
178 | 
179 |   useEffect(() => {
180 |     const childrenArray = Children.toArray(children);
181 |     const currentChildrenCount = childrenArray.length;
182 | 
183 |     if (currentChildrenCount > prevChildrenCountRef.current) {
184 |       setNewMessageAdded(true);
185 |     } else if (prevChildrenRef.current !== children) {
186 |       contentChangedWithoutNewMessageRef.current = true;
187 |     }
188 | 
189 |     prevChildrenCountRef.current = currentChildrenCount;
190 |     prevChildrenRef.current = children;
191 |   }, [children, setNewMessageAdded]);
192 | 
193 |   useEffect(() => {
194 |     if (!autoScroll) return;
195 | 
196 |     const scrollHandler = () => {
197 |       if (newMessageAdded) {
198 |         scrollToBottom("smooth");
199 |         setNewMessageAdded(false);
200 |         contentChangedWithoutNewMessageRef.current = false;
201 |       } else if (
202 |         contentChangedWithoutNewMessageRef.current &&
203 |         autoScrollEnabled &&
204 |         !isScrolling &&
205 |         !scrollTriggered
206 |       ) {
207 |         scrollToBottom("smooth");
208 |         contentChangedWithoutNewMessageRef.current = false;
209 |       }
210 |     };
211 | 
212 |     requestAnimationFrame(scrollHandler);
213 |   }, [
214 |     children,
215 |     autoScroll,
216 |     autoScrollEnabled,
217 |     isScrolling,
218 |     scrollTriggered,
219 |     scrollToBottom,
220 |     newMessageAdded,
221 |     setNewMessageAdded,
222 |   ]);
223 | 
224 |   return (
225 |     <div
226 |       className={cn("flex flex-col overflow-y-auto", className)}
227 |       role="log"
228 |       ref={chatContainerRef}
229 |       {...props}
230 |     >
231 |       {children}
232 |       <div
233 |         ref={bottomRef}
234 |         className="h-[1px] w-full flex-shrink-0 scroll-mt-4"
235 |         aria-hidden="true"
236 |       />
237 |     </div>
238 |   );
239 | }
240 | 
241 | export { ChatContainer };
242 |

--------------------------------------------------------------------------------