@chainlit/react-client 0.1.0 → 0.2.0

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';
 
@@ -85,7 +86,6 @@ interface IStep {
     createdAt: number | string;
     start?: number | string;
     end?: number | string;
-    disableFeedback?: boolean;
     feedback?: IFeedback;
     language?: string;
     streaming?: boolean;
@@ -121,6 +121,7 @@ interface IUserMetadata extends Record<string, any> {
 interface IUser {
     id: string;
     identifier: string;
+    display_name?: string;
     metadata: IUserMetadata;
 }
 
@@ -148,6 +149,63 @@ 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;
+    sample_rate: number;
+}
+interface IAuthConfig {
+    requireLogin: boolean;
+    passwordAuth: boolean;
+    headerAuth: boolean;
+    oauthProviders: string[];
+}
+interface IChainlitConfig {
+    markdown?: string;
+    ui: {
+        name: string;
+        description?: string;
+        cot: 'hidden' | 'tool_call' | 'full';
+        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;
+        edit_message?: boolean;
+    };
+    debugUrl?: string;
+    userEnv: string[];
+    dataPersistence: boolean;
+    threadResumable: boolean;
+    chatProfiles: ChatProfile[];
+    starters?: IStarter[];
+    translation: object;
+}
+
 interface IToken {
     id: number | string;
     token: string;
@@ -157,6 +215,7 @@ interface IToken {
 declare const useChatData: () => {
     actions: IAction[];
     askUser: IAsk | undefined;
+    callFn: ICallFn | undefined;
     chatSettingsDefaultValue: any;
     chatSettingsInputs: any;
     chatSettingsValue: any;
@@ -168,36 +227,122 @@ declare const useChatData: () => {
     tasklists: ITasklistElement[];
 };
 
-declare const useAuth: (apiClient: ChainlitAPI) => {
-    data: {
-        requireLogin: boolean;
-        passwordAuth: boolean;
-        headerAuth: boolean;
-        oauthProviders: string[];
+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;
+    editMessage: (message: IStep) => void;
+    startAudioStream: () => void;
+    sendAudioChunk: (isStart: boolean, mimeType: string, elapsedTime: number, data: Int16Array) => void;
+    endAudioStream: () => 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 wavRecorderState: recoil.RecoilState<any>;
+declare const wavStreamPlayerState: recoil.RecoilState<any>;
+declare const audioConnectionState: recoil.RecoilState<"connecting" | "on" | "off">;
+declare const isAiSpeakingState: recoil.RecoilState<boolean>;
+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 authState: recoil.RecoilState<IAuthConfig | 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: () => {
+    startConversation: () => Promise<void>;
+    endConversation: () => Promise<void>;
+    audioConnection: "connecting" | "on" | "off";
+    isAiSpeaking: boolean;
+    wavRecorder: any;
+    wavStreamPlayer: any;
+};
+
+declare const useConfig: (accessToken?: string) => {
+    config: IChainlitConfig | undefined;
+    error: Error | undefined;
+    isLoading: boolean;
+    language: string;
+};
+
+declare const useAuth: () => {
+    authConfig: IAuthConfig;
     user: null;
     isReady: boolean;
     isAuthenticated: boolean;
     accessToken: string;
     logout: () => void;
     setAccessToken: () => void;
+    data?: undefined;
 } | {
-    data: {
-        requireLogin: boolean;
-        passwordAuth: boolean;
-        headerAuth: boolean;
-        oauthProviders: string[];
-    } | undefined;
+    data: IAuthConfig | undefined;
     user: IUser | null;
     isAuthenticated: boolean;
     isReady: boolean;
     accessToken: string | undefined;
-    logout: () => Promise<void>;
+    logout: (reload?: boolean) => Promise<void>;
     setAccessToken: (token: string | null | undefined) => void;
+    authConfig?: undefined;
 };
 
 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;
@@ -259,74 +404,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;
-    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;
-    sendCopilotEvent: (data: any) => 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 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<({ 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;
@@ -337,4 +416,8 @@ declare const updateMessageById: (messages: IStep[], messageId: string, updatedM
 declare const deleteMessageById: (messages: IStep[], messageId: string) => IStep[];
 declare const updateMessageContentById: (messages: IStep[], messageId: number | string, updatedContent: string, isSequence: boolean, isInput: boolean) => IStep[];
 
-export { APIBase, ActionSpec, AuthProvider, ChainlitAPI, ClientError, ElementType, FileSpec, IAction, IAsk, IAudioElement, ICallFn, IElement, IElementSize, IFeedback, IFileElement, IFileRef, IImageElement, IMessageElement, IPageInfo, IPagination, IPdfElement, IPlotlyElement, ISession, IStep, ITasklistElement, ITextElement, IThread, IThreadFilters, IToken, IUser, IUserMetadata, IVideoElement, ThreadHistory, UserInput, accessTokenState, actionState, addMessage, addMessageToParent, askUserState, callFnState, chatProfileState, chatSettingsDefaultValueSelector, chatSettingsInputsState, chatSettingsValueState, currentThreadIdState, 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 };
+declare const WavRenderer: {
+    drawBars: (ctx: CanvasRenderingContext2D, data: Float32Array, cssWidth: number, cssHeight: number, color: string, pointCount?: number, barWidth?: number, barSpacing?: number, center?: boolean) => void;
+};
+
+export { APIBase, ActionSpec, AuthProvider, ChainlitAPI, ChainlitContext, ChatProfile, ClientError, ElementType, FileSpec, IAction, IAsk, IAudioConfig, IAudioElement, IAuthConfig, 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, WavRenderer, accessTokenState, actionState, addMessage, addMessageToParent, askUserState, audioConnectionState, authState, callFnState, chatProfileState, chatSettingsDefaultValueSelector, chatSettingsInputsState, chatSettingsValueState, configState, currentThreadIdState, defaultChainlitContext, deleteMessageById, elementState, fetcher, firstUserInteraction, hasMessageById, isAiSpeakingState, isLastMessage, loadingState, messagesState, nestMessages, sessionIdState, sessionState, sideViewState, tasklistState, threadHistoryState, threadIdToResumeState, tokenCountState, updateMessageById, updateMessageContentById, useApi, useAudio, useAuth, useChatData, useChatInteract, useChatMessages, useChatSession, useConfig, userState, wavRecorderState, wavStreamPlayerState };

package/dist/index.d.ts

@@ -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';
 
@@ -85,7 +86,6 @@ interface IStep {
     createdAt: number | string;
     start?: number | string;
     end?: number | string;
-    disableFeedback?: boolean;
     feedback?: IFeedback;
     language?: string;
     streaming?: boolean;
@@ -121,6 +121,7 @@ interface IUserMetadata extends Record<string, any> {
 interface IUser {
     id: string;
     identifier: string;
+    display_name?: string;
     metadata: IUserMetadata;
 }
 
@@ -148,6 +149,63 @@ 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;
+    sample_rate: number;
+}
+interface IAuthConfig {
+    requireLogin: boolean;
+    passwordAuth: boolean;
+    headerAuth: boolean;
+    oauthProviders: string[];
+}
+interface IChainlitConfig {
+    markdown?: string;
+    ui: {
+        name: string;
+        description?: string;
+        cot: 'hidden' | 'tool_call' | 'full';
+        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;
+        edit_message?: boolean;
+    };
+    debugUrl?: string;
+    userEnv: string[];
+    dataPersistence: boolean;
+    threadResumable: boolean;
+    chatProfiles: ChatProfile[];
+    starters?: IStarter[];
+    translation: object;
+}
+
 interface IToken {
     id: number | string;
     token: string;
@@ -157,6 +215,7 @@ interface IToken {
 declare const useChatData: () => {
     actions: IAction[];
     askUser: IAsk | undefined;
+    callFn: ICallFn | undefined;
     chatSettingsDefaultValue: any;
     chatSettingsInputs: any;
     chatSettingsValue: any;
@@ -168,36 +227,122 @@ declare const useChatData: () => {
     tasklists: ITasklistElement[];
 };
 
-declare const useAuth: (apiClient: ChainlitAPI) => {
-    data: {
-        requireLogin: boolean;
-        passwordAuth: boolean;
-        headerAuth: boolean;
-        oauthProviders: string[];
+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;
+    editMessage: (message: IStep) => void;
+    startAudioStream: () => void;
+    sendAudioChunk: (isStart: boolean, mimeType: string, elapsedTime: number, data: Int16Array) => void;
+    endAudioStream: () => 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 wavRecorderState: recoil.RecoilState<any>;
+declare const wavStreamPlayerState: recoil.RecoilState<any>;
+declare const audioConnectionState: recoil.RecoilState<"connecting" | "on" | "off">;
+declare const isAiSpeakingState: recoil.RecoilState<boolean>;
+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 authState: recoil.RecoilState<IAuthConfig | 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: () => {
+    startConversation: () => Promise<void>;
+    endConversation: () => Promise<void>;
+    audioConnection: "connecting" | "on" | "off";
+    isAiSpeaking: boolean;
+    wavRecorder: any;
+    wavStreamPlayer: any;
+};
+
+declare const useConfig: (accessToken?: string) => {
+    config: IChainlitConfig | undefined;
+    error: Error | undefined;
+    isLoading: boolean;
+    language: string;
+};
+
+declare const useAuth: () => {
+    authConfig: IAuthConfig;
     user: null;
     isReady: boolean;
     isAuthenticated: boolean;
     accessToken: string;
     logout: () => void;
     setAccessToken: () => void;
+    data?: undefined;
 } | {
-    data: {
-        requireLogin: boolean;
-        passwordAuth: boolean;
-        headerAuth: boolean;
-        oauthProviders: string[];
-    } | undefined;
+    data: IAuthConfig | undefined;
     user: IUser | null;
     isAuthenticated: boolean;
     isReady: boolean;
     accessToken: string | undefined;
-    logout: () => Promise<void>;
+    logout: (reload?: boolean) => Promise<void>;
     setAccessToken: (token: string | null | undefined) => void;
+    authConfig?: undefined;
 };
 
 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;
@@ -259,74 +404,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;
-    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;
-    sendCopilotEvent: (data: any) => 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 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<({ 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;
@@ -337,4 +416,8 @@ declare const updateMessageById: (messages: IStep[], messageId: string, updatedM
 declare const deleteMessageById: (messages: IStep[], messageId: string) => IStep[];
 declare const updateMessageContentById: (messages: IStep[], messageId: number | string, updatedContent: string, isSequence: boolean, isInput: boolean) => IStep[];
 
-export { APIBase, ActionSpec, AuthProvider, ChainlitAPI, ClientError, ElementType, FileSpec, IAction, IAsk, IAudioElement, ICallFn, IElement, IElementSize, IFeedback, IFileElement, IFileRef, IImageElement, IMessageElement, IPageInfo, IPagination, IPdfElement, IPlotlyElement, ISession, IStep, ITasklistElement, ITextElement, IThread, IThreadFilters, IToken, IUser, IUserMetadata, IVideoElement, ThreadHistory, UserInput, accessTokenState, actionState, addMessage, addMessageToParent, askUserState, callFnState, chatProfileState, chatSettingsDefaultValueSelector, chatSettingsInputsState, chatSettingsValueState, currentThreadIdState, 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 };
+declare const WavRenderer: {
+    drawBars: (ctx: CanvasRenderingContext2D, data: Float32Array, cssWidth: number, cssHeight: number, color: string, pointCount?: number, barWidth?: number, barSpacing?: number, center?: boolean) => void;
+};
+
+export { APIBase, ActionSpec, AuthProvider, ChainlitAPI, ChainlitContext, ChatProfile, ClientError, ElementType, FileSpec, IAction, IAsk, IAudioConfig, IAudioElement, IAuthConfig, 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, WavRenderer, accessTokenState, actionState, addMessage, addMessageToParent, askUserState, audioConnectionState, authState, callFnState, chatProfileState, chatSettingsDefaultValueSelector, chatSettingsInputsState, chatSettingsValueState, configState, currentThreadIdState, defaultChainlitContext, deleteMessageById, elementState, fetcher, firstUserInteraction, hasMessageById, isAiSpeakingState, isLastMessage, loadingState, messagesState, nestMessages, sessionIdState, sessionState, sideViewState, tasklistState, threadHistoryState, threadIdToResumeState, tokenCountState, updateMessageById, updateMessageContentById, useApi, useAudio, useAuth, useChatData, useChatInteract, useChatMessages, useChatSession, useConfig, userState, wavRecorderState, wavStreamPlayerState };