Fix for 401 Unauthorized

README.md

@@ -34,6 +34,7 @@ yarn build
   Chatbot.init({
     chatflowid: "<chatflowid>",
     apiHost: "http://localhost:3000",
+    authToken: "<chatflowapikey>",
   });
 </script>
 ```
@@ -46,6 +47,7 @@ yarn build
   Chatbot.initFull({
     chatflowid: "<chatflowid>",
     apiHost: "http://localhost:3000",
+    authToken: "<chatflowapikey>",
   });
 </script>
 <flowise-fullchatbot></flowise-fullchatbot>
@@ -72,6 +74,7 @@ You can also customize chatbot with different configuration
   Chatbot.init({
     chatflowid: "91e9c803-5169-4db9-8207-3c0915d71c5f",
     apiHost: "http://localhost:3000",
+    authToken: "<chatflowapikey>",
     chatflowConfig: {
       // topK: 2
     },

dist/components/Bot.d.ts

@@ -9,6 +9,7 @@ export type BotProps = {
     chatflowid: string;
     apiHost?: string;
     chatflowConfig?: Record<string, unknown>;
+    authToken?: string;
     welcomeMessage?: string;
     botMessage?: BotMessageTheme;
     userMessage?: UserMessageTheme;

dist/queries/sendMessageQuery.d.ts

@@ -9,12 +9,13 @@ export type MessageRequest = {
     chatflowid: string;
     apiHost?: string;
     body?: IncomingInput;
+    authToken?: string;
 };
-export declare const sendMessageQuery: ({ chatflowid, apiHost, body }: MessageRequest) => Promise<{
+export declare const sendMessageQuery: ({ chatflowid, apiHost, body, authToken }: MessageRequest) => Promise<{
     data?: any;
     error?: Error | undefined;
 }>;
-export declare const isStreamAvailableQuery: ({ chatflowid, apiHost }: MessageRequest) => Promise<{
+export declare const isStreamAvailableQuery: ({ chatflowid, apiHost, authToken }: MessageRequest) => Promise<{
     data?: any;
     error?: Error | undefined;
 }>;

dist/utils/index.d.ts

@@ -6,6 +6,7 @@ export declare const sendRequest: <ResponseData>(params: {
     url: string;
     method: string;
     body?: Record<string, unknown> | FormData;
+    authToken?: string;
 } | string) => Promise<{
     data?: ResponseData | undefined;
     error?: Error | undefined;

dist/web.d.ts

@@ -2,13 +2,15 @@ declare const chatbot: {
     initFull: (props: {
         chatflowid: string;
         apiHost?: string | undefined;
+        authToken?: string | undefined;
         chatflowConfig?: Record<string, unknown> | undefined;
     } & {
         id?: string | undefined;
     }) => void;
     init: (props: {
         chatflowid: string;
         apiHost?: string | undefined;
+        authToken?: string | undefined;
         chatflowConfig?: Record<string, unknown> | undefined;
     }) => void;
 };

dist/window.d.ts

@@ -1,6 +1,7 @@
 type BotProps = {
     chatflowid: string;
     apiHost?: string;
+    authToken?: string;
     chatflowConfig?: Record<string, unknown>;
 };
 export declare const initFull: (props: BotProps & {

src/components/Bot.tsx

@@ -22,6 +22,7 @@ export type BotProps = {
     chatflowid: string
     apiHost?: string
     chatflowConfig?: Record<string, unknown>
+    authToken?: string
     welcomeMessage?: string
     botMessage?: BotMessageTheme
     userMessage?: UserMessageTheme
@@ -198,6 +199,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
         const { data, error } = await sendMessageQuery({
             chatflowid: props.chatflowid,
             apiHost: props.apiHost,
+            authToken: props.authToken,
             body
         })
 
@@ -239,6 +241,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
         const { data } = await isStreamAvailableQuery({
             chatflowid: props.chatflowid,
             apiHost: props.apiHost,
+            authToken: props.authToken
         })
 
         if (data) {

src/constants.ts

@@ -4,5 +4,6 @@ export const defaultBotProps: BubbleProps = {
     chatflowid: '',
     apiHost: undefined,
     chatflowConfig: undefined,
-    theme: undefined
+    theme: undefined,
+    authToken: undefined
 }

src/features/bubble/components/Bubble.tsx

@@ -56,6 +56,7 @@ export const Bubble = (props: BubbleProps) => {
                         userMessage={bubbleProps.theme?.chatWindow?.userMessage}
                         fontSize={bubbleProps.theme?.chatWindow?.fontSize}
                         chatflowid={props.chatflowid}
+                        authToken={props.authToken}
                         chatflowConfig={props.chatflowConfig}
                         apiHost={props.apiHost} />
                 </Show>

src/features/full/components/Full.tsx

@@ -50,6 +50,7 @@ export const Full = (
             userMessage={props.theme?.chatWindow?.userMessage}
             fontSize={props.theme?.chatWindow?.fontSize}
             chatflowid={props.chatflowid}
+            authToken={props.authToken}
             chatflowConfig={props.chatflowConfig}
             apiHost={props.apiHost} />
         </div>

src/queries/sendMessageQuery.ts

@@ -12,17 +12,20 @@ export type MessageRequest = {
     chatflowid: string
     apiHost?: string
     body?: IncomingInput
+    authToken?: string
 }
 
-export const sendMessageQuery = ({ chatflowid, apiHost = 'http://localhost:3000', body }: MessageRequest) =>
+export const sendMessageQuery = ({ chatflowid, apiHost = 'http://localhost:3000', body, authToken }: MessageRequest) =>
     sendRequest<any>({
         method: 'POST',
         url: `${apiHost}/api/v1/prediction/${chatflowid}`,
-        body
+        body,
+        authToken
     })
 
-export const isStreamAvailableQuery = ({ chatflowid, apiHost = 'http://localhost:3000' }: MessageRequest) =>
+export const isStreamAvailableQuery = ({ chatflowid, apiHost = 'http://localhost:3000', authToken }: MessageRequest) =>
     sendRequest<any>({
         method: 'GET',
         url: `${apiHost}/api/v1/chatflows-streaming/${chatflowid}`,
+        authToken
     })

src/utils/index.ts

@@ -12,6 +12,7 @@ export const sendRequest = async <ResponseData>(
               url: string
               method: string
               body?: Record<string, unknown> | FormData
+              authToken?: string
           }
         | string
 ): Promise<{ data?: ResponseData; error?: Error }> => {
@@ -21,9 +22,10 @@ export const sendRequest = async <ResponseData>(
             method: typeof params === 'string' ? 'GET' : params.method,
             mode: 'cors',
             headers:
-                typeof params !== 'string' && isDefined(params.body)
+                typeof params !== 'string' 
                     ? {
-                          'Content-Type': 'application/json'
+                          'Content-Type': isDefined(params.body) ? 'application/json' : undefined,
+                          'Authorization': params.authToken ? `Bearer ${params.authToken}` : undefined,
                       }
                     : undefined,
             body: typeof params !== 'string' && isDefined(params.body) ? JSON.stringify(params.body) : undefined
@@ -36,3 +38,4 @@ export const sendRequest = async <ResponseData>(
         return { error: e as Error }
     }
 }
+

src/window.ts

@@ -2,6 +2,7 @@
 type BotProps = {
     chatflowid: string
     apiHost?: string
+    authToken?: string
     chatflowConfig?: Record<string, unknown>
 }