canopy-ui 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/chat/useSessionSocket.http.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSessionSocket } from './useSessionSocket'
+
+/**
+ * A read-only principal — a canopy CONTACT — chats through the same hook: the
+ * message goes out over HTTP, the draft stays local, and nothing is written to
+ * the socket (which would refuse it).
+ */
+
+class FakeSocket {
+  static OPEN = 1
+  static sent: string[] = []
+  onopen: (() => void) | null = null
+  onmessage: ((e: { data: string }) => void) | null = null
+  onclose: (() => void) | null = null
+  onerror: (() => void) | null = null
+  readyState = 1
+  constructor(public url: string) {}
+  send(data: string) {
+    FakeSocket.sent.push(data)
+  }
+  close() {}
+}
+
+beforeEach(() => {
+  FakeSocket.sent = []
+  vi.stubGlobal('WebSocket', FakeSocket)
+})
+afterEach(() => vi.unstubAllGlobals())
+
+function contact(sendOverHttp = vi.fn().mockResolvedValue({})) {
+  const hook = renderHook(() =>
+    useSessionSocket({ sessionId: 's1', wsUrl: () => 'wss://h/x', sendOverHttp }),
+  )
+  return { hook, sendOverHttp }
+}
+
+describe('sending over HTTP', () => {
+  it('types into a local draft and sends it over HTTP, never the socket', async () => {
+    const { hook, sendOverHttp } = contact()
+    act(() => hook.result.current.updateDraft('hello ace'))
+    expect(hook.result.current.state.active_draft?.body).toBe('hello ace')
+    await act(async () => hook.result.current.sendChat())
+    expect(sendOverHttp).toHaveBeenCalledWith('hello ace')
+    expect(FakeSocket.sent.filter((f) => f.includes('chat.send') || f.includes('draft.update'))).toEqual([])
+  })
+
+  it('shows the line and waits for the reply, as a user send does', async () => {
+    const { hook } = contact()
+    act(() => hook.result.current.updateDraft('are we on track?'))
+    await act(async () => hook.result.current.sendChat())
+    expect(hook.result.current.awaitingReply).toBe(true)
+    expect(hook.result.current.state.messages.at(-1)?.plaintext).toBe('are we on track?')
+    expect(hook.result.current.state.active_draft).toBeNull()
+  })
+
+  it('a failed send puts the words back and says why', async () => {
+    const { hook } = contact(vi.fn().mockRejectedValue(new Error('canopy said 429')))
+    act(() => hook.result.current.updateDraft('keep me'))
+    await act(async () => {
+      hook.result.current.sendChat()
+      await Promise.resolve()
+    })
+    expect(hook.result.current.state.active_draft?.body).toBe('keep me')
+    expect(hook.result.current.lastError).toBe('canopy said 429')
+    expect(hook.result.current.awaitingReply).toBe(false)
+  })
+
+  it('an empty draft sends nothing', async () => {
+    const { hook, sendOverHttp } = contact()
+    act(() => hook.result.current.updateDraft('   '))
+    await act(async () => hook.result.current.sendChat())
+    expect(sendOverHttp).not.toHaveBeenCalled()
+  })
+
+  it('without it, a user sends over the socket exactly as before', async () => {
+    const hook = renderHook(() => useSessionSocket({ sessionId: 's1', wsUrl: () => 'wss://h/x' }))
+    await act(async () => hook.result.current.sendChat())
+    expect(FakeSocket.sent.some((f) => f.includes('chat.send'))).toBe(true)
+  })
+})

package/src/chat/useSessionSocket.ts

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { fromAgui, resetAguiState } from "./agui";
-import type { Message, SessionState, WsEvent } from "./protocol";
+import type { Draft, Message, SessionState, WsEvent } from "./protocol";
 import { shouldSyncDraftLive } from "./drafts";
 import { prependHistory } from "./history";
 import { sessionReducer } from "./sessionReducer";
@@ -56,6 +56,18 @@ export interface UseSessionSocketOptions {
    * that against a fixture the server generates).
    */
   protocol?: "canopy" | "ag-ui";
+  /**
+   * For a principal whose socket is READ-ONLY — a canopy CONTACT, someone a
+   * site vouched for who has no canopy account. They can watch the conversation
+   * over the socket but not write to it, so their message goes out over HTTP
+   * (canopy-client's `rest.send`, which routes to `/api/contact/…`) and their
+   * draft stays local: there is no shared draft to co-edit with nobody else.
+   *
+   * Everything else is unchanged — the same `state`, the same pending row, the
+   * same "waiting for a reply" — so one chat UI serves a user and a contact
+   * without a second send path in every host. Omit for a user (the default).
+   */
+  sendOverHttp?: (text: string) => Promise<unknown>;
 }
 
 /**
@@ -132,7 +144,10 @@ export function useSessionSocket({
   onTitleUpdated,
   onUnknownEvent,
   protocol = "canopy",
+  sendOverHttp,
 }: UseSessionSocketOptions): UseSessionSocketResult {
+  // The local draft a read-only principal types into (see `sendOverHttp`).
+  const [localDraft, setLocalDraft] = useState<Draft | null>(null);
   const [state, setState] = useState<SessionState>(INITIAL_STATE);
   const [connected, setConnected] = useState(false);
   const [lastError, setLastError] = useState<string | null>(null);
@@ -442,6 +457,15 @@ export function useSessionSocket({
     });
   }, []);
 
+  // `sendOverHttp`'s half of the hook: typing is local, sending is HTTP. Defined
+  // here, after noteLocalSend, which it reuses for the pending row.
+  const updateLocalDraft = useCallback((body: string) => {
+    setLocalDraft({
+      id: "local", slot: "next", status: "open", body, version: 0, last_editor: 0,
+      last_edit_at: new Date().toISOString(),
+    });
+  }, []);
+
   const noteLocalSend = useCallback((text: string) => {
     setAwaitingReply(true);
     const body = text.trim();
@@ -465,13 +489,31 @@ export function useSessionSocket({
     );
   }, []);
 
+  const sendChatOverHttp = useCallback(() => {
+    const body = (localDraft?.body ?? "").trim();
+    if (!body || !sendOverHttp) return;
+    noteLocalSend(body);
+    setLocalDraft(null);
+    sendOverHttp(body).catch((err: unknown) => {
+      setAwaitingReply(false);
+      setLastError(err instanceof Error ? err.message : "the message could not be sent");
+      // Put the words back, so a failed send never costs what was typed.
+      updateLocalDraft(body);
+    });
+  }, [localDraft, sendOverHttp, noteLocalSend, updateLocalDraft]);
+
+  const exposedState = useMemo(
+    () => (sendOverHttp ? { ...state, active_draft: localDraft } : state),
+    [sendOverHttp, state, localDraft],
+  );
+
   return {
-    state,
+    state: exposedState,
     connected,
     awaitingReply,
-    sendChat,
+    sendChat: sendOverHttp ? sendChatOverHttp : sendChat,
     stopChat,
-    updateDraft,
+    updateDraft: sendOverHttp ? updateLocalDraft : updateDraft,
     takeOverDraft,
     discardDraft,
     prependMessages,