@dxos/plugin-thread 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/dist/lib/browser/{chunk-ERWASUQK.mjs → chunk-HDLDMR54.mjs}

@@ -1,41 +1,72 @@
 import {
+  createBlackCanvasStreamTrack,
   createInaudibleAudioStreamTrack
-} from "./chunk-6NSMBO3B.mjs";
+} from "./chunk-ISCHODBV.mjs";
 
 // src/hooks/analytics.ts
 import { useCallback } from "react";
-import { createIntent, useIntentDispatcher } from "@dxos/app-framework";
-import { ObservabilityAction } from "@dxos/plugin-observability/types";
-import { getSpace } from "@dxos/react-client/echo";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { Obj } from "@dxos/echo";
+import { ObservabilityOperation } from "@dxos/plugin-observability/types";
 import { useOnTransition } from "@dxos/react-ui";
 var useOnEditAnalytics = (message, textBlock, editing) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const onEdit = useCallback(() => {
-    const space = getSpace(message);
-    if (!space || !textBlock) {
+    if (!message || !textBlock) {
       return;
     }
-    void dispatch(createIntent(ObservabilityAction.SendEvent, {
+    const db = Obj.getDatabase(message);
+    if (!db) {
+      return;
+    }
+    void invokePromise(ObservabilityOperation.SendEvent, {
       name: "threads.message.update",
       properties: {
-        spaceId: space.id,
+        spaceId: db.spaceId,
         messageId: message.id,
         messageLength: textBlock?.text.length
       }
-    }));
+    });
   }, [
-    dispatch,
+    invokePromise,
     message,
     textBlock
   ]);
   useOnTransition(editing, true, false, onEdit);
 };
 
