@economic/agents-react 0.1.0 → 0.2.1

package/dist/index.d.mts

@@ -9,8 +9,10 @@ interface UseAIChatAgentOptions {
   host: string;
   basePath?: string;
   chatId: string;
+  authToken?: string;
   toolContext?: Record<string, unknown>;
   connectionParams?: Record<string, string>;
+  welcomeMessage?: string;
   onConnectionStatusChange?: (status: AgentConnectionStatus) => void;
   onOpen?: (event: Event) => void;
   onClose?: (event: CloseEvent) => void;
@@ -19,6 +21,7 @@ interface UseAIChatAgentOptions {
 type UseAIChatAgentResult = {
   agent: ReturnType<typeof useAgent>;
   chat: ReturnType<typeof useAgentChat<unknown, UIMessage>>;
+  connectionStatus: AgentConnectionStatus;
 };
 declare function useAIChatAgent(options: UseAIChatAgentOptions): UseAIChatAgentResult;
 //#endregion

package/dist/index.mjs

@@ -1,8 +1,20 @@
 import { useAgentChat } from "@cloudflare/ai-chat/react";
 import { useAgent } from "agents/react";
+import React from "react";
 //#region src/index.ts
 function useAIChatAgent(options) {
-	const { agent: agentName, host, basePath, chatId, toolContext, connectionParams, onConnectionStatusChange, onOpen: onOpenProp, onClose: onCloseProp, onError: onErrorProp } = options;
+	const { agent: agentName, host, basePath, chatId, authToken, toolContext, connectionParams, welcomeMessage, onConnectionStatusChange, onOpen: onOpenProp, onClose: onCloseProp, onError: onErrorProp } = options;
+	const [connectionStatus, setConnectionStatus] = React.useState("connecting");
+	const updateConnectionStatus = React.useCallback((status) => {
+		setConnectionStatus(status);
+		onConnectionStatusChange?.(status);
+	}, [onConnectionStatusChange]);
+	let headers = {};
+	let protocols = [];
+	if (authToken) {
+		headers["Authorization"] = `Bearer ${authToken}`;
+		protocols.push("bearer", authToken);
+	}
 	const agent = useAgent({
 		agent: agentName,
 		host,
@@ -11,27 +23,49 @@ function useAIChatAgent(options) {
 		query: connectionParams ?? {},
 		queryDeps: Object.keys(connectionParams ?? {}),
 		onOpen: (event) => {
-			onConnectionStatusChange?.("connected");
+			updateConnectionStatus("connected");
 			onOpenProp?.(event);
 		},
 		onClose: (event) => {
 			if (event.code >= 3e3) {
-				onConnectionStatusChange?.("unauthorized");
+				updateConnectionStatus("unauthorized");
 				agent.close();
 				onCloseProp?.(event);
 				return;
 			}
-			onConnectionStatusChange?.("disconnected");
+			updateConnectionStatus("disconnected");
 			onCloseProp?.(event);
 		},
-		onError: onErrorProp
+		onError: onErrorProp,
+		protocols
 	});
+	const chat = useAgentChat({
+		agent,
+		body: toolContext ?? {},
+		headers
+	});
+	const hasSentWelcome = React.useRef(false);
+	React.useEffect(() => {
+		if (welcomeMessage && connectionStatus === "connected" && chat.messages.length === 0 && !hasSentWelcome.current) {
+			hasSentWelcome.current = true;
+			chat.setMessages([{
+				id: "welcome-message",
+				role: "assistant",
+				parts: [{
+					type: "text",
+					text: welcomeMessage
+				}]
+			}]);
+		}
+	}, [
+		connectionStatus,
+		chat.messages.length,
+		welcomeMessage
+	]);
 	return {
 		agent,
-		chat: useAgentChat({
-			agent,
-			body: toolContext ?? {}
-		})
+		chat,
+		connectionStatus
 	};
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@economic/agents-react",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "license": "MIT",
   "files": [
     "dist"