@chainlit/react-client 0.0.602 → 0.1.2

package/README.md

@@ -17,11 +17,19 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 
+import { ChainlitAPI, ChainlitContext } from '@chainlit/react-client';
+
+const CHAINLIT_SERVER_URL = 'http://localhost:8000';
+
+const apiClient = new ChainlitAPI(CHAINLIT_SERVER_URL, 'webapp');
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <RecoilRoot>
-      <MyApp />
-    </RecoilRoot>
+    <ChainlitContext.Provider value={apiClient}>
+      <RecoilRoot>
+        <MyApp />
+      </RecoilRoot>
+    </ChainlitContext.Provider>
   </React.StrictMode>
 );
 ```
@@ -41,11 +49,7 @@ This hook is responsible for managing the chat session's connection to the WebSo
 #### Example
 
 ```jsx
-import { ChainlitAPI, useChatSession } from '@chainlit/react-client';
-
-const CHAINLIT_SERVER_URL = 'http://localhost:8000';
-
-const apiClient = new ChainlitAPI(CHAINLIT_SERVER_URL, 'app');
+import { useChatSession } from '@chainlit/react-client';
 
 const ChatComponent = () => {
   const { connect, disconnect, chatProfile, setChatProfile } = useChatSession();
@@ -53,7 +57,6 @@ const ChatComponent = () => {
   // Connect to the WebSocket server
   useEffect(() => {
     connect({
-      client: apiClient,
       userEnv: {
         /* user environment variables */
       },
@@ -63,7 +66,7 @@ const ChatComponent = () => {
     return () => {
       disconnect();
     };
-  }, [connect, disconnect]);
+  }, []);
 
   // Rest of your component logic
 };

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import * as recoil from 'recoil';
 import { Socket } from 'socket.io-client';
 export { Socket } from 'socket.io-client';
 import * as lodash from 'lodash';
+import * as react from 'react';
 import * as swr__internal from 'swr/_internal';
 import { SWRConfiguration } from 'swr';
 
@@ -21,7 +22,7 @@ interface ICallFn {
     args: Record<string, any>;
 }
 
-type IElement = IImageElement | ITextElement | IPdfElement | IAvatarElement | ITasklistElement | IAudioElement | IVideoElement | IFileElement | IPlotlyElement;
+type IElement = IImageElement | ITextElement | IPdfElement | ITasklistElement | IAudioElement | IVideoElement | IFileElement | IPlotlyElement;
 type IMessageElement = IImageElement | ITextElement | IPdfElement | IAudioElement | IVideoElement | IFileElement | IPlotlyElement;
 type ElementType = IElement['type'];
 type IElementSize = 'small' | 'medium' | 'large';
@@ -41,9 +42,6 @@ interface TMessageElement<T> extends TElement<T> {
 interface IImageElement extends TMessageElement<'image'> {
     size?: IElementSize;
 }
-interface IAvatarElement extends TElement<'avatar'> {
-    name: string;
-}
 interface ITextElement extends TMessageElement<'text'> {
     language?: string;
 }
@@ -51,9 +49,11 @@ interface IPdfElement extends TMessageElement<'pdf'> {
     page?: number;
 }
 interface IAudioElement extends TMessageElement<'audio'> {
+    autoPlay?: boolean;
 }
 interface IVideoElement extends TMessageElement<'video'> {
     size?: IElementSize;
+    playerConfig?: object;
 }
 interface IFileElement extends TMessageElement<'file'> {
     type: 'file';
@@ -66,56 +66,11 @@ interface ITasklistElement extends TElement<'tasklist'> {
 interface IFeedback {
     id?: string;
     forId?: string;
+    threadId?: string;
     comment?: string;
     value: number;
 }
 
-type GenerationMessageRole = 'system' | 'assistant' | 'user' | 'function' | 'tool';
-type ILLMSettings = Record<string, string | string[] | number | boolean>;
-interface IGenerationMessage {
-    content: string;
-    role: GenerationMessageRole;
-    name?: string;
-    tool_calls?: any[];
-}
-interface IFunction {
-    name: string;
-    description: string;
-    parameters: {
-        required: string[];
-        properties: Record<string, {
-            title: string;
-            type: string;
-        }>;
-    };
-}
-interface ITool {
-    type: string;
-    function: IFunction;
-}
-interface IBaseGeneration {
-    provider: string;
-    model?: string;
-    error?: string;
-    id?: string;
-    variables?: Record<string, string>;
-    tags?: string[];
-    settings?: ILLMSettings;
-    tools?: ITool[];
-    tokenCount?: number;
-}
-interface ICompletionGeneration extends IBaseGeneration {
-    type: 'COMPLETION';
-    prompt?: string;
-    completion?: string;
-}
-interface IChatGeneration extends IBaseGeneration {
-    type: 'CHAT';
-    messages?: IGenerationMessage[];
-    messageCompletion?: IGenerationMessage;
-}
-type IGeneration = ICompletionGeneration | IChatGeneration;
-
 type StepType = 'assistant_message' | 'user_message' | 'system_message' | 'run' | 'tool' | 'llm' | 'embedding' | 'retrieval' | 'rerank' | 'undefined';
 interface IStep {
     id: string;
@@ -135,7 +90,6 @@ interface IStep {
     feedback?: IFeedback;
     language?: string;
     streaming?: boolean;
-    generation?: IGeneration;
     steps?: IStep[];
     indent?: number;
 }
@@ -159,7 +113,7 @@ interface IAsk {
     } & FileSpec & ActionSpec;
 }
 
-type AuthProvider = 'credentials' | 'header' | 'github' | 'google' | 'azure-ad';
+type AuthProvider = 'credentials' | 'header' | 'github' | 'google' | 'azure-ad' | 'azure-ad-hybrid';
 interface IUserMetadata extends Record<string, any> {
     tags?: string[];
     image?: string;
@@ -195,15 +149,69 @@ type ThreadHistory = {
     pageInfo?: IPageInfo;
 };
 
+interface IStarter {
+    label: string;
+    message: string;
+    icon?: string;
+}
+interface ChatProfile {
+    default: boolean;
+    icon?: string;
+    name: string;
+    markdown_description: string;
+    starters?: IStarter[];
+}
+interface IAudioConfig {
+    enabled: boolean;
+    min_decibels: number;
+    initial_silence_timeout: number;
+    silence_timeout: number;
+    chunk_duration: number;
+    max_duration: number;
+}
+interface IChainlitConfig {
+    markdown?: string;
+    ui: {
+        name: string;
+        description?: string;
+        default_collapse_content?: boolean;
+        github?: string;
+        theme: any;
+        custom_css?: string;
+        custom_js?: string;
+        custom_font?: string;
+        custom_meta_image_url?: string;
+    };
+    features: {
+        spontaneous_file_upload?: {
+            enabled?: boolean;
+            max_size_mb?: number;
+            max_files?: number;
+            accept?: string[] | Record<string, string[]>;
+        };
+        audio: IAudioConfig;
+        unsafe_allow_html?: boolean;
+        latex?: boolean;
+    };
+    debugUrl?: string;
+    userEnv: string[];
+    dataPersistence: boolean;
+    threadResumable: boolean;
+    chatProfiles: ChatProfile[];
+    starters?: IStarter[];
+    translation: object;
+}
+
 interface IToken {
     id: number | string;
     token: string;
     isSequence: boolean;
+    isInput: boolean;
 }
 declare const useChatData: () => {
     actions: IAction[];
     askUser: IAsk | undefined;
-    avatars: IAvatarElement[];
+    callFn: ICallFn | undefined;
     chatSettingsDefaultValue: any;
     chatSettingsInputs: any;
     chatSettingsValue: any;
@@ -215,7 +223,93 @@ declare const useChatData: () => {
     tasklists: ITasklistElement[];
 };
 
-declare const useAuth: (apiClient: ChainlitAPI) => {
+type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+declare const useChatInteract: () => {
+    uploadFile: (file: File, onProgress: (progress: number) => void) => {
+        xhr: XMLHttpRequest;
+        promise: Promise<{
+            id: string;
+        }>;
+    };
+    callAction: (action: IAction) => Promise<{
+        id: string;
+        status: boolean;
+        response?: string | undefined;
+    }> | undefined;
+    clear: () => void;
+    replyMessage: (message: IStep) => void;
+    sendMessage: (message: PartialBy<IStep, 'createdAt' | 'id'>, fileReferences?: IFileRef[]) => void;
+    sendAudioChunk: (isStart: boolean, mimeType: string, elapsedTime: number, data: Blob) => void;
+    endAudioStream: (fileReferences?: IFileRef[]) => void;
+    stopTask: () => void;
+    setIdToResume: recoil.SetterOrUpdater<string | undefined>;
+    updateChatSettings: (values: object) => void;
+};
+
+declare const useChatMessages: () => {
+    threadId: string | undefined;
+    messages: IStep[];
+    firstInteraction: string | undefined;
+};
+
+interface ISession {
+    socket: Socket;
+    error?: boolean;
+}
+declare const threadIdToResumeState: recoil.RecoilState<string | undefined>;
+declare const chatProfileState: recoil.RecoilState<string | undefined>;
+declare const sessionIdState: recoil.RecoilState<string>;
+declare const sessionState: recoil.RecoilState<ISession | undefined>;
+declare const actionState: recoil.RecoilState<IAction[]>;
+declare const messagesState: recoil.RecoilState<IStep[]>;
+declare const tokenCountState: recoil.RecoilState<number>;
+declare const loadingState: recoil.RecoilState<boolean>;
+declare const askUserState: recoil.RecoilState<IAsk | undefined>;
+declare const callFnState: recoil.RecoilState<ICallFn | undefined>;
+declare const chatSettingsInputsState: recoil.RecoilState<any>;
+declare const chatSettingsDefaultValueSelector: recoil.RecoilValueReadOnly<any>;
+declare const chatSettingsValueState: recoil.RecoilState<any>;
+declare const elementState: recoil.RecoilState<IMessageElement[]>;
+declare const tasklistState: recoil.RecoilState<ITasklistElement[]>;
+declare const firstUserInteraction: recoil.RecoilState<string | undefined>;
+declare const accessTokenState: recoil.RecoilState<string | undefined>;
+declare const userState: recoil.RecoilState<IUser | null>;
+declare const configState: recoil.RecoilState<IChainlitConfig | undefined>;
+declare const threadHistoryState: recoil.RecoilState<ThreadHistory | undefined>;
+declare const sideViewState: recoil.RecoilState<IMessageElement | undefined>;
+declare const currentThreadIdState: recoil.RecoilState<string | undefined>;
+
+declare const useChatSession: () => {
+    connect: lodash.DebouncedFunc<({ userEnv, accessToken }: {
+        userEnv: Record<string, string>;
+        accessToken?: string | undefined;
+    }) => void>;
+    disconnect: () => void;
+    session: ISession | undefined;
+    sessionId: string;
+    chatProfile: string | undefined;
+    idToResume: string | undefined;
+    setChatProfile: recoil.SetterOrUpdater<string | undefined>;
+};
+
+declare const useAudio: (config?: IAudioConfig) => {
+    startRecording: (fileReferences?: IFileRef[]) => void;
+    stopRecording: () => void;
+    cancelRecording: () => void;
+    isRecording: boolean;
+    isSpeaking: boolean;
+    isRecordingFinished: boolean;
+    error: string | undefined;
+};
+
+declare const useConfig: (accessToken?: string) => {
+    config: IChainlitConfig | undefined;
+    error: Error | undefined;
+    isLoading: boolean;
+    language: string;
+};
+
+declare const useAuth: () => {
     data: {
         requireLogin: boolean;
         passwordAuth: boolean;
@@ -244,7 +338,9 @@ declare const useAuth: (apiClient: ChainlitAPI) => {
 };
 
 declare const fetcher: (client: ChainlitAPI, endpoint: string, token?: string) => Promise<any>;
-declare function useApi<T>(client: ChainlitAPI, path?: string | null, options?: SWRConfiguration): swr__internal.SWRResponse<T, Error, Partial<swr__internal.PublicConfiguration<T, Error, swr__internal.BareFetcher<T>>> | undefined>;
+declare function useApi<T>(path?: string | null, { token, ...swrConfig }?: SWRConfiguration & {
+    token?: string;
+}): swr__internal.SWRResponse<T, Error, Partial<swr__internal.PublicConfiguration<T, Error, swr__internal.BareFetcher<T>>> | undefined>;
 
 interface IThreadFilters {
     search?: string;
@@ -266,10 +362,10 @@ declare class ClientError extends Error {
 type Payload = FormData | any;
 declare class APIBase {
     httpEndpoint: string;
-    type: 'app' | 'copilot' | 'teams' | 'slack';
+    type: 'webapp' | 'copilot' | 'teams' | 'slack' | 'discord';
     on401?: (() => void) | undefined;
     onError?: ((error: ClientError) => void) | undefined;
-    constructor(httpEndpoint: string, type: 'app' | 'copilot' | 'teams' | 'slack', on401?: (() => void) | undefined, onError?: ((error: ClientError) => void) | undefined);
+    constructor(httpEndpoint: string, type: 'webapp' | 'copilot' | 'teams' | 'slack' | 'discord', on401?: (() => void) | undefined, onError?: ((error: ClientError) => void) | undefined);
     buildEndpoint(path: string): string;
     checkToken(token: string): string;
     fetch(method: string, path: string, token?: string, data?: Payload, signal?: AbortSignal): Promise<Response>;
@@ -283,7 +379,6 @@ declare class ChainlitAPI extends APIBase {
     headerAuth(): Promise<any>;
     passwordAuth(data: FormData): Promise<any>;
     logout(): Promise<any>;
-    getGeneration(generation: IGeneration, userEnv: {} | undefined, controller: AbortController, accessToken?: string, tokenCb?: (done: boolean, token: string) => void): Promise<ReadableStream<any>>;
     setFeedback(feedback: IFeedback, accessToken?: string): Promise<{
         success: boolean;
         feedbackId: string;
@@ -307,70 +402,8 @@ declare class ChainlitAPI extends APIBase {
     getOAuthEndpoint(provider: string): string;
 }
 
-declare const useChatInteract: () => {
-    uploadFile: (client: ChainlitAPI, file: File, onProgress: (progress: number) => void) => {
-        xhr: XMLHttpRequest;
-        promise: Promise<{
-            id: string;
-        }>;
-    };
-    callAction: (action: IAction) => Promise<{
-        id: string;
-        status: boolean;
-        response?: string | undefined;
-    }> | undefined;
-    clear: () => void;
-    replyMessage: (message: IStep) => void;
-    sendMessage: (message: IStep, fileReferences?: IFileRef[]) => void;
-    stopTask: () => void;
-    setIdToResume: recoil.SetterOrUpdater<string | undefined>;
-    updateChatSettings: (values: object) => void;
-};
-
-declare const useChatMessages: () => {
-    messages: IStep[];
-    firstInteraction: string | undefined;
-};
-
-interface ISession {
-    socket: Socket;
-    error?: boolean;
-}
-declare const threadIdToResumeState: recoil.RecoilState<string | undefined>;
-declare const chatProfileState: recoil.RecoilState<string | undefined>;
-declare const sessionIdState: recoil.RecoilState<string>;
-declare const sessionState: recoil.RecoilState<ISession | undefined>;
-declare const actionState: recoil.RecoilState<IAction[]>;
-declare const messagesState: recoil.RecoilState<IStep[]>;
-declare const tokenCountState: recoil.RecoilState<number>;
-declare const loadingState: recoil.RecoilState<boolean>;
-declare const askUserState: recoil.RecoilState<IAsk | undefined>;
-declare const callFnState: recoil.RecoilState<ICallFn | undefined>;
-declare const chatSettingsInputsState: recoil.RecoilState<any>;
-declare const chatSettingsDefaultValueSelector: recoil.RecoilValueReadOnly<any>;
-declare const chatSettingsValueState: recoil.RecoilState<any>;
-declare const elementState: recoil.RecoilState<IMessageElement[]>;
-declare const avatarState: recoil.RecoilState<IAvatarElement[]>;
-declare const tasklistState: recoil.RecoilState<ITasklistElement[]>;
-declare const firstUserInteraction: recoil.RecoilState<string | undefined>;
-declare const accessTokenState: recoil.RecoilState<string | undefined>;
-declare const userState: recoil.RecoilState<IUser | null>;
-declare const threadHistoryState: recoil.RecoilState<ThreadHistory | undefined>;
-declare const sideViewState: recoil.RecoilState<IMessageElement | undefined>;
-
-declare const useChatSession: () => {
-    connect: lodash.DebouncedFunc<({ client, userEnv, accessToken }: {
-        client: ChainlitAPI;
-        userEnv: Record<string, string>;
-        accessToken?: string | undefined;
-    }) => void>;
-    disconnect: () => void;
-    session: ISession | undefined;
-    sessionId: string;
-    chatProfile: string | undefined;
-    idToResume: string | undefined;
-    setChatProfile: recoil.SetterOrUpdater<string | undefined>;
-};
+declare const defaultChainlitContext: undefined;
+declare const ChainlitContext: react.Context<ChainlitAPI>;
 
 declare const nestMessages: (messages: IStep[]) => IStep[];
 declare const isLastMessage: (messages: IStep[], index: number) => boolean;
@@ -379,6 +412,6 @@ declare const addMessageToParent: (messages: IStep[], parentId: string, newMessa
 declare const hasMessageById: (messages: IStep[], messageId: string) => boolean;
 declare const updateMessageById: (messages: IStep[], messageId: string, updatedMessage: IStep) => IStep[];
 declare const deleteMessageById: (messages: IStep[], messageId: string) => IStep[];
-declare const updateMessageContentById: (messages: IStep[], messageId: number | string, updatedContent: string, isSequence: boolean) => IStep[];
+declare const updateMessageContentById: (messages: IStep[], messageId: number | string, updatedContent: string, isSequence: boolean, isInput: boolean) => IStep[];
 
-export { APIBase, ActionSpec, AuthProvider, ChainlitAPI, ClientError, ElementType, FileSpec, GenerationMessageRole, IAction, IAsk, IAudioElement, IAvatarElement, IBaseGeneration, ICallFn, IChatGeneration, ICompletionGeneration, IElement, IElementSize, IFeedback, IFileElement, IFileRef, IFunction, IGeneration, IGenerationMessage, IImageElement, ILLMSettings, IMessageElement, IPageInfo, IPagination, IPdfElement, IPlotlyElement, ISession, IStep, ITasklistElement, ITextElement, IThread, IThreadFilters, IToken, ITool, IUser, IUserMetadata, IVideoElement, ThreadHistory, UserInput, accessTokenState, actionState, addMessage, addMessageToParent, askUserState, avatarState, callFnState, chatProfileState, chatSettingsDefaultValueSelector, chatSettingsInputsState, chatSettingsValueState, deleteMessageById, elementState, fetcher, firstUserInteraction, hasMessageById, isLastMessage, loadingState, messagesState, nestMessages, sessionIdState, sessionState, sideViewState, tasklistState, threadHistoryState, threadIdToResumeState, tokenCountState, updateMessageById, updateMessageContentById, useApi, useAuth, useChatData, useChatInteract, useChatMessages, useChatSession, userState };
+export { APIBase, ActionSpec, AuthProvider, ChainlitAPI, ChainlitContext, ChatProfile, ClientError, ElementType, FileSpec, IAction, IAsk, IAudioConfig, IAudioElement, ICallFn, IChainlitConfig, IElement, IElementSize, IFeedback, IFileElement, IFileRef, IImageElement, IMessageElement, IPageInfo, IPagination, IPdfElement, IPlotlyElement, ISession, IStarter, IStep, ITasklistElement, ITextElement, IThread, IThreadFilters, IToken, IUser, IUserMetadata, IVideoElement, ThreadHistory, UserInput, accessTokenState, actionState, addMessage, addMessageToParent, askUserState, callFnState, chatProfileState, chatSettingsDefaultValueSelector, chatSettingsInputsState, chatSettingsValueState, configState, currentThreadIdState, defaultChainlitContext, deleteMessageById, elementState, fetcher, firstUserInteraction, hasMessageById, isLastMessage, loadingState, messagesState, nestMessages, sessionIdState, sessionState, sideViewState, tasklistState, threadHistoryState, threadIdToResumeState, tokenCountState, updateMessageById, updateMessageContentById, useApi, useAudio, useAuth, useChatData, useChatInteract, useChatMessages, useChatSession, useConfig, userState };