@convokitapp/vue-ui 0.2.2 → 0.4.0

package/dist/index.d.cts

@@ -1,8 +1,10 @@
-import { Conversation as Conversation$1, Message, MessageMedia, RealtimeSubscription, ReadEvent, TypingEvent, ConvoKitClient } from '@convokitapp/sdk';
+import { Conversation as Conversation$1, MessageListOptions, Message, SendMessageInput, RealtimeConnectionHandlers, RealtimeSubscription, MessageEvent, MessageDeletedEvent, ReadEvent, TypingEvent, MessageMedia, ConvoKitClient } from '@convokitapp/sdk';
 import * as vue from 'vue';
 import { CSSProperties, HTMLAttributes, Ref, VNodeChild, PropType, MaybeRefOrGetter, TextareaHTMLAttributes } from 'vue';
 
+/** Custom adapters must expose an identity unique to each login, including same-user logins. */
 interface ConvoKitUiClient {
+    readonly sessionIdentity: object | null;
     readonly currentUserId: string;
     getConversations(options: {
         limit: number;
@@ -10,25 +12,25 @@ interface ConvoKitUiClient {
         archived: boolean;
     }): Promise<Conversation$1[]>;
     getConversation(conversationId: string): Promise<Conversation$1>;
-    getMessages(options: {
-        conversationId: string;
-        limit: number;
-        offset: number;
-    }): Promise<Message[]>;
-    sendMessage(input: {
-        conversationId: string;
-        text?: string;
-        media?: MessageMedia[];
-    }): Promise<Message>;
+    /** Newest first, with a paired value cursor; never derive an offset from rendered rows. */
+    getMessages(options: MessageListOptions): Promise<Message[]>;
+    /** Complete authorized message, including related media absent from raw row events. */
+    getMessage(id: string): Promise<Message>;
+    sendMessage(input: SendMessageInput): Promise<Message>;
     markConversationRead(conversationId: string): Promise<void>;
     sendTyping(input: {
         conversationId: string;
         isTyping: boolean;
     }): Promise<void>;
-    onMessage(conversationId: string, handler: (message: Message) => void, onError?: (error: Error) => void): RealtimeSubscription;
+    onConnectionEvent(handlers: RealtimeConnectionHandlers): RealtimeSubscription;
+    /** Notify on inbox mutations AND on initial subscription/reconnect. No room data in the signal. */
+    onInboxChanged(handler: () => void, onError?: (error: Error) => void): RealtimeSubscription;
+    onMessage(conversationId: string, handler: (event: MessageEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
+    onMessageDeleted(conversationId: string, handler: (event: MessageDeletedEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onReadReceipt(conversationId: string, handler: (event: ReadEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onTyping(conversationId: string, handler: (event: TypingEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
 }
+
 interface ConversationFilter {
     query?: string;
     archived?: boolean;
@@ -59,6 +61,7 @@ interface ConversationState {
     readAtByUserId: Readonly<Ref<ReadonlyMap<string, Date>>>;
     isInitialLoading: Readonly<Ref<boolean>>;
     isLoadingOlder: Readonly<Ref<boolean>>;
+    isReconciling: Readonly<Ref<boolean>>;
     isSending: Readonly<Ref<boolean>>;
     hasOlderMessages: Readonly<Ref<boolean>>;
     hasLoaded: Readonly<Ref<boolean>>;
@@ -172,7 +175,7 @@ interface ConversationController extends ConversationState {
     updateTyping(isTyping: boolean): Promise<void>;
     dispose(): Promise<void>;
 }
-/** Owns one conversation's history, realtime state, sending, and read positions. */
+/** Each room/login gets an independent owner; disposal also stops reactive reloads. */
 declare function useConversation(options: UseConversationOptions): ConversationController;
 
 interface ConversationViewProps extends ConvoKitAppearanceProps {
@@ -505,11 +508,14 @@ declare const ConversationView: vue.DefineComponent<vue.ExtractPropTypes<{
     "onAdd-attachment"?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }>, {
+    readonly typingUserIds: ReadonlySet<string>;
     readonly readAtByUserId: ReadonlyMap<string, Date>;
+    readonly isInitialLoading: boolean;
+    readonly isLoadingOlder: boolean;
+    readonly isSending: boolean;
+    readonly hasOlderMessages: boolean;
     readonly readersResolver: (message: Message) => ReadonlySet<string>;
     readonly onLoadOlder: () => void | Promise<void>;
-    readonly hasOlderMessages: boolean;
-    readonly isLoadingOlder: boolean;
     readonly onAttachmentClick: (media: MessageMedia, message: Message) => void;
     readonly paginationThreshold: number;
     readonly stickToBottom: boolean;
@@ -519,13 +525,10 @@ declare const ConversationView: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly styles: Partial<Record<ConvoKitUiPart, CSSProperties>>;
     readonly density: ConvoKitUiDensity;
     readonly unstyled: boolean;
-    readonly typingUserIds: ReadonlySet<string>;
     readonly onBack: () => void;
     readonly onRefresh: () => void | Promise<void>;
     readonly onTypingChange: (isTyping: boolean) => void | Promise<void>;
     readonly onAddAttachment: () => void;
-    readonly isInitialLoading: boolean;
-    readonly isSending: boolean;
     readonly displayNameForUser: (userId: string) => string | null | undefined;
     readonly reverseMessages: boolean;
     readonly composerPlaceholder: string;
@@ -902,12 +905,15 @@ declare const Conversation: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     messages: readonly Message[];
     conversation: Conversation$1;
-    currentUserId: string;
+    typingUserIds: ReadonlySet<string>;
     readAtByUserId: ReadonlyMap<string, Date>;
+    isInitialLoading: boolean;
+    isLoadingOlder: boolean;
+    isSending: boolean;
+    hasOlderMessages: boolean;
+    currentUserId: string;
     readersResolver: (message: Message) => ReadonlySet<string>;
     onLoadOlder: () => void | Promise<void>;
-    hasOlderMessages: boolean;
-    isLoadingOlder: boolean;
     onAttachmentClick: (media: MessageMedia, message: Message) => void;
     paginationThreshold: number;
     stickToBottom: boolean;
@@ -918,13 +924,10 @@ declare const Conversation: vue.DefineComponent<vue.ExtractPropTypes<{
     density: ConvoKitUiDensity;
     unstyled: boolean;
     onSendMessage: (text: string) => boolean | void | Promise<boolean | void>;
-    typingUserIds: ReadonlySet<string>;
     onBack: () => void;
     onRefresh: () => void | Promise<void>;
     onTypingChange: (isTyping: boolean) => void | Promise<void>;
     onAddAttachment: () => void;
-    isInitialLoading: boolean;
-    isSending: boolean;
     displayNameForUser: (userId: string) => string | null | undefined;
     reverseMessages: boolean;
     composerPlaceholder: string;
@@ -956,7 +959,6 @@ interface ConversationListController extends ConversationListState {
     setQuery(query: string): Promise<void>;
     dispose(): Promise<void>;
 }
-/** Loads, de-duplicates, filters, and paginates conversations. */
 declare function useConversationList(options: UseConversationListOptions): ConversationListController;
 
 interface ConversationListViewProps extends ConvoKitAppearanceProps {
@@ -1117,6 +1119,7 @@ declare const ConversationListView: vue.DefineComponent<vue.ExtractPropTypes<{
     "onConversation-select"?: (_conversation: Conversation$1) => any;
     "onLoad-more"?: () => any;
 }>, {
+    readonly isInitialLoading: boolean;
     readonly scrollElement: Ref<HTMLElement | null, HTMLElement | null>;
     readonly paginationThreshold: number;
     readonly classNames: Partial<Record<ConvoKitUiPart, string>>;
@@ -1124,12 +1127,11 @@ declare const ConversationListView: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly density: ConvoKitUiDensity;
     readonly unstyled: boolean;
     readonly onRefresh: () => void | Promise<void>;
-    readonly isInitialLoading: boolean;
+    readonly isLoadingMore: boolean;
+    readonly hasMore: boolean;
     readonly selectedConversationId: string;
     readonly onConversationSelect: (conversation: Conversation$1) => void;
     readonly onLoadMore: () => void | Promise<void>;
-    readonly isLoadingMore: boolean;
-    readonly hasMore: boolean;
     readonly ariaLabel: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 interface ConversationListProps extends Omit<ConversationListViewProps, 'conversations' | 'onRefresh' | 'onLoadMore' | 'isInitialLoading' | 'isLoadingMore' | 'hasMore' | 'error'>, Omit<UseConversationListOptions, 'client'> {
@@ -1321,6 +1323,7 @@ declare const ConversationList: vue.DefineComponent<vue.ExtractPropTypes<{
     "onController-change"?: (...args: any[]) => any;
     "onConversation-select"?: (...args: any[]) => any;
 }>, {
+    isInitialLoading: boolean;
     scrollElement: Ref<HTMLElement | null, HTMLElement | null>;
     paginationThreshold: number;
     classNames: Partial<Record<ConvoKitUiPart, string>>;
@@ -1328,15 +1331,14 @@ declare const ConversationList: vue.DefineComponent<vue.ExtractPropTypes<{
     density: ConvoKitUiDensity;
     unstyled: boolean;
     onRefresh: () => void | Promise<void>;
-    isInitialLoading: boolean;
     autoLoad: boolean;
     onControllerChange: (controller: ConversationListController) => void;
     conversations: readonly Conversation$1[];
+    isLoadingMore: boolean;
+    hasMore: boolean;
     selectedConversationId: string;
     onConversationSelect: (conversation: Conversation$1) => void;
     onLoadMore: () => void | Promise<void>;
-    isLoadingMore: boolean;
-    hasMore: boolean;
     ariaLabel: string;
     pageLoader: ConversationPageLoader;
     initialFilter: ConversationFilter;
@@ -1535,10 +1537,10 @@ declare const MessageListView: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     reverse: boolean;
     readAtByUserId: ReadonlyMap<string, Date>;
+    isLoadingOlder: boolean;
+    hasOlderMessages: boolean;
     readersResolver: (message: Message) => ReadonlySet<string>;
     onLoadOlder: () => void | Promise<void>;
-    hasOlderMessages: boolean;
-    isLoadingOlder: boolean;
     onAttachmentClick: (media: MessageMedia, message: Message) => void;
     scrollElement: Ref<HTMLElement | null, HTMLElement | null>;
     paginationThreshold: number;

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-import { Conversation as Conversation$1, Message, MessageMedia, RealtimeSubscription, ReadEvent, TypingEvent, ConvoKitClient } from '@convokitapp/sdk';
+import { Conversation as Conversation$1, MessageListOptions, Message, SendMessageInput, RealtimeConnectionHandlers, RealtimeSubscription, MessageEvent, MessageDeletedEvent, ReadEvent, TypingEvent, MessageMedia, ConvoKitClient } from '@convokitapp/sdk';
 import * as vue from 'vue';
 import { CSSProperties, HTMLAttributes, Ref, VNodeChild, PropType, MaybeRefOrGetter, TextareaHTMLAttributes } from 'vue';
 
+/** Custom adapters must expose an identity unique to each login, including same-user logins. */
 interface ConvoKitUiClient {
+    readonly sessionIdentity: object | null;
     readonly currentUserId: string;
     getConversations(options: {
         limit: number;
@@ -10,25 +12,25 @@ interface ConvoKitUiClient {
         archived: boolean;
     }): Promise<Conversation$1[]>;
     getConversation(conversationId: string): Promise<Conversation$1>;
-    getMessages(options: {
-        conversationId: string;
-        limit: number;
-        offset: number;
-    }): Promise<Message[]>;
-    sendMessage(input: {
-        conversationId: string;
-        text?: string;
-        media?: MessageMedia[];
-    }): Promise<Message>;
+    /** Newest first, with a paired value cursor; never derive an offset from rendered rows. */
+    getMessages(options: MessageListOptions): Promise<Message[]>;
+    /** Complete authorized message, including related media absent from raw row events. */
+    getMessage(id: string): Promise<Message>;
+    sendMessage(input: SendMessageInput): Promise<Message>;
     markConversationRead(conversationId: string): Promise<void>;
     sendTyping(input: {
         conversationId: string;
         isTyping: boolean;
     }): Promise<void>;
-    onMessage(conversationId: string, handler: (message: Message) => void, onError?: (error: Error) => void): RealtimeSubscription;
+    onConnectionEvent(handlers: RealtimeConnectionHandlers): RealtimeSubscription;
+    /** Notify on inbox mutations AND on initial subscription/reconnect. No room data in the signal. */
+    onInboxChanged(handler: () => void, onError?: (error: Error) => void): RealtimeSubscription;
+    onMessage(conversationId: string, handler: (event: MessageEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
+    onMessageDeleted(conversationId: string, handler: (event: MessageDeletedEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onReadReceipt(conversationId: string, handler: (event: ReadEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
     onTyping(conversationId: string, handler: (event: TypingEvent) => void, onError?: (error: Error) => void): RealtimeSubscription;
 }
+
 interface ConversationFilter {
     query?: string;
     archived?: boolean;
@@ -59,6 +61,7 @@ interface ConversationState {
     readAtByUserId: Readonly<Ref<ReadonlyMap<string, Date>>>;
     isInitialLoading: Readonly<Ref<boolean>>;
     isLoadingOlder: Readonly<Ref<boolean>>;
+    isReconciling: Readonly<Ref<boolean>>;
     isSending: Readonly<Ref<boolean>>;
     hasOlderMessages: Readonly<Ref<boolean>>;
     hasLoaded: Readonly<Ref<boolean>>;
@@ -172,7 +175,7 @@ interface ConversationController extends ConversationState {
     updateTyping(isTyping: boolean): Promise<void>;
     dispose(): Promise<void>;
 }
-/** Owns one conversation's history, realtime state, sending, and read positions. */
+/** Each room/login gets an independent owner; disposal also stops reactive reloads. */
 declare function useConversation(options: UseConversationOptions): ConversationController;
 
 interface ConversationViewProps extends ConvoKitAppearanceProps {
@@ -505,11 +508,14 @@ declare const ConversationView: vue.DefineComponent<vue.ExtractPropTypes<{
     "onAdd-attachment"?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }>, {
+    readonly typingUserIds: ReadonlySet<string>;
     readonly readAtByUserId: ReadonlyMap<string, Date>;
+    readonly isInitialLoading: boolean;
+    readonly isLoadingOlder: boolean;
+    readonly isSending: boolean;
+    readonly hasOlderMessages: boolean;
     readonly readersResolver: (message: Message) => ReadonlySet<string>;
     readonly onLoadOlder: () => void | Promise<void>;
-    readonly hasOlderMessages: boolean;
-    readonly isLoadingOlder: boolean;
     readonly onAttachmentClick: (media: MessageMedia, message: Message) => void;
     readonly paginationThreshold: number;
     readonly stickToBottom: boolean;
@@ -519,13 +525,10 @@ declare const ConversationView: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly styles: Partial<Record<ConvoKitUiPart, CSSProperties>>;
     readonly density: ConvoKitUiDensity;
     readonly unstyled: boolean;
-    readonly typingUserIds: ReadonlySet<string>;
     readonly onBack: () => void;
     readonly onRefresh: () => void | Promise<void>;
     readonly onTypingChange: (isTyping: boolean) => void | Promise<void>;
     readonly onAddAttachment: () => void;
-    readonly isInitialLoading: boolean;
-    readonly isSending: boolean;
     readonly displayNameForUser: (userId: string) => string | null | undefined;
     readonly reverseMessages: boolean;
     readonly composerPlaceholder: string;
@@ -902,12 +905,15 @@ declare const Conversation: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     messages: readonly Message[];
     conversation: Conversation$1;
-    currentUserId: string;
+    typingUserIds: ReadonlySet<string>;
     readAtByUserId: ReadonlyMap<string, Date>;
+    isInitialLoading: boolean;
+    isLoadingOlder: boolean;
+    isSending: boolean;
+    hasOlderMessages: boolean;
+    currentUserId: string;
     readersResolver: (message: Message) => ReadonlySet<string>;
     onLoadOlder: () => void | Promise<void>;
-    hasOlderMessages: boolean;
-    isLoadingOlder: boolean;
     onAttachmentClick: (media: MessageMedia, message: Message) => void;
     paginationThreshold: number;
     stickToBottom: boolean;
@@ -918,13 +924,10 @@ declare const Conversation: vue.DefineComponent<vue.ExtractPropTypes<{
     density: ConvoKitUiDensity;
     unstyled: boolean;
     onSendMessage: (text: string) => boolean | void | Promise<boolean | void>;
-    typingUserIds: ReadonlySet<string>;
     onBack: () => void;
     onRefresh: () => void | Promise<void>;
     onTypingChange: (isTyping: boolean) => void | Promise<void>;
     onAddAttachment: () => void;
-    isInitialLoading: boolean;
-    isSending: boolean;
     displayNameForUser: (userId: string) => string | null | undefined;
     reverseMessages: boolean;
     composerPlaceholder: string;
@@ -956,7 +959,6 @@ interface ConversationListController extends ConversationListState {
     setQuery(query: string): Promise<void>;
     dispose(): Promise<void>;
 }
-/** Loads, de-duplicates, filters, and paginates conversations. */
 declare function useConversationList(options: UseConversationListOptions): ConversationListController;
 
 interface ConversationListViewProps extends ConvoKitAppearanceProps {
@@ -1117,6 +1119,7 @@ declare const ConversationListView: vue.DefineComponent<vue.ExtractPropTypes<{
     "onConversation-select"?: (_conversation: Conversation$1) => any;
     "onLoad-more"?: () => any;
 }>, {
+    readonly isInitialLoading: boolean;
     readonly scrollElement: Ref<HTMLElement | null, HTMLElement | null>;
     readonly paginationThreshold: number;
     readonly classNames: Partial<Record<ConvoKitUiPart, string>>;
@@ -1124,12 +1127,11 @@ declare const ConversationListView: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly density: ConvoKitUiDensity;
     readonly unstyled: boolean;
     readonly onRefresh: () => void | Promise<void>;
-    readonly isInitialLoading: boolean;
+    readonly isLoadingMore: boolean;
+    readonly hasMore: boolean;
     readonly selectedConversationId: string;
     readonly onConversationSelect: (conversation: Conversation$1) => void;
     readonly onLoadMore: () => void | Promise<void>;
-    readonly isLoadingMore: boolean;
-    readonly hasMore: boolean;
     readonly ariaLabel: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 interface ConversationListProps extends Omit<ConversationListViewProps, 'conversations' | 'onRefresh' | 'onLoadMore' | 'isInitialLoading' | 'isLoadingMore' | 'hasMore' | 'error'>, Omit<UseConversationListOptions, 'client'> {
@@ -1321,6 +1323,7 @@ declare const ConversationList: vue.DefineComponent<vue.ExtractPropTypes<{
     "onController-change"?: (...args: any[]) => any;
     "onConversation-select"?: (...args: any[]) => any;
 }>, {
+    isInitialLoading: boolean;
     scrollElement: Ref<HTMLElement | null, HTMLElement | null>;
     paginationThreshold: number;
     classNames: Partial<Record<ConvoKitUiPart, string>>;
@@ -1328,15 +1331,14 @@ declare const ConversationList: vue.DefineComponent<vue.ExtractPropTypes<{
     density: ConvoKitUiDensity;
     unstyled: boolean;
     onRefresh: () => void | Promise<void>;
-    isInitialLoading: boolean;
     autoLoad: boolean;
     onControllerChange: (controller: ConversationListController) => void;
     conversations: readonly Conversation$1[];
+    isLoadingMore: boolean;
+    hasMore: boolean;
     selectedConversationId: string;
     onConversationSelect: (conversation: Conversation$1) => void;
     onLoadMore: () => void | Promise<void>;
-    isLoadingMore: boolean;
-    hasMore: boolean;
     ariaLabel: string;
     pageLoader: ConversationPageLoader;
     initialFilter: ConversationFilter;
@@ -1535,10 +1537,10 @@ declare const MessageListView: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     reverse: boolean;
     readAtByUserId: ReadonlyMap<string, Date>;
+    isLoadingOlder: boolean;
+    hasOlderMessages: boolean;
     readersResolver: (message: Message) => ReadonlySet<string>;
     onLoadOlder: () => void | Promise<void>;
-    hasOlderMessages: boolean;
-    isLoadingOlder: boolean;
     onAttachmentClick: (media: MessageMedia, message: Message) => void;
     scrollElement: Ref<HTMLElement | null, HTMLElement | null>;
     paginationThreshold: number;