dooers-agents-client 0.1.0 → 0.2.0

package/README.md

@@ -71,7 +71,9 @@ function Chat({ threadId }: { threadId: string }) {
   userId="user-1"
   userName="Alice"
   userEmail="alice@example.com"
-  userRole="member"
+  systemRole="user"              // "admin" | "user" (default: "user")
+  organizationRole="member"      // "owner" | "manager" | "member" (default: "member")
+  workspaceRole="member"         // "manager" | "member" (default: "member")
   authToken="sk-..."             // Optional authentication
   onError={(err) => console.error(err.code, err.message)}
 >
@@ -212,11 +214,11 @@ All public types are camelCase. The SDK transforms the wire format (snake_case)
 
 ```typescript
 import type {
-  Thread,            // { id, workerId, title, createdAt, updatedAt, lastEventAt, metadata }
-  ThreadEvent,       // { id, threadId, type, actor, author, content, data, createdAt, ... }
+  User,              // { userId, userName, userEmail, systemRole, organizationRole, workspaceRole }
+  Thread,            // { id, workerId, organizationId, workspaceId, owner, users, title, ... }
+  ThreadEvent,       // { id, threadId, type, actor, author, user, content, data, createdAt, ... }
   Run,               // { id, threadId, agentId, status, startedAt, endedAt, error }
   ContentPart,       // TextPart | ImagePart | DocumentPart
-  Metadata,          // { userId, userName, userEmail, userRole, organizationId, workspaceId }
   ConnectionStatus,  // "idle" | "connecting" | "connected" | "disconnected" | "error"
   Actor,             // "user" | "assistant" | "system" | "tool"
   EventType,         // "message" | "tool.call" | "tool.result" | "tool.transaction" | ...

package/dist/main.cjs

@@ -37,14 +37,36 @@ function toThread(w) {
     lastEventAt: w.last_event_at
   };
 }
-function toContentPart(w) {
+function toDisplayContentPart(w) {
   switch (w.type) {
     case "text":
       return { type: "text", text: w.text };
+    case "audio":
+      return {
+        type: "audio",
+        url: w.url,
+        mimeType: w.mime_type,
+        duration: w.duration,
+        filename: w.filename
+      };
     case "image":
-      return { type: "image", url: w.url, mimeType: w.mime_type, alt: w.alt };
+      return {
+        type: "image",
+        url: w.url,
+        mimeType: w.mime_type,
+        width: w.width,
+        height: w.height,
+        alt: w.alt,
+        filename: w.filename
+      };
     case "document":
-      return { type: "document", url: w.url, filename: w.filename, mimeType: w.mime_type };
+      return {
+        type: "document",
+        url: w.url,
+        filename: w.filename,
+        mimeType: w.mime_type,
+        sizeBytes: w.size_bytes
+      };
   }
 }
 function toThreadEvent(w) {
@@ -56,7 +78,7 @@ function toThreadEvent(w) {
     actor: w.actor,
     author: w.author,
     user: toUser(w.user),
-    content: w.content?.map(toContentPart),
+    content: w.content?.map(toDisplayContentPart),
     data: w.data,
     createdAt: w.created_at,
     clientEventId: w.client_event_id
@@ -119,10 +141,12 @@ function toWireContentPart(p) {
   switch (p.type) {
     case "text":
       return { type: "text", text: p.text };
+    case "audio":
+      return { type: "audio", ref_id: p.refId, duration: p.duration };
     case "image":
-      return { type: "image", url: p.url, mime_type: p.mimeType, alt: p.alt };
+      return { type: "image", ref_id: p.refId };
     case "document":
-      return { type: "document", url: p.url, filename: p.filename, mime_type: p.mimeType };
+      return { type: "document", ref_id: p.refId };
   }
 }
 
@@ -136,6 +160,7 @@ var WorkerClient = class {
   onError = null;
   url = "";
   workerId = "";
+  uploadUrl;
   config = {
     organizationId: "",
     workspaceId: "",
@@ -164,6 +189,35 @@ var WorkerClient = class {
   setOnError(cb) {
     this.onError = cb;
   }
+  setUploadUrl(url) {
+    this.uploadUrl = url;
+  }
+  async upload(file) {
+    if (!this.uploadUrl) {
+      throw new Error("uploadUrl not configured");
+    }
+    const formData = new FormData();
+    formData.append("file", file);
+    const headers = {};
+    if (this.config.authToken) {
+      headers.Authorization = `Bearer ${this.config.authToken}`;
+    }
+    const response = await fetch(this.uploadUrl, {
+      method: "POST",
+      body: formData,
+      headers
+    });
+    if (!response.ok) {
+      throw new Error(`Upload failed: ${response.status} ${response.statusText}`);
+    }
+    const result = await response.json();
+    return {
+      refId: result.ref_id,
+      mimeType: result.mime_type,
+      filename: result.filename,
+      sizeBytes: result.size_bytes
+    };
+  }
   connect(url, workerId, config) {
     this.url = url;
     this.workerId = workerId;
@@ -270,6 +324,20 @@ var WorkerClient = class {
   sendMessage(params) {
     const clientEventId = crypto.randomUUID();
     const content = params.content ? params.content.map(toWireContentPart) : [{ type: "text", text: params.text ?? "" }];
+    const displayContent = params.content ? params.content.map((p) => {
+      switch (p.type) {
+        case "text":
+          return { type: "text", text: p.text };
+        case "audio":
+          return { type: "audio", duration: p.duration };
+        case "image":
+          return { type: "image" };
+        case "document":
+          return { type: "document" };
+        default:
+          return { type: "text", text: "" };
+      }
+    }) : [{ type: "text", text: params.text ?? "" }];
     const optimisticEvent = {
       id: `optimistic-${clientEventId}`,
       threadId: params.threadId ?? "",
@@ -285,7 +353,7 @@ var WorkerClient = class {
         organizationRole: this.config.organizationRole ?? "member",
         workspaceRole: this.config.workspaceRole ?? "member"
       },
-      content: params.content ?? [{ type: "text", text: params.text ?? "" }],
+      content: displayContent,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     if (params.threadId) {
@@ -420,13 +488,11 @@ var WorkerClient = class {
       }
       case "event.append": {
         const events = frame.payload.events.map(toThreadEvent);
+        const resolvedClientEventIds = [];
         for (const event of events) {
           if (event.clientEventId && this.pendingOptimistic.has(event.clientEventId)) {
-            const pending = this.pendingOptimistic.get(event.clientEventId);
-            if (pending) {
-              this.callbacks.removeOptimistic(pending.threadId, event.clientEventId);
-              this.pendingOptimistic.delete(event.clientEventId);
-            }
+            resolvedClientEventIds.push(event.clientEventId);
+            this.pendingOptimistic.delete(event.clientEventId);
           }
           if (event.clientEventId && this.pendingMessages.has(event.clientEventId)) {
             const pendingMessage = this.pendingMessages.get(event.clientEventId);
@@ -441,7 +507,11 @@ var WorkerClient = class {
         if (lastEvent) {
           this.lastEventIds.set(frame.payload.thread_id, lastEvent.id);
         }
-        this.callbacks.onEventAppend(frame.payload.thread_id, events);
+        if (resolvedClientEventIds.length > 0) {
+          this.callbacks.reconcileEvents(frame.payload.thread_id, events, resolvedClientEventIds);
+        } else {
+          this.callbacks.onEventAppend(frame.payload.thread_id, events);
+        }
         break;
       }
       case "event.list.result": {
@@ -633,6 +703,27 @@ function createWorkerStore() {
           events: { ...s.events, [threadId]: [...existing, ...unique] }
         };
       }),
+      reconcileEvents: (threadId, newEvents, resolvedClientEventIds) => set((s) => {
+        const existing = s.events[threadId] ?? [];
+        const existingIds = new Set(existing.map((e) => e.id));
+        const unique = newEvents.filter((e) => !existingIds.has(e.id));
+        let optEvents = s.optimistic[threadId] ?? [];
+        let optKeys = s.optimisticKeys[threadId] ?? [];
+        for (const clientEventId of resolvedClientEventIds) {
+          const idx = optKeys.indexOf(clientEventId);
+          if (idx >= 0) {
+            optEvents = [...optEvents];
+            optEvents.splice(idx, 1);
+            optKeys = [...optKeys];
+            optKeys.splice(idx, 1);
+          }
+        }
+        return {
+          events: { ...s.events, [threadId]: [...existing, ...unique] },
+          optimistic: { ...s.optimistic, [threadId]: optEvents },
+          optimisticKeys: { ...s.optimisticKeys, [threadId]: optKeys }
+        };
+      }),
       onEventListResult: (threadId, olderEvents, cursor, hasMore) => set((s) => {
         const existing = s.events[threadId] ?? [];
         const existingIds = new Set(existing.map((e) => e.id));
@@ -748,6 +839,7 @@ function WorkerProvider({
   organizationRole,
   workspaceRole,
   authToken,
+  uploadUrl,
   onError,
   children
 }) {
@@ -760,6 +852,9 @@ function WorkerProvider({
   react.useEffect(() => {
     clientRef.current?.setOnError(onError ?? null);
   }, [onError]);
+  react.useEffect(() => {
+    clientRef.current?.setUploadUrl(uploadUrl);
+  }, [uploadUrl]);
   react.useEffect(() => {
     if (!url || !workerId) return;
     clientRef.current?.connect(url, workerId, {
@@ -818,6 +913,93 @@ function useAnalytics() {
   const unsubscribe = react.useCallback(() => client.unsubscribeAnalytics(), [client]);
   return { events, counters, subscribe, unsubscribe };
 }
+function getPreferredMimeType() {
+  if (typeof MediaRecorder !== "undefined") {
+    if (MediaRecorder.isTypeSupported("audio/webm;codecs=opus")) return "audio/webm;codecs=opus";
+    if (MediaRecorder.isTypeSupported("audio/webm")) return "audio/webm";
+    if (MediaRecorder.isTypeSupported("audio/mp4")) return "audio/mp4";
+  }
+  return "audio/webm";
+}
+function useAudioRecorder() {
+  const [isRecording, setIsRecording] = react.useState(false);
+  const [duration, setDuration] = react.useState(0);
+  const mediaRecorderRef = react.useRef(null);
+  const streamRef = react.useRef(null);
+  const chunksRef = react.useRef([]);
+  const timerRef = react.useRef(null);
+  const startTimeRef = react.useRef(0);
+  const resolveStopRef = react.useRef(null);
+  const releaseStream = react.useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => {
+      t.stop();
+    });
+    streamRef.current = null;
+  }, []);
+  const clearTimer = react.useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      if (mediaRecorderRef.current?.state === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      releaseStream();
+      clearTimer();
+    };
+  }, [releaseStream, clearTimer]);
+  const start = react.useCallback(async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    streamRef.current = stream;
+    const mimeType = getPreferredMimeType();
+    const recorder = new MediaRecorder(stream, { mimeType });
+    mediaRecorderRef.current = recorder;
+    chunksRef.current = [];
+    recorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunksRef.current.push(e.data);
+    };
+    recorder.onstop = () => {
+      const blob = new Blob(chunksRef.current, { type: mimeType.split(";")[0] });
+      releaseStream();
+      clearTimer();
+      resolveStopRef.current?.(blob);
+      resolveStopRef.current = null;
+    };
+    startTimeRef.current = Date.now();
+    setDuration(0);
+    timerRef.current = setInterval(() => {
+      setDuration(Math.floor((Date.now() - startTimeRef.current) / 1e3));
+    }, 1e3);
+    recorder.start();
+    setIsRecording(true);
+  }, [releaseStream, clearTimer]);
+  const stop = react.useCallback(() => {
+    return new Promise((resolve, reject) => {
+      if (!mediaRecorderRef.current || mediaRecorderRef.current.state === "inactive") {
+        reject(new Error("No active recording to stop"));
+        return;
+      }
+      resolveStopRef.current = resolve;
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+      setDuration(0);
+    });
+  }, []);
+  const cancel = react.useCallback(() => {
+    resolveStopRef.current = null;
+    if (mediaRecorderRef.current?.state === "recording") {
+      mediaRecorderRef.current.stop();
+    }
+    releaseStream();
+    clearTimer();
+    setIsRecording(false);
+    setDuration(0);
+  }, [releaseStream, clearTimer]);
+  return { start, stop, cancel, isRecording, duration };
+}
 function useConnection() {
   const { client } = useWorkerContext();
   const status = useStore((s) => s.connection.status);
@@ -884,7 +1066,7 @@ function useThreadDetails(threadId) {
   const confirmed = useStore((s) => threadId ? s.events[threadId] ?? EMPTY_ARRAY : EMPTY_ARRAY);
   const runs = useStore((s) => threadId ? s.runs[threadId] ?? EMPTY_RUNS : EMPTY_RUNS);
   const events = react.useMemo(
-    () => optimistic.length ? [...optimistic, ...confirmed] : confirmed,
+    () => optimistic.length ? [...confirmed, ...optimistic] : confirmed,
     [optimistic, confirmed]
   );
   return { thread, events, runs, isLoading, isWaiting };
@@ -923,10 +1105,32 @@ function useThreadsActions() {
   const loadMore = react.useCallback((limit) => client.loadMoreThreads(limit), [client]);
   return { deleteThread, loadMore };
 }
+function useUpload() {
+  const { client } = useWorkerContext();
+  const [isUploading, setIsUploading] = react.useState(false);
+  const activeCountRef = react.useRef(0);
+  const upload = react.useCallback(
+    async (file) => {
+      activeCountRef.current++;
+      setIsUploading(true);
+      try {
+        return await client.upload(file);
+      } finally {
+        activeCountRef.current--;
+        if (activeCountRef.current === 0) {
+          setIsUploading(false);
+        }
+      }
+    },
+    [client]
+  );
+  return { upload, isUploading };
+}
 
 exports.WorkerProvider = WorkerProvider;
 exports.isSettingsFieldGroup = isSettingsFieldGroup;
 exports.useAnalytics = useAnalytics;
+exports.useAudioRecorder = useAudioRecorder;
 exports.useConnection = useConnection;
 exports.useFeedback = useFeedback;
 exports.useMessage = useMessage;
@@ -935,5 +1139,6 @@ exports.useThreadDetails = useThreadDetails;
 exports.useThreadEvents = useThreadEvents;
 exports.useThreadsActions = useThreadsActions;
 exports.useThreadsList = useThreadsList;
+exports.useUpload = useUpload;
 //# sourceMappingURL=main.cjs.map
 //# sourceMappingURL=main.cjs.map