@abot-ai/runtime 1.7.0 → 1.8.0

package/dist/src/web-ui/app/controllers/app-event-bindings.js

@@ -1,8 +1,10 @@
+import { beginConversationNavigation, canNavigateConversation } from "./conversation-navigation-intent.js";
 import {
   focusSelectedMenuItem,
   handleMenuNavigation,
 } from "../components/menu-navigation.js";
 import { createWebSessionId, textOf } from "../lib/text-format.js";
+import { createEnvironmentTransition, environmentChangeWasDeclined } from "./environment-transition.js";
 
 export function createAppEventBindings({
   state,
@@ -15,103 +17,44 @@ export function createAppEventBindings({
   onSessionCreated = () => {},
   onNavigationChange = () => {},
 }) {
-  let environmentChangeRevision = 0;
-  let environmentChanging = false;
-  let prepareAdditionalEnvironmentChange = () => true;
+  const environmentTransition = createEnvironmentTransition({
+    state, dom, actions, prepareQueueRecovery, onNavigationChange,
+    onFailure: (error) => shell.showToast?.(error instanceof Error ? error.message : String(error), "failed"),
+  });
 
   function prepareQueueRecovery() {
     if (actions.prepareQueueRecovery) return actions.prepareQueueRecovery();
     return actions.suspendQueueRecovery();
   }
 
-  function suspendQueueRecovery() {
-    const prepared = prepareQueueRecovery();
-    if (environmentChangeWasDeclined(prepared)) return false;
-    if (typeof prepared === "function") prepared();
-    return true;
-  }
-
-  async function changeEnvironment(
-    nextEnvironmentId,
-    { restoreSession = true, notifyEnvironmentChange = true } = {},
-  ) {
-    const previousEnvironmentId = actions.savedEnvironmentId?.() || "";
-    const recoveryEnvironmentId =
-      state.activeComposerQueueRecovery?.scope.environmentId ?? "";
-    const restoreEnvironmentSelection = () => {
-      dom.environmentSelect.value =
-        previousEnvironmentId || recoveryEnvironmentId;
-      state.agentPickerOpen = false;
-      actions.renderAgentPicker();
-    };
-    if (nextEnvironmentId === previousEnvironmentId) {
-      state.agentPickerOpen = false;
-      actions.renderAgentPicker();
-      return true;
-    }
-    dom.environmentSelect.value = nextEnvironmentId;
-    const preparedEnvironmentChange = actions.beforeEnvironmentChange
-      ? actions.beforeEnvironmentChange({
-          from: previousEnvironmentId,
-          to: nextEnvironmentId,
-        })
-      : true;
-    if (environmentChangeWasDeclined(preparedEnvironmentChange)) {
-      restoreEnvironmentSelection();
-      return false;
-    }
-    const preparedAdditionalChange = prepareAdditionalEnvironmentChange();
-    if (environmentChangeWasDeclined(preparedAdditionalChange)) {
-      restoreEnvironmentSelection();
+  async function prepareCurrentQueueRecovery() {
+    if (!canNavigateConversation(state)) {
+      shell.showToast?.("Wait for the environment change to finish before starting a conversation.", "neutral");
       return false;
     }
-    const preparedQueueRecovery = prepareQueueRecovery();
-    if (environmentChangeWasDeclined(preparedQueueRecovery)) {
-      restoreEnvironmentSelection();
-      return false;
-    }
-    const revision = ++environmentChangeRevision;
-    environmentChanging = true;
-    if (typeof preparedAdditionalChange === "function") preparedAdditionalChange();
-    if (typeof preparedQueueRecovery === "function") preparedQueueRecovery();
-    if (typeof preparedEnvironmentChange === "function")
-      preparedEnvironmentChange();
-    actions.invalidateSessionLoads?.();
-    state.agentPickerOpen = false;
-    actions.renderAgentPicker();
-    actions.saveEnvironmentId(nextEnvironmentId);
-    state.currentSessionId = "";
-    state.messages = [];
-    actions.clearAttachments();
-    actions.resetLiveRequestView();
-    dom.sessionTitle.textContent = "New conversation";
-    actions.applyConversationChrome();
-    actions.renderMessages();
-    try {
-      const loading = Promise.allSettled([
-        actions.loadModels(),
-        actions.loadAgentMode(),
-        actions.loadRuntimeConfig({
-          protectUnsaved: false,
-          clearBeforeLoad: true,
-        }),
-      ]);
-      if (notifyEnvironmentChange) {
-        const ChangeEvent =
-          dom.environmentSelect.ownerDocument?.defaultView?.Event ?? Event;
-        dom.environmentSelect.dispatchEvent(new ChangeEvent("change"));
-      }
-      await loading;
-      if (revision !== environmentChangeRevision) return false;
-      if (dom.environmentSelect.value !== nextEnvironmentId) return false;
-      if (restoreSession) await actions.restoreLastSession();
-      return dom.environmentSelect.value === nextEnvironmentId;
-    } finally {
-      if (revision === environmentChangeRevision) {
-        environmentChanging = false;
-        onNavigationChange();
-      }
-    }
+    const isCurrentNavigation = beginConversationNavigation(state);
+    const navigationRevision = shell.navigationRevision?.();
+    const environment = actions.selectedEnvironmentId?.();
+    const session = state.currentSessionId;
+    const prepared = await prepareQueueRecovery();
+    if (environmentChangeWasDeclined(prepared)) return false;
+    if (!canNavigateConversation(state)) return false;
+    if (!isCurrentNavigation()) return false;
+    if (prepared?.canCommit?.() === false) return false;
+    const hasCurrentWorkspaceNavigation = navigationRevision === shell.navigationRevision?.();
+    if (!hasCurrentWorkspaceNavigation) return false;
+    if (actions.selectedEnvironmentId?.() !== environment) return false;
+    if (state.currentSessionId !== session) return false;
+    return () => {
+      if (!canNavigateConversation(state)) return false;
+      if (!isCurrentNavigation()) return false;
+      if (navigationRevision !== shell.navigationRevision?.()) return false;
+      if (actions.selectedEnvironmentId?.() !== environment) return false;
+      if (state.currentSessionId !== session) return false;
+      if (prepared?.canCommit?.() === false) return false;
+      if (typeof prepared === "function") prepared();
+      return true;
+    };
   }
 
   function bind() {
@@ -126,13 +69,15 @@ export function createAppEventBindings({
       "click",
       () => void actions.loadSessions(),
     );
-    dom.newSessionButton.addEventListener("click", () => {
+    dom.newSessionButton.addEventListener("click", async () => {
+      const recovery = await prepareCurrentQueueRecovery();
+      if (!recovery) return;
       const preparedWorkspaceActivation = shell.prepareWorkspaceActivation(
         "chat",
         { focus: false },
       );
       if (!preparedWorkspaceActivation) return;
-      if (!suspendQueueRecovery()) return;
+      if (recovery() === false) return;
       if (preparedWorkspaceActivation() === false) return;
       state.currentSessionId = createWebSessionId();
       onSessionCreated(state.currentSessionId);
@@ -142,7 +87,6 @@ export function createAppEventBindings({
       );
       actions.rememberModelSelection();
       state.messages = [];
-      actions.clearAttachments();
       actions.resetLiveRequestView();
       actions.setCurrentSessionTitle(state.currentSessionId);
       actions.applyConversationChrome();
@@ -152,11 +96,7 @@ export function createAppEventBindings({
       shell.setSessionsDrawerOpen(false);
       dom.composerInput.focus();
     });
-    dom.environmentSelect.addEventListener("change", () => {
-      void changeEnvironment(dom.environmentSelect.value, {
-        notifyEnvironmentChange: false,
-      });
-    }, true);
+    dom.environmentSelect.addEventListener("change", environmentTransition.onSelectChange, true);
     dom.agentPickerButton.addEventListener("click", (event) => {
       event.stopPropagation();
       state.agentPickerOpen = !state.agentPickerOpen;
@@ -366,13 +306,6 @@ export function createAppEventBindings({
 
   return {
     bind,
-    changeEnvironment,
-    setEnvironmentChangePreparation(prepare) { prepareAdditionalEnvironmentChange = prepare; },
-    isEnvironmentChanging: () => environmentChanging,
+    ...environmentTransition,
   };
 }
-
-function environmentChangeWasDeclined(preparedChange) {
-  if (preparedChange === false) return true;
-  return preparedChange === null;
-}

package/dist/src/web-ui/app/controllers/chat-request-controller.d.ts

@@ -0,0 +1,28 @@
+import type { createRuntimeWebClient } from "../services/runtime-web-client.js";
+import type { createConversationSessionController } from "./conversation-session-controller.js";
+import type { ComposerScope } from "./composer-drafts.js";
+import type { ComposerSubmissionAttempt, ComposerSubmissionSettings } from "./composer-submission-lifecycle.js";
+
+type RuntimeWebClient = ReturnType<typeof createRuntimeWebClient>;
+export type ComposerChatClient = Pick<RuntimeWebClient, "postChatMessage" | "stopChatRequest">;
+export type ComposerChatSession = Pick<ReturnType<typeof createConversationSessionController>, "appendLocalUserMessage" | "activateRequestForScope">;
+export type ComposerChatAttempt = ComposerSubmissionAttempt<ComposerSubmissionSettings>;
+
+export interface ChatRequestControllerOptions {
+  client: ComposerChatClient;
+  conversationView: { reset(): void };
+  conversationSession: ComposerChatSession;
+  isCurrentComposerScope(scope: ComposerScope): boolean;
+  applyConversationChrome(): void;
+  renderSessions(): void;
+}
+
+export interface ChatRequestController {
+  prepareView(attempt: ComposerSubmissionAttempt): void;
+  postChatMessage: RuntimeWebClient["postChatMessage"];
+  send(attempt: ComposerChatAttempt): Promise<string>;
+  activate(attempt: ComposerSubmissionAttempt, requestId: string): void;
+  stopRequest: RuntimeWebClient["stopChatRequest"];
+}
+
+export declare function createChatRequestController(options: ChatRequestControllerOptions): ChatRequestController;

package/dist/src/web-ui/app/controllers/chat-request-controller.js

@@ -1,79 +1,47 @@
+import { ComposerSubmissionRefused, isDefiniteSubmissionRefusal } from "./composer-submission-lifecycle.js";
+
+/** Request effects use an immutable captured payload, never the currently visible draft. */
 export function createChatRequestController({
-  state,
-  client,
-  sessionQueue,
-  conversationView,
-  conversationSession,
-  attachments,
-  currentComposerScope,
-  isCurrentComposerScope,
-  rememberModelSelection,
-  applyConversationChrome,
-  renderSessions,
-  renderAttachments,
-  getToolPermissionMode,
-  getModelPreference,
-  clearQueueRecovery,
-  reportQueueFailure,
+  client, conversationView, conversationSession, isCurrentComposerScope,
+  applyConversationChrome, renderSessions,
 }) {
-  function postChatMessage(request) {
-    return client.postChatMessage(request);
-  }
-
-  async function sendMessage(text) {
-    conversationSession.ensureSession();
-    const scope = currentComposerScope();
+  const optimisticRows = new WeakMap();
+  function prepareView(attempt) {
+    if (!isCurrentComposerScope(attempt.payload.scope)) return;
     conversationView.reset();
-    rememberModelSelection();
     applyConversationChrome();
     renderSessions();
+    optimisticRows.set(attempt, conversationSession.appendLocalUserMessage(attempt.payload));
+  }
 
-    const submittedAttachments = [...state.pendingAttachments];
-    attachments.invalidateCompletions();
-    state.pendingAttachments = [];
-    renderAttachments();
-
-    conversationSession.appendLocalUserMessage({
-      text,
-      attachments: submittedAttachments,
-    });
-
-    let requestId;
-    try {
-      requestId = await postChatMessage({
-        text,
-        attachments: submittedAttachments,
-        environmentId: scope.environmentId,
-        sessionId: scope.sessionId,
-        agentMode: state.agentMode,
-        toolPermissionMode: getToolPermissionMode(),
-        modelPreference: getModelPreference(),
-      });
-    } catch (error) {
-      if (isCurrentComposerScope(scope)) {
-        state.pendingAttachments = [
-          ...submittedAttachments,
-          ...state.pendingAttachments,
-        ];
-        renderAttachments();
-      }
+  async function postChatMessage(request) {
+    try { return await client.postChatMessage(request); }
+    catch (error) {
+      if (hasDefiniteChatRejection(error))
+        throw new ComposerSubmissionRefused(error.message, { cause: error });
       throw error;
     }
+  }
 
-    try {
-      const rebound = sessionQueue.rebindBlocked(scope, requestId);
-      if (rebound) clearQueueRecovery(scope);
-    } catch (error) {
-      reportQueueFailure(
-        scope,
-        `The request started, but the remaining Send next queue is paused: ${
-          error instanceof Error ? error.message : String(error)
-        }`,
-      );
-    }
+  async function send(attempt) {
+    try { return await postChatMessage({ ...attempt.payload, ...attempt.payload.scope, ...attempt.settings }); }
+    catch (error) {
+      const removeLocalRow = optimisticRows.get(attempt);
+      if (isDefiniteSubmissionRefusal(error) && typeof removeLocalRow === "function") removeLocalRow();
+      throw error;
+    } finally { optimisticRows.delete(attempt); }
+  }
 
-    conversationSession.activateRequestForScope(scope, requestId);
+  function hasDefiniteChatRejection(error) {
+    if (["unsupported_tool_permission_mode", "full_plus_not_supported"].includes(error?.code)) return true;
+    return Number.isFinite(error?.status) && error.status >= 400 && error.status < 500;
   }
 
-  return { postChatMessage, sendMessage, stopRequest: (scope) => client.stopChatRequest(scope) };
+  return {
+    prepareView,
+    postChatMessage,
+    send,
+    activate: (attempt, requestId) => conversationSession.activateRequestForScope(attempt.payload.scope, requestId),
+    stopRequest: (scope) => client.stopChatRequest(scope),
+  };
 }

package/dist/src/web-ui/app/controllers/composer-attachments-controller.d.ts

@@ -1,33 +1,11 @@
-export type ComposerAttachment = Record<string, unknown> & {
-  id?: string;
-  kind?: string;
-  name?: string;
-  mimeType?: string;
-  sessionId?: string;
-  storageRef?: string;
-  environment?: string;
-};
+import type { ComposerAttachment, ComposerDraft } from "./composer-drafts.js";
+export type { ComposerAttachment } from "./composer-drafts.js";
 
-export type ComposerUploadFile = Blob & {
-  name?: string;
-};
-
-export interface ComposerAttachmentsState {
-  currentSessionId: string;
-  pendingAttachments: ComposerAttachment[];
-  pendingAttachmentUploadCounts: Map<number, number>;
-  composerAttachmentGeneration: number;
-}
+export type ComposerUploadFile = Blob & { name?: string };
 
 export interface ComposerAttachmentsDom {
-  attachmentButton: {
-    disabled: boolean;
-    title: string;
-  };
-  attachmentPreview: {
-    innerHTML: string;
-    appendChild(child: unknown): unknown;
-  };
+  attachmentButton: { disabled: boolean; title: string };
+  attachmentPreview: { innerHTML: string; appendChild(child: HTMLElement): unknown };
 }
 
 export interface ComposerAttachmentsShell {
@@ -62,17 +40,18 @@ export interface ComposerAttachmentControlEvent {
 }
 
 export interface ComposerAttachmentsControllerOptions {
-  state: ComposerAttachmentsState;
+  getDraft(): ComposerDraft;
+  canDeleteAttachment?(attachment: ComposerAttachment): boolean;
   dom: ComposerAttachmentsDom;
   shell: ComposerAttachmentsShell;
   client: ComposerAttachmentsClient;
-  selectedEnvironmentId: () => string;
-  selectedModelSupportsImageInput: () => boolean;
-  ensureSession: () => void;
-  onSendStateChange: () => void;
-  onControlEvent: (event: ComposerAttachmentControlEvent) => void;
-  isComposerAvailable?: () => boolean;
-  isComposerVisible?: () => boolean;
+  selectedEnvironmentId(): string;
+  selectedModelSupportsImageInput(): boolean;
+  ensureSession(): void;
+  onSendStateChange(): void;
+  onControlEvent(event: ComposerAttachmentControlEvent): void;
+  isComposerAvailable?(): boolean;
+  isComposerVisible?(): boolean;
 }
 
 export interface ComposerAttachmentsController {
@@ -80,14 +59,10 @@ export interface ComposerAttachmentsController {
   clear(options?: { cleanup?: boolean }): void;
   cleanup(attachments: readonly ComposerAttachment[]): void;
   deletePending(attachment: ComposerAttachment): Promise<void>;
-  invalidateCompletions(): void;
   previewUrl(attachment: ComposerAttachment): string;
   removeUnsupportedImages(): void;
   render(): void;
-  setUploadInProgress(uploading: boolean, generation?: number): void;
   upload(file: ComposerUploadFile): Promise<void>;
 }
 
-export declare function createComposerAttachmentsController(
-  options: ComposerAttachmentsControllerOptions,
-): ComposerAttachmentsController;
+export declare function createComposerAttachmentsController(options: ComposerAttachmentsControllerOptions): ComposerAttachmentsController;

package/dist/src/web-ui/app/controllers/composer-attachments-controller.js

@@ -5,7 +5,8 @@ import {
 import { escapeHtml, textOf } from "../lib/text-format.js";
 
 export function createComposerAttachmentsController({
-  state,
+  getDraft,
+  canDeleteAttachment = () => true,
   dom,
   shell,
   client,
@@ -31,7 +32,7 @@ export function createComposerAttachmentsController({
     const storageRef = textOf(attachment.storageRef).trim();
     const id = textOf(attachment.id).trim();
     const mimeType = textOf(attachment.mimeType).trim().toLowerCase();
-    const sessionId = attachmentSessionId(attachment) || state.currentSessionId;
+    const sessionId = attachmentSessionId(attachment) || getDraft().scope.sessionId;
     if (!storageRef || !id || !mimeType || !sessionId) return "";
     return client.attachmentPreviewUrl({
       environmentId: attachmentEnvironmentId(attachment),
@@ -48,6 +49,7 @@ export function createComposerAttachmentsController({
     const mimeType = textOf(attachment.mimeType).trim();
     const sessionId = attachmentSessionId(attachment);
     if (!storageRef || !id || !mimeType || !sessionId) return;
+    if (!canDeleteAttachment(attachment)) return;
     try {
       await client.deleteAttachment({
         environmentId: attachmentEnvironmentId(attachment),
@@ -70,43 +72,7 @@ export function createComposerAttachmentsController({
     for (const attachment of attachments) void deletePending(attachment);
   }
 
-  function activeUploadCount() {
-    return (
-      state.pendingAttachmentUploadCounts.get(
-        state.composerAttachmentGeneration,
-      ) ?? 0
-    );
-  }
-
-  function pruneUploadCounts() {
-    for (const generation of state.pendingAttachmentUploadCounts.keys()) {
-      if (generation !== state.composerAttachmentGeneration) {
-        state.pendingAttachmentUploadCounts.delete(generation);
-      }
-    }
-  }
-
-  function invalidateCompletions() {
-    state.composerAttachmentGeneration += 1;
-    pruneUploadCounts();
-    onSendStateChange();
-  }
-
-  function setUploadInProgress(uploading, generation) {
-    const uploadGeneration =
-      Number.isFinite(generation) && generation >= 0
-        ? generation
-        : state.composerAttachmentGeneration;
-    const nextCount = Math.max(
-      0,
-      (state.pendingAttachmentUploadCounts.get(uploadGeneration) ?? 0) +
-        (uploading ? 1 : -1),
-    );
-    if (nextCount === 0)
-      state.pendingAttachmentUploadCounts.delete(uploadGeneration);
-    else state.pendingAttachmentUploadCounts.set(uploadGeneration, nextCount);
-    onSendStateChange();
-  }
+  function activeUploadCount() { return getDraft().uploading; }
 
   function render() {
     if (!isComposerVisible()) return;
@@ -118,7 +84,7 @@ export function createComposerAttachmentsController({
         ? "Attach a file or image"
         : "Attach a document (this model does not accept images)";
     dom.attachmentPreview.innerHTML = "";
-    for (const attachment of state.pendingAttachments) {
+    for (const attachment of getDraft().attachments) {
       const chip = document.createElement("span");
       chip.className = "attachment-chip";
       chip.innerHTML = `
@@ -126,7 +92,7 @@ export function createComposerAttachmentsController({
         <button type="button" aria-label="Remove attachment">×</button>
       `;
       chip.querySelector("button")?.addEventListener("click", () => {
-        state.pendingAttachments = state.pendingAttachments.filter(
+        getDraft().attachments = getDraft().attachments.filter(
           (item) => item.id !== attachment.id,
         );
         void deletePending(attachment);
@@ -139,7 +105,7 @@ export function createComposerAttachmentsController({
 
   function removeUnsupportedImages() {
     if (selectedModelSupportsImageInput()) return;
-    const unsupported = state.pendingAttachments.filter(
+    const unsupported = getDraft().attachments.filter(
       (attachment) =>
         attachment.kind === "image" ||
         isImageAttachmentMimeType(attachment.mimeType),
@@ -148,7 +114,7 @@ export function createComposerAttachmentsController({
     const unsupportedIds = new Set(
       unsupported.map((attachment) => attachment.id),
     );
-    state.pendingAttachments = state.pendingAttachments.filter(
+    getDraft().attachments = getDraft().attachments.filter(
       (attachment) => !unsupportedIds.has(attachment.id),
     );
     cleanup(unsupported);
@@ -158,19 +124,15 @@ export function createComposerAttachmentsController({
   }
 
   function clear(options = {}) {
-    invalidateCompletions();
-    if (state.pendingAttachments.length === 0) return;
-    const attachments = [...state.pendingAttachments];
-    state.pendingAttachments = [];
+    const draft = getDraft();
+    const attachments = draft.clearAttachments();
     render();
     if (options.cleanup !== false) cleanup(attachments);
   }
 
-  function canRetainUploadedAttachment(scope) {
-    if (state.currentSessionId !== scope.sessionId) return false;
-    if (selectedEnvironmentId() !== scope.environmentId) return false;
-    if (state.composerAttachmentGeneration !== scope.generation) return false;
-    if (!scope.imageAttachment) return true;
+  function canRetainUploadedAttachment(draft, imageAttachment) {
+    if (!imageAttachment) return true;
+    if (draft !== getDraft()) return true;
     return selectedModelSupportsImageInput();
   }
 
@@ -184,15 +146,14 @@ export function createComposerAttachmentsController({
     if (imageAttachment && !selectedModelSupportsImageInput()) {
       throw new Error("Selected model does not support image input");
     }
-    if (state.pendingAttachments.length >= 4) {
+    if (getDraft().attachments.length + getDraft().uploading >= 4) {
       throw new Error("You can attach up to 4 files to one request");
     }
     ensureSession();
-    const uploadEnvironmentId = selectedEnvironmentId();
-    const uploadSessionId = state.currentSessionId;
-    invalidateCompletions();
-    const uploadGeneration = state.composerAttachmentGeneration;
-    setUploadInProgress(true, uploadGeneration);
+    const draft = getDraft();
+    const uploadEnvironmentId = draft.scope.environmentId;
+    const uploadSessionId = draft.scope.sessionId;
+    const uploadGeneration = draft.startUpload();
     try {
       const uploadedAttachment = await client.uploadAttachment({
         environmentId: uploadEnvironmentId,
@@ -206,20 +167,18 @@ export function createComposerAttachmentsController({
         sessionId: uploadSessionId,
         environment: uploadEnvironmentId,
       };
-      const uploadScope = {
-        sessionId: uploadSessionId,
-        environmentId: uploadEnvironmentId,
-        generation: uploadGeneration,
-        imageAttachment,
-      };
-      if (!canRetainUploadedAttachment(uploadScope)) {
+      if (!canRetainUploadedAttachment(draft, imageAttachment)) {
+        void deletePending(attachment);
+        return;
+      }
+      if (!draft.acceptUpload(uploadGeneration, attachment)) {
         void deletePending(attachment);
         return;
       }
-      state.pendingAttachments = [...state.pendingAttachments, attachment];
       render();
     } finally {
-      setUploadInProgress(false, uploadGeneration);
+      draft.finishUpload(uploadGeneration);
+      onSendStateChange();
     }
   }
 
@@ -228,11 +187,9 @@ export function createComposerAttachmentsController({
     clear,
     cleanup,
     deletePending,
-    invalidateCompletions,
     previewUrl,
     removeUnsupportedImages,
     render,
-    setUploadInProgress,
     upload,
   };
 }

package/dist/src/web-ui/app/controllers/composer-draft-view.d.ts

@@ -0,0 +1,27 @@
+import type { ComposerDraft } from "./composer-drafts.js";
+
+export interface ComposerInputSurface {
+  value: string;
+  readonly style: { height: string };
+  readonly scrollHeight: number;
+  focus(): void;
+}
+
+export interface ComposerDraftInput extends ComposerInputSurface {
+  addEventListener?(type: "input", listener: () => void): void;
+}
+
+export interface ComposerDraftView {
+  surface: ComposerInputSurface;
+  current(): ComposerDraft;
+  display(): ComposerDraft;
+  saveDisplayed(): void;
+  refresh(draft: ComposerDraft): void;
+  detach(): void;
+}
+
+export declare function createComposerDraftView(options: {
+  input: ComposerDraftInput;
+  getDraft(): ComposerDraft;
+  isVisible?(): boolean;
+}): ComposerDraftView;