@whop/embedded-components-vanilla-js 1.0.0-beta.11 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @whop/embedded-components-vanilla-js
 
+## 1.1.1
+
+### Patch Changes
+
+- b282677: add messageDeleted event to ChatElement
+
+## 1.1.0
+
+### Minor Changes
+
+- 76d83c4: Add i18n translation support with 10 new locales (es, zh, nl, pt, de, it, fr, ja, pl, tr)
+
+## 1.0.0
+
+### Major Changes
+
+- ea27ce0: New train: apollo
+
+### Patch Changes
+
+- 15f8c67: standardize embedded components class names for better styling capabilities
+  - @whop-core/embeddable-components@0.0.13
+
 ## 1.0.0-beta.11
 
 ### Major Changes

package/dist/lib/index.d.ts

@@ -1,4 +1,4 @@
-declare const locales: readonly ["en"];
+declare const locales: readonly ["en", "es", "zh", "nl", "pt", "de", "it", "fr", "ja", "pl", "tr"];
 type I18nSupportedLocale = (typeof locales)[number];
 
 type CustomEventDetail<F> = F extends (ev: CustomEvent<infer D>) => void ? D : never;
@@ -318,11 +318,19 @@ interface ChatElementEvents {
     }>) => void;
     /**
      * Emitted when the user sends a message.
-     * @param ev - The event containing the `id` and `content` in `ev.detail`.
+     * @param ev - The event containing the `id`, `content`, and `channelId` in `ev.detail`.
      */
     messageSent: (ev: CustomEvent<{
         id: string;
         content: string;
+        channelId: string;
+    }>) => void;
+    /**
+     * Emitted when the user deletes a message.
+     * @param ev - The event containing the `id` in `ev.detail`.
+     */
+    messageDeleted: (ev: CustomEvent<{
+        id: string;
     }>) => void;
     /**
      * Emitted when the user clicks on an experience mention.
@@ -348,7 +356,7 @@ interface AttachmentClickEventAttachment {
     width?: number;
     height?: number;
 }
-declare const createTypedEvent$1: TypedEventCreatorFn<ChatElementEvents, "profileClick" | "linkClick" | "messageSent" | "experienceClick" | "attachmentClick">;
+declare const createTypedEvent$1: TypedEventCreatorFn<ChatElementEvents, "profileClick" | "linkClick" | "messageSent" | "messageDeleted" | "experienceClick" | "attachmentClick">;
 type ChatElementEvent = InferEvent<typeof createTypedEvent$1>;
 /**
  * Configuration options for the ChatElement.
@@ -365,7 +373,7 @@ type ChatElementEvent = InferEvent<typeof createTypedEvent$1>;
  */
 interface ChatElementOptions {
     /**
-     * The ID of the chat channel to connect to.
+     * The ID of the channel, DM, or support chat to connect to.
      */
     channelId: string;
     /**
@@ -477,7 +485,11 @@ interface ChatElementSnapshot {
  * });
  *
  * element.on("messageSent", (ev) => {
- *   console.log("Message sent:", ev.detail.id, ev.detail.content);
+ *   console.log("Message sent:", ev.detail.id, ev.detail.content, ev.detail.channelId);
+ * });
+ *
+ * element.on("messageDeleted", (ev) => {
+ *   console.log("Message deleted:", ev.detail.id);
  * });
  *
  * element.on("experienceClick", (ev) => {
@@ -669,7 +681,7 @@ interface SearchElementOptions {
      */
     companyId?: string;
     /**
-     * The ID of the chat channel to search messages in.
+     * The ID of the channel, DM, or support chat to search messages in.
      */
     channelId?: string;
     /**
@@ -708,7 +720,7 @@ interface SearchElementSnapshot {
     state: "loading" | "ready";
 }
 /**
- * A UI element that allows users to search for messages in a chat channel.
+ * A UI element that allows users to search for messages in a channel, DM, or support chat.
  *
  * @example Basic usage
  * ```typescript
@@ -3727,6 +3739,145 @@ interface PayoutsSession extends TypedEmitter<PayoutsSessionEvents> {
     showTreasuryBreakdownModal: <Force extends boolean = false>(options?: TreasuryBreakdownElementOptions | ((modal: ModalContainer) => TreasuryBreakdownElementOptions), force?: Force) => Force extends true ? ModalContainer : ModalContainer | undefined;
 }
 
+interface WalletSessionOptions {
+    /**
+     * The token to use for the session. If a function is provided, it will be called and awaited to get the token.
+     * When a function is provided, the token will be refreshed automatically before it expires.
+     *
+     * if a string is provided, it will be used as the token and not refreshed automatically. However you can update the token at runtime by
+     * calling `updateOptions` with a new token.
+     *
+     * For v1, mint this token from your backend with the existing `whop.accessTokens.create({ company_id })` call —
+     * the same approach used by `PayoutsSession`. A dedicated `wallet:*` scope set is on the roadmap.
+     *
+     * @example
+     * ```ts
+     * // with a static token
+     * async function createWalletSession() {
+     * 	const token = await fetch("/api/token")
+     * 		.then(res => res.json())
+     * 		.then(data => data.token)
+     * 	return whopElements.createWalletSession({ token, companyId })
+     * }
+     *
+     * // with a dynamic function
+     * function createWalletSession() {
+     * 	return whopElements.createWalletSession({
+     * 		companyId,
+     * 		token: () => fetch("/api/token")
+     * 			.then(res => res.json())
+     * 			.then(data => data.token),
+     * 	})
+     * }
+     * ```
+     */
+    token: Token | GetToken;
+    /**
+     * The company ID that owns the wallet.
+     *
+     * Accepts a `biz_*` ID. The wallet's underlying ledger account is resolved server-side from this value.
+     * (A polymorphic `ledger_account_id` parameter is on the roadmap once `wallet:session:create` ships.)
+     */
+    companyId: string;
+    /**
+     * The currency to format display amounts in.
+     *
+     * @default "USD"
+     */
+    currency?: string;
+}
+interface ExpandedWalletSessionOptions extends WalletSessionOptions {
+}
+/**
+ * Events emitted by the WalletSession.
+ *
+ * Listen to these events using the `on()` method.
+ */
+interface WalletSessionEvents {
+    /**
+     * Emitted when the session options are updated via `updateOptions()`.
+     * @param options - The updated options object
+     */
+    optionsUpdated: (options: ExpandedWalletSessionOptions) => void;
+    /**
+     * Emitted when the authentication token is refreshed.
+     * @param token - The new token
+     */
+    tokenRefreshed: (token: string) => void;
+    /**
+     * Emitted when token refresh fails.
+     * @param error - The error that occurred
+     */
+    tokenRefreshError: (error: unknown) => void;
+    /**
+     * Emitted when an error occurs during session operation.
+     * @param error - The error that occurred
+     */
+    error: (error: unknown) => void;
+    /**
+     * Emitted when the session is ready and authenticated.
+     */
+    ready: () => void;
+}
+/**
+ * Element registry for WalletSession.
+ *
+ * Empty for the foundation scaffold — wallet-element, send-element, onramp-element, convert-element
+ * are added in follow-up PRs. Each entry is `[Options, ElementInstance]`.
+ */
+type WalletSessionElements = {};
+/**
+ * Manages authentication and creates wallet elements.
+ *
+ * The WalletSession handles token management, element creation, and provides
+ * convenience methods for showing wallet elements in modals.
+ *
+ * For v1, mint the token via the existing `whop.accessTokens.create({ company_id })` flow —
+ * the same backend mutation that powers `PayoutsSession`. No new mutation is required.
+ *
+ * @example Basic usage
+ * ```typescript
+ * const session = whopElements.createWalletSession({
+ *   companyId: "biz_xxx",
+ *   token: async () => {
+ *     const response = await fetch("/api/wallet-token");
+ *     const data = await response.json();
+ *     return data.token;
+ *   },
+ * });
+ *
+ * session.on("ready", () => {
+ *   console.log("Wallet session is ready");
+ * });
+ * ```
+ */
+interface WalletSession extends TypedEmitter<WalletSessionEvents> {
+    /**
+     * Update the session options after initialization.
+     *
+     * Changes will be propagated to all active elements.
+     *
+     * @param options - Partial options object with the values to update
+     */
+    updateOptions: (options: Partial<WalletSessionOptions>) => void;
+    /**
+     * Destroy the session and clean up all mounted elements.
+     *
+     * Call this when you no longer need the session to free up resources.
+     */
+    destroy: () => void;
+    /**
+     * Create a new element instance.
+     *
+     * @param type - The element type
+     * @param options - Element-specific configuration options
+     * @returns The created element instance
+     */
+    createElement<T extends keyof WalletSessionElements>(type: T | {
+        type: T;
+    }, options: WalletSessionElements[T] extends [infer O, unknown] ? O : never): WalletSessionElements[T] extends [unknown, infer E] ? E : never;
+}
+
 declare global {
     interface Window {
         WhopElements: WhopElementsConstructor;
@@ -3848,6 +3999,16 @@ interface WhopElements extends TypedEmitter<WhopElementsEvents> {
      * @returns A ChatSession instance for creating chat elements
      */
     createChatSession: (options: ChatSessionOptions) => ChatSession;
+    /**
+     * Create a new wallet session for managing wallet elements.
+     *
+     * The session handles authentication and provides methods to create
+     * wallet-related elements like balance displays, send/receive flows, and conversions.
+     *
+     * @param options - Configuration options for the wallet session
+     * @returns A WalletSession instance for creating wallet elements
+     */
+    createWalletSession: (options: WalletSessionOptions) => WalletSession;
     /**
      * Update the WhopElements configuration after initialization.
      *
@@ -3875,4 +4036,4 @@ interface WhopElementsEvents {
     optionsUpdated: (options: WhopElementsOptions) => void;
 }
 
-export { type AddPayoutMethodElement, type AddPayoutMethodElementOptions, type AddPayoutMethodElementSnapshot, type Appearance, type AutomaticWithdrawElement, type AutomaticWithdrawElementOptions, type AutomaticWithdrawElementSnapshot, type AvailableCashBreakdownElement, type AvailableCashBreakdownElementOptions, type AvailableCashBreakdownElementSnapshot, type BalanceElement, type BalanceElementOptions, type BalanceElementSnapshot, type BalancesElement, type BalancesElementOptions, type BalancesElementSnapshot, type ChangeAccountCountryElement, type ChangeAccountCountryElementOptions, type ChangeAccountCountryElementSnapshot, type ChatElement, type ChatElementEvent, type ChatElementOptions, type ChatElementSnapshot, type ChatSession, type ChatSessionElements, type ChatSessionEvents, type ChatSessionOptions, type DmsListElement, type DmsListElementEvent, type DmsListElementOptions, type DmsListElementSnapshot, type ExpandedChatSessionOptions, type ExpandedPayoutsSessionOptions, type GenerateWithdrawalReceiptElement, type GenerateWithdrawalReceiptElementOptions, type GenerateWithdrawalReceiptElementSnapshot, type I18nSupportedLocale, type PayoutsSession, type PayoutsSessionElements, type PayoutsSessionEvents, type PayoutsSessionOptions, type PendingBreakdownElement, type PendingBreakdownElementOptions, type PendingBreakdownElementSnapshot, type ReserveBreakdownElement, type ReserveBreakdownElementOptions, type ReserveBreakdownElementSnapshot, type ResetAccountElement, type ResetAccountElementOptions, type ResetAccountElementSnapshot, type SearchElement, type SearchElementOptions, type SearchElementSnapshot, type StatusBannerElement, type StatusBannerElementOptions, type StatusBannerElementSnapshot, type StatusBannerType, type TreasuryBreakdownElement, type TreasuryBreakdownElementOptions, type TreasuryBreakdownElementSnapshot, type VerifyElement, type VerifyElementOptions, type VerifyElementSnapshot, type WhopElement, WhopElementError, type WhopElementErrorCode, type WhopElements, type WhopElementsConstructor, type WhopElementsEnvironment, type WhopElementsEvents, type WhopElementsOptions, type WithdrawButtonElement, type WithdrawButtonElementOptions, type WithdrawElement, type WithdrawElementOptions, type WithdrawElementSnapshot, type WithdrawalBreakdownElement, type WithdrawalBreakdownElementOptions, type WithdrawalBreakdownElementSnapshot, type WithdrawalsElement, type WithdrawalsElementOptions, type WithdrawalsElementSnapshot };
+export { type AddPayoutMethodElement, type AddPayoutMethodElementOptions, type AddPayoutMethodElementSnapshot, type Appearance, type AutomaticWithdrawElement, type AutomaticWithdrawElementOptions, type AutomaticWithdrawElementSnapshot, type AvailableCashBreakdownElement, type AvailableCashBreakdownElementOptions, type AvailableCashBreakdownElementSnapshot, type BalanceElement, type BalanceElementOptions, type BalanceElementSnapshot, type BalancesElement, type BalancesElementOptions, type BalancesElementSnapshot, type ChangeAccountCountryElement, type ChangeAccountCountryElementOptions, type ChangeAccountCountryElementSnapshot, type ChatElement, type ChatElementEvent, type ChatElementOptions, type ChatElementSnapshot, type ChatSession, type ChatSessionElements, type ChatSessionEvents, type ChatSessionOptions, type DmsListElement, type DmsListElementEvent, type DmsListElementOptions, type DmsListElementSnapshot, type ExpandedChatSessionOptions, type ExpandedPayoutsSessionOptions, type ExpandedWalletSessionOptions, type GenerateWithdrawalReceiptElement, type GenerateWithdrawalReceiptElementOptions, type GenerateWithdrawalReceiptElementSnapshot, type I18nSupportedLocale, type PayoutsSession, type PayoutsSessionElements, type PayoutsSessionEvents, type PayoutsSessionOptions, type PendingBreakdownElement, type PendingBreakdownElementOptions, type PendingBreakdownElementSnapshot, type ReserveBreakdownElement, type ReserveBreakdownElementOptions, type ReserveBreakdownElementSnapshot, type ResetAccountElement, type ResetAccountElementOptions, type ResetAccountElementSnapshot, type SearchElement, type SearchElementOptions, type SearchElementSnapshot, type StatusBannerElement, type StatusBannerElementOptions, type StatusBannerElementSnapshot, type StatusBannerType, type TreasuryBreakdownElement, type TreasuryBreakdownElementOptions, type TreasuryBreakdownElementSnapshot, type VerifyElement, type VerifyElementOptions, type VerifyElementSnapshot, type WalletSession, type WalletSessionElements, type WalletSessionEvents, type WalletSessionOptions, type WhopElement, WhopElementError, type WhopElementErrorCode, type WhopElements, type WhopElementsConstructor, type WhopElementsEnvironment, type WhopElementsEvents, type WhopElementsOptions, type WithdrawButtonElement, type WithdrawButtonElementOptions, type WithdrawElement, type WithdrawElementOptions, type WithdrawElementSnapshot, type WithdrawalBreakdownElement, type WithdrawalBreakdownElementOptions, type WithdrawalBreakdownElementSnapshot, type WithdrawalsElement, type WithdrawalsElementOptions, type WithdrawalsElementSnapshot };

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@whop/embedded-components-vanilla-js",
-  "version": "1.0.0-beta.11",
+  "version": "1.1.1",
   "description": "Whop Elements loading utility",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "jsnext:main": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typing": "dist/index.d.ts",
   "keywords": [
+    "Elements",
     "Whop",
     "Whop.js",
-    "Elements",
     "embedded",
     "payments",
     "payouts"
   ],
-  "author": "Whop (https://whop.com)",
   "license": "MIT",
+  "author": "Whop (https://whop.com)",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "jsnext:main": "dist/index.mjs",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "typing": "dist/index.d.ts"
 }