@joai/react 1.0.0

package/README.md

@@ -0,0 +1,9 @@
+# @joai/react
+
+Reusable React building blocks for JoAi applications. This package owns browser and React concerns; `@joai/core` remains framework-neutral and `@joai/sdk` remains the API client.
+
+```tsx
+import { EditableContent, EditableImage, ManagedContentEditor } from '@joai/react'
+```
+
+React is a peer dependency. Core and SDK are regular package dependencies, so consumers only need to install `@joai/react` and a compatible React version.

package/dist/index.d.mts

@@ -0,0 +1,430 @@
+'use client';
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { AppEnv, Content, ContentValue, ContentVersion, IHttpService, ImageCompressionOptions, ImageCompressionOptions as ImageCompressionOptions$1, ImageCropOptions, ImageCropOptions as ImageCropOptions$1, ImageCropRectangle, ImageCropState, ImageCropState as ImageCropState$1, ImageDimensionRules, ImageDimensionRules as ImageDimensionRules$1, ImageDimensions, ImageDimensions as ImageDimensions$1, Media, PatchContentInput, containedImageDimensions, cropOutputDimensions, imageCropRectangle, validateImageDimensions } from "@joai/core";
+
+//#region src/types.d.ts
+type EmbedChatItem = {
+  content: string;
+  byUser: boolean;
+  streaming?: boolean;
+  error?: boolean;
+};
+//#endregion
+//#region src/guest.d.ts
+declare function getOrCreateGuestId(storageKey?: string): string;
+declare function loadRoom(storageKey: string): string | null;
+declare function saveRoom(storageKey: string, roomId: string): void;
+declare function clearRoom(storageKey: string): void;
+//#endregion
+//#region src/stream-connection.d.ts
+type StreamDataHandler = (data: unknown) => void;
+declare function openEventSourceStream(url: string, onData: StreamDataHandler, options?: {
+  withCredentials?: boolean;
+  onError?: (e: unknown) => void;
+  onConnectionError?: (e: Event | null) => void;
+}): () => void;
+//#endregion
+//#region src/components.d.ts
+type ListClassNames = {
+  container?: string;
+  userBubble?: string;
+  agentBubble?: string;
+  errorBubble?: string;
+  thinkingWrapper?: string;
+  dot?: string;
+};
+type EmbedChatListProps = {
+  items: EmbedChatItem[];
+  agentName: string;
+  awaitingResponse: boolean;
+  classNames?: ListClassNames;
+  renderEmptyState?: () => ReactNode;
+  renderAgentContent?: (item: EmbedChatItem) => ReactNode;
+};
+declare function EmbedChatList({
+  items,
+  agentName,
+  awaitingResponse,
+  classNames,
+  renderEmptyState,
+  renderAgentContent
+}: EmbedChatListProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | _$react.JSX.Element | null | undefined;
+type EmbedChatInputProps = {
+  onSend: (message: string) => void;
+  disabled: boolean;
+  placeholder?: string;
+  maxLength?: number;
+  classNames?: {
+    container?: string;
+    textarea?: string;
+  };
+  renderSendButton: (props: {
+    onClick: () => void;
+    disabled: boolean;
+  }) => ReactNode;
+};
+declare function EmbedChatInput({
+  onSend,
+  disabled,
+  placeholder,
+  maxLength,
+  classNames,
+  renderSendButton
+}: EmbedChatInputProps): _$react.JSX.Element;
+//#endregion
+//#region src/use-embed-chat.d.ts
+type Options = {
+  agentUuid: string | null;
+  http: IHttpService;
+  cortexBaseUrl: string;
+  guestId: string;
+  roomStorageKey: string;
+  enabled?: boolean;
+  extraPayload?: Record<string, unknown>;
+};
+declare function useEmbedChat({
+  agentUuid,
+  http,
+  cortexBaseUrl,
+  guestId,
+  roomStorageKey,
+  enabled,
+  extraPayload
+}: Options): {
+  items: EmbedChatItem[];
+  setItems: _$react.Dispatch<_$react.SetStateAction<EmbedChatItem[]>>;
+  sending: boolean;
+  awaitingResponse: boolean;
+  roomId: string | null;
+  setRoomId: _$react.Dispatch<_$react.SetStateAction<string | null>>;
+  send: (message: string) => Promise<void>;
+  connectionError: boolean;
+};
+//#endregion
+//#region src/content/types.d.ts
+type ContentResource = {
+  get: (contentId: string) => Promise<ContentResponse<Content>>;
+  getPublic: (slug: string) => Promise<ContentResponse<Content>>;
+  patch: (contentId: string, input: PatchContentInput) => Promise<ContentResponse<ContentVersion>>;
+  publish: (contentId: string, expectedVersion: number) => Promise<ContentResponse<ContentVersion>>;
+};
+type ContentResponse<T> = {
+  ok: boolean;
+  data?: T;
+  errors?: Record<string, unknown> | null;
+  original?: {
+    status?: number;
+  } | null;
+};
+type ContentClient = {
+  content: ContentResource;
+  media?: {
+    list: (team: string, params?: {
+      page?: number;
+      mime?: string;
+    }) => Promise<{
+      ok: boolean;
+      data?: Media[];
+    }>;
+    upload: (data: {
+      team: string;
+      file: File;
+      type: 'output';
+      label?: string;
+    }) => Promise<{
+      ok: boolean;
+      data?: Media;
+    }>;
+  };
+};
+type ContentContextValue = {
+  content: Content | null;
+  values: Record<string, ContentValue>;
+  isLoading: boolean;
+  isSaving: boolean;
+  operation: 'save' | 'publish' | null;
+  isEditing: boolean;
+  isDirty: boolean;
+  canEdit: boolean;
+  canPublish: boolean;
+  teamSlug?: string;
+  media?: ContentClient['media'];
+  error: string | null;
+  message: string | null;
+  imagePickerLabels: ContentImagePickerLabels;
+  cancel: () => void;
+  setEditing: (editing: boolean) => void;
+  setValue: (key: string, value: ContentValue) => void;
+  save: () => Promise<boolean>;
+  publish: () => Promise<boolean>;
+};
+type ContentProviderProp = {
+  children: ReactNode;
+  client: ContentClient;
+  contentId?: string;
+  publicSlug?: string;
+  initialContent?: Content;
+  canEdit?: boolean;
+  canPublish?: boolean;
+  teamSlug?: string;
+  confirmLeave?: () => boolean;
+  draftStore?: ContentDraftStore;
+  imagePickerLabels?: Partial<ContentImagePickerLabels>;
+  messages?: Partial<ContentEditorMessages>;
+  onUnauthorized?: () => void;
+};
+type ContentEditorMessages = {
+  conflict: string;
+  loadError: string;
+  publishError: string;
+  published: string;
+  saveError: string;
+  saved: string;
+  sessionExpired: string;
+  unsavedNavigation: string;
+};
+type ContentDraft = {
+  contentId?: string;
+  values: Record<string, ContentValue>;
+};
+type ContentDraftStore = {
+  clear: () => boolean | void;
+  get: () => ContentDraft | null;
+  set: (draft: ContentDraft) => boolean | void;
+};
+type ContentImagePickerLabels = {
+  applyCrop: string;
+  back: string;
+  choose: string;
+  close: string;
+  cropDescription: string;
+  cropTitle: string;
+  dimensionsTooLarge: string;
+  dimensionsTooSmall: string;
+  drop: string;
+  empty: string;
+  field: string;
+  invalidType: string;
+  libraryDescription: string;
+  libraryTitle: string;
+  loadError: string;
+  loading: string;
+  positionHorizontal: string;
+  positionVertical: string;
+  processing: string;
+  retry: string;
+  tooLarge: string;
+  upload: string;
+  uploadError: string;
+  uploading: string;
+  zoom: string;
+};
+type ImageProcessingOptions = {
+  compression?: ImageCompressionOptions$1 | false;
+  crop?: ImageCropOptions$1;
+  dimensions?: ImageDimensionRules$1 | false;
+};
+type EditableContentProp = {
+  field: string;
+  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3';
+  className?: string;
+  placeholder?: string;
+  multiline?: boolean;
+  editorClassName?: string;
+  label?: string;
+};
+type EditableImageProp = {
+  field: string;
+  alt?: string;
+  className?: string;
+  onSelect?: () => void;
+  inputClassName?: string;
+  placeholder?: string;
+  label?: string;
+  labels?: Partial<ContentImagePickerLabels>;
+  maxUploadBytes?: number;
+  maxSourceBytes?: number;
+  processing?: ImageProcessingOptions | false;
+};
+type ContentToolbarProp = {
+  className?: string;
+  confirmCancel?: () => boolean | Promise<boolean>;
+  confirmPublish?: () => boolean | Promise<boolean>;
+  labels?: {
+    edit?: string;
+    save?: string;
+    saving?: string;
+    publish?: string;
+    publishing?: string;
+    cancel?: string;
+    toolbar?: string;
+    unsaved?: string;
+  };
+};
+//#endregion
+//#region src/content/provider.d.ts
+declare function ContentProvider({
+  children,
+  client,
+  contentId,
+  publicSlug,
+  initialContent,
+  canEdit,
+  canPublish,
+  teamSlug,
+  confirmLeave,
+  draftStore,
+  imagePickerLabels: imagePickerLabelOverrides,
+  messages: messageOverrides,
+  onUnauthorized
+}: ContentProviderProp): _$react.JSX.Element;
+//#endregion
+//#region src/content/editable-content.d.ts
+declare function EditableContent({
+  field,
+  as: Tag,
+  className,
+  placeholder,
+  multiline,
+  editorClassName,
+  label
+}: EditableContentProp): _$react.JSX.Element;
+declare function useContentValue<T extends ContentValue = ContentValue>(key: string): T | undefined;
+//#endregion
+//#region src/content/editable-image.d.ts
+declare const validateImageFile: (file: Pick<File, "size" | "type">, maxUploadBytes: number, labels: Pick<ContentImagePickerLabels, "invalidType" | "tooLarge">) => string | null;
+declare function EditableImage({
+  field,
+  alt,
+  className,
+  inputClassName,
+  placeholder,
+  onSelect,
+  label,
+  labels: labelOverrides,
+  maxUploadBytes,
+  maxSourceBytes,
+  processing
+}: EditableImageProp): _$react.JSX.Element | null;
+//#endregion
+//#region src/content/toolbar.d.ts
+declare function ContentToolbar({
+  className,
+  labels,
+  confirmCancel,
+  confirmPublish
+}: ContentToolbarProp): _$react.JSX.Element | null;
+//#endregion
+//#region src/content/content-editor.d.ts
+type ContentEditorProp = ContentProviderProp & {
+  children: ReactNode;
+  confirmCancel?: ContentToolbarProp['confirmCancel'];
+  confirmPublish?: ContentToolbarProp['confirmPublish'];
+  labels?: ContentToolbarProp['labels'];
+  title?: string;
+};
+declare function ContentEditor({
+  children,
+  confirmCancel,
+  confirmPublish,
+  labels,
+  title,
+  ...provider
+}: ContentEditorProp): _$react.JSX.Element;
+//#endregion
+//#region src/content/use-unsaved-navigation.d.ts
+declare const useUnsavedNavigation: (shouldBlock: boolean, confirmLeave: () => boolean) => void;
+//#endregion
+//#region src/content/image-processing.d.ts
+declare const readImageDimensions: (file: File) => Promise<ImageDimensions$1>;
+declare const processImageFile: (file: File, compression: ImageCompressionOptions$1, cropOptions?: ImageCropOptions$1, cropState?: ImageCropState$1) => Promise<File>;
+//#endregion
+//#region src/content/session-store.d.ts
+type Listener = () => void;
+type BrowserStorage$1 = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
+type SessionTokenStore = {
+  getSnapshot: () => string | null;
+  getServerSnapshot: () => null;
+  subscribe: (listener: Listener) => () => void;
+  set: (token: string) => boolean;
+  clear: () => boolean;
+};
+declare const createSessionTokenStore: (storageKey: string, storage?: BrowserStorage$1) => SessionTokenStore;
+//#endregion
+//#region src/content/managed-content-editor.d.ts
+type ContentEditorConfig = {
+  contentId: string;
+  env?: AppEnv;
+  publicSlug: string;
+  sessionStorageKey: string;
+  team: string;
+};
+type ManagedContentEditorProps = {
+  authErrorClassName?: string;
+  authErrorMessage?: string;
+  children: ReactNode;
+  config: ContentEditorConfig;
+  confirmLeave?: () => boolean;
+  confirmCancel?: ContentToolbarProp['confirmCancel'];
+  confirmPublish?: ContentToolbarProp['confirmPublish'];
+  draftStore?: ContentDraftStore;
+  imagePickerLabels?: Partial<ContentImagePickerLabels>;
+  initialContent?: Content;
+  labels?: ContentToolbarProp['labels'];
+  messages?: Partial<ContentEditorMessages>;
+  reauthenticateLabel?: string;
+  reauthenticateUrl?: string | ((returnTo: string) => string);
+  sessionStore?: SessionTokenStore;
+  sessionExpiredMessage?: string;
+  title?: string;
+};
+declare function ManagedContentEditor({
+  authErrorClassName,
+  authErrorMessage,
+  children,
+  config,
+  confirmLeave,
+  confirmCancel,
+  confirmPublish,
+  draftStore,
+  imagePickerLabels,
+  initialContent,
+  labels,
+  messages,
+  reauthenticateLabel,
+  reauthenticateUrl,
+  sessionStore,
+  sessionExpiredMessage,
+  title
+}: ManagedContentEditorProps): _$react.JSX.Element;
+//#endregion
+//#region src/content/return-url.d.ts
+declare const getContentSessionReturnUrl: (currentUrl: string) => string;
+//#endregion
+//#region src/content/draft-store.d.ts
+type BrowserStorage = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
+declare const createContentDraftStore: (storageKey: string, storage?: BrowserStorage) => ContentDraftStore;
+//#endregion
+//#region src/content/use-content-session.d.ts
+type ContentSessionOptions = {
+  env?: AppEnv;
+  exchange?: (handoffToken: string) => Promise<string>;
+  sessionStore?: SessionTokenStore;
+  sessionStorageKey: string;
+  team: string;
+};
+type ContentSession = {
+  clear: () => void;
+  error: string | null;
+  token: string | null;
+};
+declare const useContentSession: ({
+  env,
+  exchange,
+  sessionStore,
+  sessionStorageKey,
+  team
+}: ContentSessionOptions) => ContentSession;
+//#endregion
+export { ContentClient, ContentContextValue, ContentDraft, ContentDraftStore, ContentEditor, ContentEditorConfig, ContentEditorMessages, ContentEditorProp, ContentImagePickerLabels, ContentProvider, ContentProviderProp, ContentResource, ContentResponse, ContentSession, ContentSessionOptions, ContentToolbar, ContentToolbarProp, EditableContent, EditableContentProp, EditableImage, EditableImageProp, EmbedChatInput, EmbedChatItem, EmbedChatList, type ImageCompressionOptions, type ImageCropOptions, type ImageCropRectangle, type ImageCropState, type ImageDimensionRules, type ImageDimensions, ImageProcessingOptions, ManagedContentEditor, ManagedContentEditorProps, SessionTokenStore, StreamDataHandler, clearRoom, containedImageDimensions, createContentDraftStore, createSessionTokenStore, cropOutputDimensions, getContentSessionReturnUrl, getOrCreateGuestId, imageCropRectangle, loadRoom, openEventSourceStream, processImageFile, readImageDimensions, saveRoom, useContentSession, useContentValue, useEmbedChat, useUnsavedNavigation, validateImageDimensions, validateImageFile };