Merge pull request #10 from yassineselmi/inject-additional-headers

Inject additional headers

Author: anovazzi1

README.md

@@ -124,6 +124,7 @@ Use the widget API to customize your widget:
 | user_message_style    | json      | No       |
 | width                 | number    | No       |
 | window_title          | string    | No       |
+| additional_headers    | json      | No       |
 
 - **bot_message_style:**
   - Type: JSON
@@ -240,6 +241,12 @@ Use the widget API to customize your widget:
   - Required: No
   - Description: Title for the chat window, displayed in the header or title bar.
 
+- **additional_headers:**
+  - Type: JSON
+  - Required: No
+  - Description: Additional headers to be sent to Langflow server
+
+
 ## Live example:
 Try out or [live example](https://codesandbox.io/s/langflow-embedded-chat-example-dv9zpx) to see how the Langflow Embedded Chat ⛓️ works. 
 

dist/build/static/js/bundle.min.js

@@ -35,7 +35,8 @@ export default function ChatWindow({
   width = 450,
   height = 650,
   tweaks,
-  sessionId
+  sessionId,
+  additional_headers
 }: {
   api_key?: string;
   chat_inputs: Object;
@@ -67,6 +68,8 @@ export default function ChatWindow({
   width?: number;
   height?: number;
   sessionId: React.MutableRefObject<string>;
+  additional_headers?: {[key:string]:string};
+
 }) {
   const [value, setValue] = useState<string>("");
   const ref = useRef<HTMLDivElement>(null);
@@ -102,7 +105,7 @@ export default function ChatWindow({
       addMessage({ message: value, isSend: true });
       setSendingMessage(true);
       setValue("");
-      sendMessage(hostUrl, flowId, value, chat_inputs,chat_input_field,sessionId, tweaks,api_key)
+      sendMessage(hostUrl, flowId, value, chat_inputs,chat_input_field,sessionId, tweaks,api_key, additional_headers)
         .then((res) => {
           if (
             res.data &&

src/chatWidget/chatWindow/index.tsx

@@ -29,6 +29,7 @@ export default function ChatWidget({
   input_style,
   placeholder_sending,
   input_container_style,
+  additional_headers,
 }: {
   api_key?: string;
   chat_inputs: Object;
@@ -55,6 +56,7 @@ export default function ChatWidget({
   host_url: string;
   flow_id: string;
   tweaks?: { [key: string]: any };
+  additional_headers?: {[key:string]:string};
 }) {
   const [open, setOpen] = useState(false);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -1009,6 +1011,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
         triggerRef={triggerRef}
         position={chat_position}
         sessionId={sessionId}
+        additional_headers={additional_headers}
       />
     </>
   );

src/chatWidget/index.tsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-export async function sendMessage(baseUrl: string, flowId: string, message: string,inputs: any,input_field:string,sessionId:React.MutableRefObject<string>, tweaks?: Object,api_key?:string) {
+export async function sendMessage(baseUrl: string, flowId: string, message: string,inputs: any,input_field:string,sessionId:React.MutableRefObject<string>, tweaks?: Object,api_key?:string,additional_headers?:{[key:string]:string}) {
     let data:any;
     inputs[input_field] = message;
     if (tweaks) {
@@ -9,10 +9,14 @@ export async function sendMessage(baseUrl: string, flowId: string, message: stri
     else {
         data = { inputs: inputs };
     }
-    const headers:{[key:string]:string}= {"Content-Type": "application/json"}
+    let headers:{[key:string]:string}= {"Content-Type": "application/json"}
     if( api_key){
         headers["x-api-key"]=api_key;
     }
+    if (additional_headers){
+        headers = Object.assign(headers, additional_headers);
+        // headers = {...headers, ...additional_headers};
+    }
     if(sessionId.current && sessionId.current!=""){
         data.session_id=sessionId.current;
     }

src/controllers/index.ts

@@ -28,5 +28,6 @@ customElements.define('langflow-chat', r2wc(ChatWidget, {
         input_style:"json",
         input_container_style:"json",
         chat_position:"string",
+        additional_headers:"json",
     },
 }));