canopy-ui 0.8.0 → 0.10.0

package/src/chat/useSessionSocket.ts

@@ -58,6 +58,27 @@ export interface UseSessionSocketOptions {
   protocol?: "canopy" | "ag-ui";
 }
 
+/**
+ * Ask for AG-UI on the URL the caller built — whatever it looks like.
+ *
+ * The hook OWNS this flag rather than handing the caller a path with it already
+ * attached, because that contract was invisible and two of the first three
+ * callers broke it: canopy-web's widget builds `client.sessionSocketUrl(id)` and
+ * ace-web builds `buildCanopyWsUrl(base, id)`, and both ignore the path they are
+ * given (they need their own token in the query). The flag was dropped, the
+ * server answered in native frames, and every one of them decoded as AG-UI to
+ * nothing — a blank chat with no error, caught only in review before it shipped.
+ *
+ * Exported for the test, which asserts on the URL a socket really opens.
+ */
+export function withAguiProtocol(url: string): string {
+  // Empty is a caller saying "no URL yet" (the widget before it has a
+  // session); decorating it would turn a deliberate no-op into a bad request.
+  if (!url) return url;
+  if (/[?&]protocol=/.test(url)) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}protocol=ag-ui`;
+}
+
 export interface UseSessionSocketResult {
   state: SessionState;
   connected: boolean;
@@ -72,6 +93,21 @@ export interface UseSessionSocketResult {
   takeOverDraft: () => void;
   discardDraft: () => void;
   prependMessages: (older: Message[]) => void;
+  /** A message was sent for this session over HTTP rather than through this
+   *  socket — show it, and start waiting for a reply.
+   *
+   *  Two callers need it and both are REST sends: the embedded widget's FIRST
+   *  message (the session does not exist until it is sent, so there is no
+   *  socket to send it on) and every message from a CONTACT (whose socket
+   *  listens only — presence and the co-edited draft are keyed on a user id
+   *  they do not have).
+   *
+   *  Without it those sends changed nothing on screen: `awaitingReply` is set
+   *  by `sendChat` alone, and the user's own line is not a server row until
+   *  the agent's transcript ships it back. So you typed, pressed send, and got
+   *  an empty panel — for as long as the reply took, and forever if its runner
+   *  was offline. */
+  noteLocalSend: (text: string) => void;
   lastError: string | null;
 }
 
@@ -121,6 +157,7 @@ export function useSessionSocket({
   // vocabulary mid-session.
   const protocolRef = useRef(protocol);
   protocolRef.current = protocol;
+  const warnedNativeRef = useRef(false);
   // Control frames that must not be lost across a reconnect (currently
   // only chat.stop). The WS-world analogue of an abortable chat transport.
   const pendingFramesRef = useRef<{ action: string; data: unknown }[]>([]);
@@ -202,8 +239,9 @@ export function useSessionSocket({
     // by an ARGS event from this one — the ids are per-stream.
     resetAguiState();
     const path = `ws/canopy-sessions/${sessionId}/`;
+    const built = wsUrl(path);
     const ws = new WebSocket(
-      wsUrl(protocolRef.current === "ag-ui" ? `${path}?protocol=ag-ui` : path),
+      protocolRef.current === "ag-ui" ? withAguiProtocol(built) : built,
     );
     socketRef.current = ws;
 
@@ -229,6 +267,22 @@ export function useSessionSocket({
       try {
         const raw = JSON.parse(e.data);
         if (protocolRef.current === "ag-ui") {
+          // We asked for AG-UI and the server answered in canopy's own frames:
+          // a server that predates the negotiation, or a URL that lost the flag
+          // on the way (see `withAguiProtocol`). The two are unambiguous — every
+          // AG-UI event has a `type`, and no canopy frame does — so apply it as
+          // what it is. Decoding it as AG-UI yields nothing, which is a blank
+          // chat with no error: the worst possible way to find out.
+          if (typeof raw?.type !== "string" && typeof raw?.event === "string") {
+            if (!warnedNativeRef.current) {
+              warnedNativeRef.current = true;
+              console.warn(
+                "canopy-ui: asked for protocol=ag-ui but the server sent canopy frames; handling them as canopy frames.",
+              );
+            }
+            applyEvent(raw as WsEvent);
+            return;
+          }
           // One AG-UI event can be several canopy frames (a tool call is three
           // events) or none, so this is a fan-out rather than a rename.
           for (const frame of fromAgui(raw)) applyEvent(frame);
@@ -388,6 +442,29 @@ export function useSessionSocket({
     });
   }, []);
 
+  const noteLocalSend = useCallback((text: string) => {
+    setAwaitingReply(true);
+    const body = text.trim();
+    if (!body) return;
+    // Routed through the ordinary `chat.user_message` case rather than a new
+    // one, so the optimistic row goes in with the SAME dedupe the transcript
+    // echo already relies on: when the agent reads the message and the runner
+    // ships it back at its durable composite ordinal, the reducer matches on
+    // recent identical text and merges instead of rendering it twice.
+    setState((prev) =>
+      sessionReducer(prev, {
+        event: "chat.user_message",
+        data: {
+          // Local, and replaced by the server's id the moment the real row
+          // arrives. Namespaced so it can never collide with one.
+          message_id: `local:${Date.now()}`,
+          turn_index: prev.messages.reduce((acc, m) => Math.max(acc, m.turn_index), 0) + 1,
+          plaintext: body,
+        },
+      }),
+    );
+  }, []);
+
   return {
     state,
     connected,
@@ -398,6 +475,7 @@ export function useSessionSocket({
     takeOverDraft,
     discardDraft,
     prependMessages,
+    noteLocalSend,
     lastError,
   };
 }