Added possibility to inject additional headers

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 |
+| additionalHeaders | 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.
 
+- **additionalHeaders:**
+ - 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. 
 

src/chatWidget/chatWindow/index.tsx

@@ -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/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/controllers/index.ts

@@ -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/index.tsx

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