+// src/hooks/useBlackCanvasStreamTrack.tsx
+import { useEffect, useState } from "react";
+import { scheduleTask } from "@dxos/async";
+import { Context } from "@dxos/context";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/hooks/useBlackCanvasStreamTrack.tsx";
+var useBlackCanvasStreamTrack = () => {
+  const [blackCanvasStreamTrack, setBlackCanvasStreamTrack] = useState(void 0);
+  useEffect(() => {
+    const ctx = new Context(void 0, {
+      F: __dxlog_file,
+      L: 15
+    });
+    scheduleTask(ctx, async () => {
+      const blackCanvasStreamTrack2 = await createBlackCanvasStreamTrack({
+        ctx,
+        width: 720,
+        height: 480
+      });
+      setBlackCanvasStreamTrack(blackCanvasStreamTrack2);
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, []);
+  return blackCanvasStreamTrack;
+};
+
 // src/hooks/useDebugMode.ts
-import { useState, useEffect } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 var useDebugMode = () => {
-  const [enabled, setEnabled] = useState(false);
-  useEffect(() => {
+  const [enabled, setEnabled] = useState2(false);
+  useEffect2(() => {
     const handler = (ev) => {
       if (ev.key.toLowerCase() === "d" && ev.ctrlKey) {
         ev.preventDefault();
@@ -52,11 +83,36 @@ var useDebugMode = () => {
   return enabled;
 };
 
+// src/hooks/useInaudibleAudioStreamTrack.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { scheduleTask as scheduleTask2 } from "@dxos/async";
+import { Context as Context2 } from "@dxos/context";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/hooks/useInaudibleAudioStreamTrack.tsx";
+var useInaudibleAudioStreamTrack = () => {
+  const [audioStreamTrack, setAudioStreamTrack] = useState3(void 0);
+  useEffect3(() => {
+    const ctx = new Context2(void 0, {
+      F: __dxlog_file2,
+      L: 15
+    });
+    scheduleTask2(ctx, async () => {
+      const audioStreamTrack2 = await createInaudibleAudioStreamTrack({
+        ctx
+      });
+      setAudioStreamTrack(audioStreamTrack2);
+    });
+    return () => {
+      void ctx.dispose();
+    };
+  }, []);
+  return audioStreamTrack;
+};
+
 // src/hooks/useStatus.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 var useStatus = (space, channel) => {
-  const [processing, setProcessing] = useState2(false);
-  useEffect2(() => {
+  const [processing, setProcessing] = useState4(false);
+  useEffect4(() => {
     if (!space || !channel) {
       return;
     }
@@ -85,23 +141,26 @@ var useStatus = (space, channel) => {
 };
 
 // src/hooks/useVideoStreamTrack.tsx
-import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect5, useRef, useState as useState5 } from "react";
 var useVideoStreamTrack = (videoElement, videoSrc) => {
-  const [videoStreamTrack, setVideoStreamTrack] = useState3(void 0);
+  const [videoStreamTrack, setVideoStreamTrack] = useState5(void 0);
   const hadRun = useRef(false);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!videoElement.current || hadRun.current || !videoSrc) {
       return;
     }
     hadRun.current = true;
     videoElement.current.addEventListener("playing", () => {
+      if (videoStreamTrack) {
+        return;
+      }
       const stream = videoElement.current.captureStream();
       const track = stream.getTracks()[0];
-      if (track) {
+      if (track && !videoStreamTrack) {
         setVideoStreamTrack(track);
       }
       stream.onaddtrack = (event) => {
-        if (event.track.kind === "video") {
+        if (event.track.kind === "video" && !videoStreamTrack) {
           setVideoStreamTrack(event.track);
         }
       };
@@ -114,36 +173,12 @@ var useVideoStreamTrack = (videoElement, videoSrc) => {
   return videoStreamTrack;
 };
 
-// src/hooks/useInaudibleAudioStreamTrack.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { scheduleTask } from "@dxos/async";
-import { Context } from "@dxos/context";
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/hooks/useInaudibleAudioStreamTrack.tsx";
-var useInaudibleAudioStreamTrack = () => {
-  const [audioStreamTrack, setAudioStreamTrack] = useState4(void 0);
-  useEffect4(() => {
-    const ctx = new Context(void 0, {
-      F: __dxlog_file,
-      L: 15
-    });
-    scheduleTask(ctx, async () => {
-      const audioStreamTrack2 = await createInaudibleAudioStreamTrack({
-        ctx
-      });
-      setAudioStreamTrack(audioStreamTrack2);
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, []);
-  return audioStreamTrack;
-};
-
 export {
   useOnEditAnalytics,
+  useBlackCanvasStreamTrack,
   useDebugMode,
+  useInaudibleAudioStreamTrack,
   useStatus,
-  useVideoStreamTrack,
-  useInaudibleAudioStreamTrack
+  useVideoStreamTrack
 };
-//# sourceMappingURL=chunk-ERWASUQK.mjs.map
+//# sourceMappingURL=chunk-HDLDMR54.mjs.map

package/dist/lib/browser/chunk-HDLDMR54.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/analytics.ts", "../../../src/hooks/useBlackCanvasStreamTrack.tsx", "../../../src/hooks/useDebugMode.ts", "../../../src/hooks/useInaudibleAudioStreamTrack.tsx", "../../../src/hooks/useStatus.ts", "../../../src/hooks/useVideoStreamTrack.tsx"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useCallback } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { Obj } from '@dxos/echo';\nimport { ObservabilityOperation } from '@dxos/plugin-observability/types';\nimport { useOnTransition } from '@dxos/react-ui';\nimport { type ContentBlock } from '@dxos/types';\n\nexport const useOnEditAnalytics = (\n  message: any | undefined,\n  textBlock: ContentBlock.Text | undefined,\n  editing: boolean,\n) => {\n  const { invokePromise } = useOperationInvoker();\n\n  const onEdit = useCallback(() => {\n    if (!message || !textBlock) {\n      return;\n    }\n\n    const db = Obj.getDatabase(message);\n    if (!db) {\n      return;\n    }\n\n    void invokePromise(ObservabilityOperation.SendEvent, {\n      name: 'threads.message.update',\n      properties: {\n        spaceId: db.spaceId,\n        messageId: message.id,\n        messageLength: textBlock?.text.length,\n      },\n    });\n  }, [invokePromise, message, textBlock]);\n\n  useOnTransition(editing, true, false, onEdit);\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { scheduleTask } from '@dxos/async';\nimport { Context } from '@dxos/context';\n\nimport { createBlackCanvasStreamTrack } from '../calls/util/stub-media-streams';\n\nexport const useBlackCanvasStreamTrack = () => {\n  const [blackCanvasStreamTrack, setBlackCanvasStreamTrack] = useState<MediaStreamTrack | undefined>(undefined);\n  useEffect(() => {\n    const ctx = new Context();\n    scheduleTask(ctx, async () => {\n      const blackCanvasStreamTrack = await createBlackCanvasStreamTrack({ ctx, width: 720, height: 480 });\n      setBlackCanvasStreamTrack(blackCanvasStreamTrack);\n    });\n\n    return () => {\n      void ctx.dispose();\n    };\n  }, []);\n\n  return blackCanvasStreamTrack;\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\n// TODO(burdon): Standardize across plugins/composer.\nexport const useDebugMode = () => {\n  const [enabled, setEnabled] = useState(false);\n  useEffect(() => {\n    const handler = (ev: KeyboardEvent) => {\n      if (ev.key.toLowerCase() === 'd' && ev.ctrlKey) {\n        ev.preventDefault();\n        setEnabled(!enabled);\n      }\n    };\n\n    document.addEventListener('keypress', handler);\n    return () => {\n      document.removeEventListener('keypress', handler);\n    };\n  }, [enabled]);\n\n  return enabled;\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { scheduleTask } from '@dxos/async';\nimport { Context } from '@dxos/context';\n\nimport { createInaudibleAudioStreamTrack } from '../calls/util/stub-media-streams';\n\nexport const useInaudibleAudioStreamTrack = () => {\n  const [audioStreamTrack, setAudioStreamTrack] = useState<MediaStreamTrack | undefined>(undefined);\n  useEffect(() => {\n    const ctx = new Context();\n    scheduleTask(ctx, async () => {\n      const audioStreamTrack = await createInaudibleAudioStreamTrack({ ctx });\n      setAudioStreamTrack(audioStreamTrack);\n    });\n\n    return () => {\n      void ctx.dispose();\n    };\n  }, []);\n\n  return audioStreamTrack;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Space } from '@dxos/react-client/echo';\n\n// TODO(burdon): Generalize and factor out.\nexport const useStatus = (space?: Space, channel?: string) => {\n  const [processing, setProcessing] = useState(false);\n  useEffect(() => {\n    if (!space || !channel) {\n      return;\n    }\n\n    const unsubscribe = space.listen(`status/${channel}`, (status) => {\n      const { event } = status.payload ?? {};\n      setProcessing(event === 'processing');\n    });\n\n    const t = setInterval(() => {\n      setProcessing((prev: any) => {\n        if (typeof prev?.ts === 'number' && Date.now() - prev.ts > 30_000) {\n          return undefined;\n        } else {\n          return prev;\n        }\n      });\n    }, 1_000);\n\n    return () => {\n      unsubscribe();\n      clearInterval(t);\n    };\n  }, [space, channel]);\n\n  return processing;\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type RefObject, useEffect, useRef, useState } from 'react';\n\nexport const useVideoStreamTrack = (videoElement: RefObject<HTMLVideoElement | null>, videoSrc: string) => {\n  // Get video stream track.\n  const [videoStreamTrack, setVideoStreamTrack] = useState<MediaStreamTrack | undefined>(undefined);\n  const hadRun = useRef(false);\n  useEffect(() => {\n    // This is done to capture only one video stream.\n    if (!videoElement.current || hadRun.current || !videoSrc) {\n      return;\n    }\n    hadRun.current = true;\n    videoElement.current.addEventListener('playing', () => {\n      if (videoStreamTrack) {\n        return;\n      }\n      const stream = (videoElement.current as any).captureStream();\n      const track = stream.getTracks()[0];\n      if (track && !videoStreamTrack) {\n        setVideoStreamTrack(track);\n      }\n      stream.onaddtrack = (event: MediaStreamTrackEvent) => {\n        if (event.track.kind === 'video' && !videoStreamTrack) {\n          setVideoStreamTrack(event.track);\n        }\n      };\n    });\n    videoElement.current.src = videoSrc;\n  }, [videoElement.current, videoSrc]);\n\n  return videoStreamTrack;\n};\n"],
+  "mappings": "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",
+  "names": ["useCallback", "useOperationInvoker", "Obj", "ObservabilityOperation", "useOnTransition", "useOnEditAnalytics", "message", "textBlock", "editing", "invokePromise", "useOperationInvoker", "onEdit", "useCallback", "db", "Obj", "getDatabase", "ObservabilityOperation", "SendEvent", "name", "properties", "spaceId", "messageId", "id", "messageLength", "text", "length", "useOnTransition", "useEffect", "useState", "scheduleTask", "Context", "useBlackCanvasStreamTrack", "blackCanvasStreamTrack", "setBlackCanvasStreamTrack", "useState", "undefined", "useEffect", "ctx", "Context", "scheduleTask", "createBlackCanvasStreamTrack", "width", "height", "dispose", "useEffect", "useState", "useDebugMode", "enabled", "setEnabled", "useState", "useEffect", "handler", "ev", "key", "toLowerCase", "ctrlKey", "preventDefault", "document", "addEventListener", "removeEventListener", "useEffect", "useState", "scheduleTask", "Context", "useInaudibleAudioStreamTrack", "audioStreamTrack", "setAudioStreamTrack", "useState", "undefined", "useEffect", "ctx", "Context", "scheduleTask", "createInaudibleAudioStreamTrack", "dispose", "useEffect", "useState", "useStatus", "space", "channel", "processing", "setProcessing", "useState", "useEffect", "unsubscribe", "listen", "status", "event", "payload", "t", "setInterval", "prev", "ts", "Date", "now", "undefined", "clearInterval", "useEffect", "useRef", "useState", "useVideoStreamTrack", "videoElement", "videoSrc", "videoStreamTrack", "setVideoStreamTrack", "useState", "undefined", "hadRun", "useRef", "useEffect", "current", "addEventListener", "stream", "captureStream", "track", "getTracks", "onaddtrack", "event", "kind", "src"]
+}

package/dist/lib/browser/{chunk-6NSMBO3B.mjs → chunk-ISCHODBV.mjs}

@@ -1,5 +1,5 @@
 // src/calls/util/stub-media-streams.ts
-import { waitForCondition, scheduleTaskInterval } from "@dxos/async";
+import { scheduleTaskInterval, waitForCondition } from "@dxos/async";
 import { cancelWithContext } from "@dxos/context";
 import { invariant } from "@dxos/invariant";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/calls/util/stub-media-streams.ts";
@@ -21,7 +21,7 @@ var createBlackCanvasStreamTrack = async ({ ctx, width, height }) => {
     canvasCtx.fillStyle = "black";
     canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
   };
-  scheduleTaskInterval(ctx, async () => drawFrame(), 1e3);
+  scheduleTaskInterval(ctx, async () => drawFrame(), 200);
   const track = canvas.captureStream().getVideoTracks()[0];
   drawFrame();
   await cancelWithContext(ctx, waitForCondition({
@@ -30,18 +30,68 @@ var createBlackCanvasStreamTrack = async ({ ctx, width, height }) => {
   }));
   return track;
 };
+var audioContextStartedPreviously = false;
+var userGestureEvents = [
+  "click",
+  "contextmenu",
+  "auxclick",
+  "dblclick",
+  "mousedown",
+  "mouseup",
+  "pointerup",
+  "touchend",
+  "keydown",
+  "keyup"
+];
 var createInaudibleAudioStreamTrack = async ({ ctx }) => {
   const audioContext = new window.AudioContext();
   const oscillator = audioContext.createOscillator();
   oscillator.type = "triangle";
   oscillator.frequency.setValueAtTime(20, audioContext.currentTime);
   const gainNode = audioContext.createGain();
-  gainNode.gain.setValueAtTime(0.02, audioContext.currentTime);
+  gainNode.gain.setValueAtTime(0, audioContext.currentTime);
   oscillator.connect(gainNode);
   const destination = audioContext.createMediaStreamDestination();
   gainNode.connect(destination);
-  oscillator.start();
+  let oscillatorStarted = false;
+  const ensureOscillatorStarted = () => {
+    if (oscillatorStarted) return;
+    oscillator.start();
+    oscillatorStarted = true;
+  };
+  const stateChangeHandler = () => {
+    if (audioContext.state === "running") {
+      audioContextStartedPreviously = true;
+      ensureOscillatorStarted();
+    }
+    if (audioContext.state === "suspended" || audioContext.state === "interrupted") {
+      resumeAudioContext();
+    }
+  };
+  audioContext.addEventListener("statechange", stateChangeHandler);
+  const resumeAudioContext = () => {
+    void audioContext.resume().then(() => {
+      cleanUpUserGestureListeners();
+    });
+  };
+  const cleanUpUserGestureListeners = () => {
+    userGestureEvents.forEach((gesture) => {
+      document.removeEventListener(gesture, resumeAudioContext, {
+        capture: true
+      });
+    });
+  };
+  if (audioContextStartedPreviously) {
+    resumeAudioContext();
+  } else {
+    userGestureEvents.forEach((gesture) => {
+      document.addEventListener(gesture, resumeAudioContext, {
+        capture: true
+      });
+    });
+  }
   ctx.onDispose(async () => {
+    cleanUpUserGestureListeners();
     oscillator.disconnect();
     oscillator.stop();
     await audioContext.close();
@@ -53,4 +103,4 @@ export {
   createBlackCanvasStreamTrack,
   createInaudibleAudioStreamTrack
 };
-//# sourceMappingURL=chunk-6NSMBO3B.mjs.map
+//# sourceMappingURL=chunk-ISCHODBV.mjs.map

package/dist/lib/browser/chunk-ISCHODBV.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/calls/util/stub-media-streams.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n//\n\nimport { scheduleTaskInterval, waitForCondition } from '@dxos/async';\nimport { type Context, cancelWithContext } from '@dxos/context';\nimport { invariant } from '@dxos/invariant';\n\n/**\n * Creates a black canvas stream track.\n * We need this to to have black rectangle video that is live (have frames) when video feed is disabled.\n */\nexport const createBlackCanvasStreamTrack = async ({\n  ctx,\n  width,\n  height,\n}: {\n  ctx: Context;\n  width: number;\n  height: number;\n}): Promise<MediaStreamTrack> => {\n  const canvas = document.createElement('canvas');\n  canvas.width = width;\n  canvas.height = height;\n\n  const canvasCtx = canvas.getContext('2d');\n  invariant(canvasCtx);\n  const drawFrame = () => {\n    canvasCtx.fillStyle = 'black';\n    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);\n  };\n  scheduleTaskInterval(ctx, async () => drawFrame(), 200);\n\n  const track = canvas.captureStream().getVideoTracks()[0];\n  drawFrame();\n\n  await cancelWithContext(ctx, waitForCondition({ condition: () => track.readyState === 'live', timeout: 1_000 }));\n\n  return track;\n};\n\nlet audioContextStartedPreviously = false;\nconst userGestureEvents = [\n  'click',\n  'contextmenu',\n  'auxclick',\n  'dblclick',\n  'mousedown',\n  'mouseup',\n  'pointerup',\n  'touchend',\n  'keydown',\n  'keyup',\n];\n\n/**\n * Creates an inaudible audio stream track.\n * We need this to have audio track available when audio is disabled.\n */\nexport const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context }): Promise<MediaStreamTrack> => {\n  const audioContext = new window.AudioContext();\n\n  const oscillator = audioContext.createOscillator();\n  oscillator.type = 'triangle';\n  oscillator.frequency.setValueAtTime(20, audioContext.currentTime);\n\n  const gainNode = audioContext.createGain();\n  gainNode.gain.setValueAtTime(0, audioContext.currentTime);\n  oscillator.connect(gainNode);\n\n  const destination = audioContext.createMediaStreamDestination();\n  gainNode.connect(destination);\n\n  let oscillatorStarted = false;\n  const ensureOscillatorStarted = () => {\n    if (oscillatorStarted) return;\n    oscillator.start();\n    oscillatorStarted = true;\n  };\n\n  const stateChangeHandler = () => {\n    if (audioContext.state === 'running') {\n      audioContextStartedPreviously = true;\n      ensureOscillatorStarted();\n    }\n\n    if (audioContext.state === 'suspended' || (audioContext.state as string) === 'interrupted') {\n      resumeAudioContext();\n    }\n  };\n\n  audioContext.addEventListener('statechange', stateChangeHandler);\n\n  const resumeAudioContext = () => {\n    void audioContext.resume().then(() => {\n      cleanUpUserGestureListeners();\n    });\n  };\n\n  const cleanUpUserGestureListeners = () => {\n    userGestureEvents.forEach((gesture) => {\n      document.removeEventListener(gesture, resumeAudioContext, {\n        capture: true,\n      });\n    });\n  };\n\n  if (audioContextStartedPreviously) {\n    resumeAudioContext();\n  } else {\n    userGestureEvents.forEach((gesture) => {\n      document.addEventListener(gesture, resumeAudioContext, {\n        capture: true,\n      });\n    });\n  }\n\n  ctx.onDispose(async () => {\n    cleanUpUserGestureListeners();\n    oscillator.disconnect();\n    oscillator.stop();\n    await audioContext.close();\n  });\n\n  return destination.stream.getAudioTracks()[0];\n};\n"],
+  "mappings": ";AAKA,SAASA,sBAAsBC,wBAAwB;AACvD,SAAuBC,yBAAyB;AAChD,SAASC,iBAAiB;;AAMnB,IAAMC,+BAA+B,OAAO,EACjDC,KACAC,OACAC,OAAM,MAKP;AACC,QAAMC,SAASC,SAASC,cAAc,QAAA;AACtCF,SAAOF,QAAQA;AACfE,SAAOD,SAASA;AAEhB,QAAMI,YAAYH,OAAOI,WAAW,IAAA;AACpCT,YAAUQ,WAAAA,QAAAA;;;;;;;;;AACV,QAAME,YAAY,MAAA;AAChBF,cAAUG,YAAY;AACtBH,cAAUI,SAAS,GAAG,GAAGP,OAAOF,OAAOE,OAAOD,MAAM;EACtD;AACAP,uBAAqBK,KAAK,YAAYQ,UAAAA,GAAa,GAAA;AAEnD,QAAMG,QAAQR,OAAOS,cAAa,EAAGC,eAAc,EAAG,CAAA;AACtDL,YAAAA;AAEA,QAAMX,kBAAkBG,KAAKJ,iBAAiB;IAAEkB,WAAW,MAAMH,MAAMI,eAAe;IAAQC,SAAS;EAAM,CAAA,CAAA;AAE7G,SAAOL;AACT;AAEA,IAAIM,gCAAgC;AACpC,IAAMC,oBAAoB;EACxB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAOK,IAAMC,kCAAkC,OAAO,EAAEnB,IAAG,MAAoB;AAC7E,QAAMoB,eAAe,IAAIC,OAAOC,aAAY;AAE5C,QAAMC,aAAaH,aAAaI,iBAAgB;AAChDD,aAAWE,OAAO;AAClBF,aAAWG,UAAUC,eAAe,IAAIP,aAAaQ,WAAW;AAEhE,QAAMC,WAAWT,aAAaU,WAAU;AACxCD,WAASE,KAAKJ,eAAe,GAAGP,aAAaQ,WAAW;AACxDL,aAAWS,QAAQH,QAAAA;AAEnB,QAAMI,cAAcb,aAAac,6BAA4B;AAC7DL,WAASG,QAAQC,WAAAA;AAEjB,MAAIE,oBAAoB;AACxB,QAAMC,0BAA0B,MAAA;AAC9B,QAAID,kBAAmB;AACvBZ,eAAWc,MAAK;AAChBF,wBAAoB;EACtB;AAEA,QAAMG,qBAAqB,MAAA;AACzB,QAAIlB,aAAamB,UAAU,WAAW;AACpCtB,sCAAgC;AAChCmB,8BAAAA;IACF;AAEA,QAAIhB,aAAamB,UAAU,eAAgBnB,aAAamB,UAAqB,eAAe;AAC1FC,yBAAAA;IACF;EACF;AAEApB,eAAaqB,iBAAiB,eAAeH,kBAAAA;AAE7C,QAAME,qBAAqB,MAAA;AACzB,SAAKpB,aAAasB,OAAM,EAAGC,KAAK,MAAA;AAC9BC,kCAAAA;IACF,CAAA;EACF;AAEA,QAAMA,8BAA8B,MAAA;AAClC1B,sBAAkB2B,QAAQ,CAACC,YAAAA;AACzB1C,eAAS2C,oBAAoBD,SAASN,oBAAoB;QACxDQ,SAAS;MACX,CAAA;IACF,CAAA;EACF;AAEA,MAAI/B,+BAA+B;AACjCuB,uBAAAA;EACF,OAAO;AACLtB,sBAAkB2B,QAAQ,CAACC,YAAAA;AACzB1C,eAASqC,iBAAiBK,SAASN,oBAAoB;QACrDQ,SAAS;MACX,CAAA;IACF,CAAA;EACF;AAEAhD,MAAIiD,UAAU,YAAA;AACZL,gCAAAA;AACArB,eAAW2B,WAAU;AACrB3B,eAAW4B,KAAI;AACf,UAAM/B,aAAagC,MAAK;EAC1B,CAAA;AAEA,SAAOnB,YAAYoB,OAAOC,eAAc,EAAG,CAAA;AAC7C;",
+  "names": ["scheduleTaskInterval", "waitForCondition", "cancelWithContext", "invariant", "createBlackCanvasStreamTrack", "ctx", "width", "height", "canvas", "document", "createElement", "canvasCtx", "getContext", "drawFrame", "fillStyle", "fillRect", "track", "captureStream", "getVideoTracks", "condition", "readyState", "timeout", "audioContextStartedPreviously", "userGestureEvents", "createInaudibleAudioStreamTrack", "audioContext", "window", "AudioContext", "oscillator", "createOscillator", "type", "frequency", "setValueAtTime", "currentTime", "gainNode", "createGain", "gain", "connect", "destination", "createMediaStreamDestination", "oscillatorStarted", "ensureOscillatorStarted", "start", "stateChangeHandler", "state", "resumeAudioContext", "addEventListener", "resume", "then", "cleanUpUserGestureListeners", "forEach", "gesture", "removeEventListener", "capture", "onDispose", "disconnect", "stop", "close", "stream", "getAudioTracks"]
+}

package/dist/lib/browser/chunk-J5LGTIGS.mjs

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-J5LGTIGS.mjs.map

package/dist/lib/browser/chunk-J75MXJZN.mjs

@@ -0,0 +1,105 @@
+// src/blueprints/thread-blueprint.ts
+import { Blueprint, Template } from "@dxos/blueprints";
+import { trim } from "@dxos/util";
+
+// src/functions/create-proposals.ts
+import * as Array from "effect/Array";
+import * as Effect from "effect/Effect";
+import * as Function from "effect/Function";
+import * as Schema from "effect/Schema";
+import { computeDiffsWithCursors } from "@dxos/assistant";
+import { Database, Obj, Ref, Relation } from "@dxos/echo";
+import { createDocAccessor } from "@dxos/echo-db";
+import { defineFunction } from "@dxos/functions";
+import { Markdown } from "@dxos/plugin-markdown/types";
+import { AnchoredTo, Message, Thread } from "@dxos/types";
+var create_proposals_default = defineFunction({
+  key: "org.dxos.function.thread.create-proposals",
+  name: "Create Proposals",
+  description: "Proposes a set of changes to a document.",
+  inputSchema: Schema.Struct({
+    doc: Ref.Ref(Markdown.Document).annotations({
+      description: "The ID of the document."
+    }),
+    diffs: Schema.Array(Schema.String).annotations({
+      description: "The diffs to propose for the document."
+    })
+  }),
+  outputSchema: Schema.Void,
+  handler: Effect.fn(function* ({ data: { doc, diffs: _diffs } }) {
+    const object = yield* Database.load(doc);
+    const content = yield* Effect.promise(() => object.content.load());
+    const accessor = createDocAccessor(content, [
+      "content"
+    ]);
+    yield* Function.pipe(computeDiffsWithCursors(accessor, _diffs), Array.map(Effect.fnUntraced(function* ({ cursor, text }) {
+      const proposal = Obj.make(Message.Message, {
+        created: (/* @__PURE__ */ new Date()).toISOString(),
+        sender: {
+          role: "assistant"
+        },
+        blocks: [
+          {
+            _tag: "proposal",
+            text
+          }
+        ]
+      });
+      const thread = Thread.make({
+        name: "Proposal",
+        messages: [
+          Ref.make(proposal)
+        ],
+        status: "active"
+      });
+      const relation = Relation.make(AnchoredTo.AnchoredTo, {
+        [Relation.Source]: thread,
+        [Relation.Target]: object,
+        anchor: cursor
+      });
+      yield* Database.add(thread);
+      yield* Database.add(relation);
+    })), Effect.allWith({
+      concurrency: "unbounded"
+    }));
+  })
+});
+
+// src/functions/index.ts
+var ThreadFunctions = {
+  CreateProposals: create_proposals_default
+};
+
+// src/blueprints/thread-blueprint.ts
+var BLUEPRINT_KEY = "org.dxos.blueprint.thread";
+var functions = Object.values(ThreadFunctions);
+var make = () => Blueprint.make({
+  key: BLUEPRINT_KEY,
+  name: "Thread",
+  tools: Blueprint.toolDefinitions({
+    functions
+  }),
+  instructions: Template.make({
+    // TODO(wittjosiah): Move example to function input schema annotation.
+    source: trim`
+        You can update markdown documents via proposals.
+        For each diff, respond with the smallest possible matching span.
+        For example:
+          - "There is a tyop in this sentence."
+          + "There is a typo in this sentence."
+          - "This id goof."
+          + "This is good."
+      `
+  })
+});
+var blueprint = {
+  key: BLUEPRINT_KEY,
+  functions,
+  make
+};
+var thread_blueprint_default = blueprint;
+
+export {
+  thread_blueprint_default
+};
+//# sourceMappingURL=chunk-J75MXJZN.mjs.map

package/dist/lib/browser/chunk-J75MXJZN.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/blueprints/thread-blueprint.ts", "../../../src/functions/create-proposals.ts", "../../../src/functions/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type AppCapabilities } from '@dxos/app-toolkit';\nimport { Blueprint, Template } from '@dxos/blueprints';\nimport { trim } from '@dxos/util';\n\nimport { ThreadFunctions } from '../functions';\n\nconst BLUEPRINT_KEY = 'org.dxos.blueprint.thread';\n\nconst functions = Object.values(ThreadFunctions);\n\nconst make = () =>\n  Blueprint.make({\n    key: BLUEPRINT_KEY,\n    name: 'Thread',\n    tools: Blueprint.toolDefinitions({ functions }),\n    instructions: Template.make({\n      // TODO(wittjosiah): Move example to function input schema annotation.\n      source: trim`\n        You can update markdown documents via proposals.\n        For each diff, respond with the smallest possible matching span.\n        For example:\n          - \"There is a tyop in this sentence.\"\n          + \"There is a typo in this sentence.\"\n          - \"This id goof.\"\n          + \"This is good.\"\n      `,\n    }),\n  });\n\nconst blueprint: AppCapabilities.BlueprintDefinition = {\n  key: BLUEPRINT_KEY,\n  functions,\n  make,\n};\n\nexport default blueprint;\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Array from 'effect/Array';\nimport * as Effect from 'effect/Effect';\nimport * as Function from 'effect/Function';\nimport * as Schema from 'effect/Schema';\n\nimport { computeDiffsWithCursors } from '@dxos/assistant';\nimport { Database, Obj, Ref, Relation } from '@dxos/echo';\nimport { createDocAccessor } from '@dxos/echo-db';\nimport { defineFunction } from '@dxos/functions';\nimport { Markdown } from '@dxos/plugin-markdown/types';\nimport { AnchoredTo, Message, Thread } from '@dxos/types';\n\nexport default defineFunction({\n  key: 'org.dxos.function.thread.create-proposals',\n  name: 'Create Proposals',\n  description: 'Proposes a set of changes to a document.',\n  inputSchema: Schema.Struct({\n    doc: Ref.Ref(Markdown.Document).annotations({\n      description: 'The ID of the document.',\n    }),\n    diffs: Schema.Array(Schema.String).annotations({\n      description: 'The diffs to propose for the document.',\n    }),\n  }),\n  outputSchema: Schema.Void,\n  handler: Effect.fn(function* ({ data: { doc, diffs: _diffs } }) {\n    const object = yield* Database.load(doc);\n    const content = yield* Effect.promise(() => object.content.load());\n    const accessor = createDocAccessor(content, ['content']);\n\n    yield* Function.pipe(\n      computeDiffsWithCursors(accessor, _diffs),\n      Array.map(\n        Effect.fnUntraced(function* ({ cursor, text }) {\n          const proposal = Obj.make(Message.Message, {\n            created: new Date().toISOString(),\n            sender: { role: 'assistant' },\n            blocks: [{ _tag: 'proposal', text }],\n          });\n          const thread = Thread.make({ name: 'Proposal', messages: [Ref.make(proposal)], status: 'active' });\n          const relation = Relation.make(AnchoredTo.AnchoredTo, {\n            [Relation.Source]: thread,\n            [Relation.Target]: object,\n            anchor: cursor,\n          });\n          yield* Database.add(thread);\n          yield* Database.add(relation);\n        }),\n      ),\n      Effect.allWith({ concurrency: 'unbounded' }),\n    );\n  }),\n});\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport CreateProposals from './create-proposals';\n\nexport const ThreadFunctions = {\n  CreateProposals,\n};\n"],
+  "mappings": ";AAKA,SAASA,WAAWC,gBAAgB;AACpC,SAASC,YAAY;;;ACFrB,YAAYC,WAAW;AACvB,YAAYC,YAAY;AACxB,YAAYC,cAAc;AAC1B,YAAYC,YAAY;AAExB,SAASC,+BAA+B;AACxC,SAASC,UAAUC,KAAKC,KAAKC,gBAAgB;AAC7C,SAASC,yBAAyB;AAClC,SAASC,sBAAsB;AAC/B,SAASC,gBAAgB;AACzB,SAASC,YAAYC,SAASC,cAAc;AAE5C,IAAA,2BAAeC,eAAe;EAC5BC,KAAK;EACLC,MAAM;EACNC,aAAa;EACbC,aAAoBC,cAAO;IACzBC,KAAKC,IAAIA,IAAIC,SAASC,QAAQ,EAAEC,YAAY;MAC1CP,aAAa;IACf,CAAA;IACAQ,OAAcC,aAAaC,aAAM,EAAEH,YAAY;MAC7CP,aAAa;IACf,CAAA;EACF,CAAA;EACAW,cAAqBC;EACrBC,SAAgBC,UAAG,WAAW,EAAEC,MAAM,EAAEZ,KAAKK,OAAOQ,OAAM,EAAE,GAAE;AAC5D,UAAMC,SAAS,OAAOC,SAASC,KAAKhB,GAAAA;AACpC,UAAMiB,UAAU,OAAcC,eAAQ,MAAMJ,OAAOG,QAAQD,KAAI,CAAA;AAC/D,UAAMG,WAAWC,kBAAkBH,SAAS;MAAC;KAAU;AAEvD,WAAgBI,cACdC,wBAAwBH,UAAUN,MAAAA,GAC5BU,UACGC,kBAAW,WAAW,EAAEC,QAAQC,KAAI,GAAE;AAC3C,YAAMC,WAAWC,IAAIC,KAAKC,QAAQA,SAAS;QACzCC,UAAS,oBAAIC,KAAAA,GAAOC,YAAW;QAC/BC,QAAQ;UAAEC,MAAM;QAAY;QAC5BC,QAAQ;UAAC;YAAEC,MAAM;YAAYX;UAAK;;MACpC,CAAA;AACA,YAAMY,SAASC,OAAOV,KAAK;QAAEjC,MAAM;QAAY4C,UAAU;UAACvC,IAAI4B,KAAKF,QAAAA;;QAAYc,QAAQ;MAAS,CAAA;AAChG,YAAMC,WAAWC,SAASd,KAAKe,WAAWA,YAAY;QACpD,CAACD,SAASE,MAAM,GAAGP;QACnB,CAACK,SAASG,MAAM,GAAGhC;QACnBiC,QAAQtB;MACV,CAAA;AACA,aAAOV,SAASiC,IAAIV,MAAAA;AACpB,aAAOvB,SAASiC,IAAIN,QAAAA;IACtB,CAAA,CAAA,GAEKO,eAAQ;MAAEC,aAAa;IAAY,CAAA,CAAA;EAE9C,CAAA;AACF,CAAA;;;AClDO,IAAMC,kBAAkB;EAC7BC;AACF;;;AFEA,IAAMC,gBAAgB;AAEtB,IAAMC,YAAYC,OAAOC,OAAOC,eAAAA;AAEhC,IAAMC,OAAO,MACXC,UAAUD,KAAK;EACbE,KAAKP;EACLQ,MAAM;EACNC,OAAOH,UAAUI,gBAAgB;IAAET;EAAU,CAAA;EAC7CU,cAAcC,SAASP,KAAK;;IAE1BQ,QAAQC;;;;;;;;;EASV,CAAA;AACF,CAAA;AAEF,IAAMC,YAAiD;EACrDR,KAAKP;EACLC;EACAI;AACF;AAEA,IAAA,2BAAeU;",
+  "names": ["Blueprint", "Template", "trim", "Array", "Effect", "Function", "Schema", "computeDiffsWithCursors", "Database", "Obj", "Ref", "Relation", "createDocAccessor", "defineFunction", "Markdown", "AnchoredTo", "Message", "Thread", "defineFunction", "key", "name", "description", "inputSchema", "Struct", "doc", "Ref", "Markdown", "Document", "annotations", "diffs", "Array", "String", "outputSchema", "Void", "handler", "fn", "data", "_diffs", "object", "Database", "load", "content", "promise", "accessor", "createDocAccessor", "pipe", "computeDiffsWithCursors", "map", "fnUntraced", "cursor", "text", "proposal", "Obj", "make", "Message", "created", "Date", "toISOString", "sender", "role", "blocks", "_tag", "thread", "Thread", "messages", "status", "relation", "Relation", "AnchoredTo", "Source", "Target", "anchor", "add", "allWith", "concurrency", "ThreadFunctions", "CreateProposals", "BLUEPRINT_KEY", "functions", "Object", "values", "ThreadFunctions", "make", "Blueprint", "key", "name", "tools", "toolDefinitions", "instructions", "Template", "source", "trim", "blueprint"]
+}

package/dist/lib/browser/chunk-JMH6UT5J.mjs

@@ -0,0 +1,127 @@
+import {
+  MessagePanel
+} from "./chunk-D7PVIURR.mjs";
+import {
+  useStatus
+} from "./chunk-HDLDMR54.mjs";
+import {
+  getMessageMetadata
+} from "./chunk-CP7E2HRE.mjs";
+import {
+  command
+} from "./chunk-2M2HV5K4.mjs";
+import {
+  meta
+} from "./chunk-QVJO3VJ4.mjs";
+
+// src/containers/ChatContainer/ChatContainer.tsx
+import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Obj, Ref } from "@dxos/echo";
+import { useMembers } from "@dxos/react-client/echo";
+import { useIdentity } from "@dxos/react-client/halo";
+import { Icon, ScrollArea, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { StackItem } from "@dxos/react-ui-stack";
+import { MessageTextbox, Thread as ThreadComponent, threadLayout } from "@dxos/react-ui-thread";
+import { Message } from "@dxos/types";
+import { createBasicExtensions, createThemeExtensions, listener } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
+import { isNonNullable } from "@dxos/util";
+var ChatContainer = ({ classNames, space, thread, context, autoFocusTextbox, current }) => {
+  const { t } = useTranslation(meta.id);
+  const { themeMode } = useThemeContext();
+  const id = Obj.getDXN(thread).toString();
+  const identity = useIdentity();
+  const members = useMembers(space?.id);
+  const activity = useStatus(space, id);
+  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+  const threadScrollRef = useRef(null);
+  const [_count, _setCount] = useState(0);
+  const rerenderEditor = () => _setCount((count) => count + 1);
+  const textboxMetadata = getMessageMetadata(id, identity);
+  const messageRef = useRef("");
+  const extensions = useMemo(() => [
+    createBasicExtensions({
+      placeholder: t("message placeholder")
+    }),
+    createThemeExtensions({
+      themeMode
+    }),
+    listener({
+      onChange: ({ text }) => messageRef.current = text
+    }),
+    command
+  ], [
+    themeMode,
+    _count
+  ]);
+  const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
+    behavior,
+    block: "end"
+  }), 10);
+  useLayoutEffect(() => {
+    scrollToEnd("instant");
+  }, []);
+  const handleCreate = () => {
+    if (!messageRef.current?.length) {
+      return false;
+    }
+    Obj.change(thread, (t2) => {
+      t2.messages.push(Ref.make(Obj.make(Message.Message, {
+        created: (/* @__PURE__ */ new Date()).toISOString(),
+        sender: {
+          identityDid: identity.did
+        },
+        blocks: [
+          {
+            _tag: "text",
+            text: messageRef.current
+          }
+        ],
+        properties: context ? {
+          context: Ref.make(context)
+        } : void 0
+      })));
+    });
+    messageRef.current = "";
+    setAutoFocus(true);
+    scrollToEnd("smooth");
+    rerenderEditor();
+    return true;
+  };
+  return /* @__PURE__ */ React.createElement(ThreadComponent.Root, {
+    id,
+    current,
+    classNames: [
+      "dx-container grid-rows-[1fr_min-content_min-content]",
+      classNames
+    ]
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+    classNames: "col-span-2",
+    orientation: "vertical"
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, {
+    ref: threadScrollRef
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx(threadLayout, "place-self-end")
+  }, thread.messages.map((message) => message.target).filter(isNonNullable).map((message) => /* @__PURE__ */ React.createElement(MessagePanel, {
+    key: message.id,
+    message,
+    members
+  }))))), /* @__PURE__ */ React.createElement(MessageTextbox, {
+    extensions,
+    autoFocus,
+    onSend: handleCreate,
+    ...textboxMetadata
+  }), /* @__PURE__ */ React.createElement(ThreadComponent.Status, {
+    activity
+  }, t("activity message")));
+};
+
+// src/containers/ChatContainer/index.ts
+var ChatContainer_default = ChatContainer;
+
+export {
+  ChatContainer,
+  ChatContainer_default
+};
+//# sourceMappingURL=chunk-JMH6UT5J.mjs.map

package/dist/lib/browser/chunk-JMH6UT5J.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ChatContainer/ChatContainer.tsx", "../../../src/containers/ChatContainer/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { Obj, Ref } from '@dxos/echo';\nimport { type Space, useMembers } from '@dxos/react-client/echo';\nimport { useIdentity } from '@dxos/react-client/halo';\nimport { Icon, ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport {\n  MessageTextbox,\n  type MessageTextboxProps,\n  Thread as ThreadComponent,\n  type ThreadRootProps,\n  threadLayout,\n} from '@dxos/react-ui-thread';\nimport { Message, type Thread } from '@dxos/types';\nimport { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';\nimport { mx } from '@dxos/ui-theme';\nimport { isNonNullable } from '@dxos/util';\n\nimport { MessagePanel } from '../../components';\nimport { command } from '../../extensions';\nimport { useStatus } from '../../hooks';\nimport { meta } from '../../meta';\nimport { getMessageMetadata } from '../../util';\n\nexport type ChatContainerProps = ThemedClassName<\n  {\n    space: Space;\n    thread: Thread.Thread;\n    context?: Obj.Unknown;\n    autoFocusTextbox?: boolean;\n  } & Pick<ThreadRootProps, 'current'>\n>;\n\nexport const ChatContainer = ({\n  classNames,\n  space,\n  thread,\n  context,\n  autoFocusTextbox,\n  current,\n}: ChatContainerProps) => {\n  const { t } = useTranslation(meta.id);\n  const { themeMode } = useThemeContext();\n\n  const id = Obj.getDXN(thread).toString();\n  const identity = useIdentity()!;\n  const members = useMembers(space?.id);\n  const activity = useStatus(space, id);\n  const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);\n  const threadScrollRef = useRef<HTMLDivElement | null>(null);\n\n  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.\n  const [_count, _setCount] = useState(0);\n  const rerenderEditor = () => _setCount((count) => count + 1);\n\n  const textboxMetadata = getMessageMetadata(id, identity);\n  const messageRef = useRef('');\n  const extensions = useMemo(\n    () => [\n      createBasicExtensions({ placeholder: t('message placeholder') }),\n      createThemeExtensions({ themeMode }),\n      listener({ onChange: ({ text }) => (messageRef.current = text) }),\n      command,\n    ],\n    [themeMode, _count],\n  );\n\n  // TODO(thure): Factor out.\n  // TODO(thure): `flex-col-reverse` does not work to start the container scrolled to the end while also using\n  //  `ScrollArea`. This is the least-bad way I found to scroll to the end on mount. Note that 0ms was insufficient\n  //  for the desired effect; this is likely hardware-dependent and should be reevaluated.\n  const scrollToEnd = (behavior: ScrollBehavior) =>\n    setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);\n\n  useLayoutEffect(() => {\n    scrollToEnd('instant');\n  }, []);\n\n  // TODO(burdon): Change to model.\n  const handleCreate: MessageTextboxProps['onSend'] = () => {\n    if (!messageRef.current?.length) {\n      return false;\n    }\n\n    Obj.change(thread, (t) => {\n      t.messages.push(\n        Ref.make(\n          Obj.make(Message.Message, {\n            created: new Date().toISOString(),\n            sender: { identityDid: identity.did },\n            blocks: [{ _tag: 'text', text: messageRef.current }],\n            properties: context ? { context: Ref.make(context) } : undefined,\n          }),\n        ),\n      );\n    });\n\n    messageRef.current = '';\n    setAutoFocus(true);\n    scrollToEnd('smooth');\n    rerenderEditor();\n    return true;\n  };\n\n  return (\n    <ThreadComponent.Root\n      id={id}\n      current={current}\n      classNames={['dx-container grid-rows-[1fr_min-content_min-content]', classNames]}\n    >\n      <ScrollArea.Root classNames='col-span-2' orientation='vertical'>\n        <ScrollArea.Viewport ref={threadScrollRef}>\n          <div role='none' className={mx(threadLayout, 'place-self-end')}>\n            {thread.messages\n              .map((message) => message.target)\n              .filter(isNonNullable)\n              .map((message) => (\n                <MessagePanel key={message.id} message={message} members={members} />\n              ))}\n          </div>\n        </ScrollArea.Viewport>\n      </ScrollArea.Root>\n\n      <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />\n      <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>\n    </ThreadComponent.Root>\n  );\n};\n\nexport const ChatHeading = ({ attendableId }: { attendableId?: string }) => {\n  const { t } = useTranslation(meta.id);\n  return (\n    <div role='none' className='flex items-center'>\n      <StackItem.SigilButton attendableId={attendableId}>\n        <Icon icon='ph--chat--regular' size={5} />\n      </StackItem.SigilButton>\n      <StackItem.HeadingLabel attendableId={attendableId}>{t('chat heading')}</StackItem.HeadingLabel>\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ChatContainer } from './ChatContainer';\n\nexport { ChatContainer };\nexport default ChatContainer;\n"],
+  "mappings": "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",
+  "names": ["React", "useLayoutEffect", "useMemo", "useRef", "useState", "Obj", "Ref", "useMembers", "useIdentity", "Icon", "ScrollArea", "useThemeContext", "useTranslation", "StackItem", "MessageTextbox", "Thread", "ThreadComponent", "threadLayout", "Message", "createBasicExtensions", "createThemeExtensions", "listener", "mx", "isNonNullable", "ChatContainer", "classNames", "space", "thread", "context", "autoFocusTextbox", "current", "t", "useTranslation", "meta", "id", "themeMode", "useThemeContext", "Obj", "getDXN", "toString", "identity", "useIdentity", "members", "useMembers", "activity", "useStatus", "autoFocus", "setAutoFocus", "useState", "threadScrollRef", "useRef", "_count", "_setCount", "rerenderEditor", "count", "textboxMetadata", "getMessageMetadata", "messageRef", "extensions", "useMemo", "createBasicExtensions", "placeholder", "createThemeExtensions", "listener", "onChange", "text", "command", "scrollToEnd", "behavior", "setTimeout", "scrollIntoView", "block", "useLayoutEffect", "handleCreate", "length", "change", "messages", "push", "Ref", "make", "Message", "created", "Date", "toISOString", "sender", "identityDid", "did", "blocks", "_tag", "properties", "undefined", "ThreadComponent", "Root", "ScrollArea", "orientation", "Viewport", "ref", "div", "role", "className", "mx", "threadLayout", "map", "message", "target", "filter", "isNonNullable", "MessagePanel", "key", "MessageTextbox", "onSend", "Status", "ChatContainer"]
+}