feat(chatWidget): add support for api_key prop in ChatWidget and Chat…

…Window components to pass API key to sendMessage function

fix(controllers): modify sendMessage function to include api_key in the request data if provided

feat(index.tsx): add api_key prop to ChatWidget component in custom element definition

src/chatWidget/chatWindow/index.tsx

@@ -6,6 +6,7 @@ import ChatMessage from "./chatMessage";
 import { sendMessage } from "../../controllers";
 
 export default function ChatWindow({
+ api_key,
  flowId,
  hostUrl,
  updateLastMessage,
@@ -35,6 +36,7 @@ export default function ChatWindow({
  height = 650,
  tweaks,
 }: {
+ api_key?: string;
  chat_inputs: Object;
  chat_input_field: string;
  bot_message_style?: React.CSSProperties;
@@ -86,7 +88,7 @@ export default function ChatWindow({
  addMessage({ message: value, isSend: true });
  setSendingMessage(true);
  setValue("");
- sendMessage(hostUrl, flowId, value, chat_inputs, chat_input_field, tweaks)
+ sendMessage(hostUrl, flowId, value, chat_inputs, chat_input_field, tweaks,api_key)
  .then((res) => {
  if (
  res.data &&

src/chatWidget/index.tsx

@@ -4,6 +4,7 @@ import ChatWindow from "./chatWindow";
 import { ChatMessageType } from "../types/chatWidget";
 
 export default function ChatWidget({
+ api_key,
  chat_input_field,
  chat_inputs,
  chat_trigger_style,
@@ -29,6 +30,7 @@ export default function ChatWidget({
  placeholder_sending,
  input_container_style,
 }: {
+ api_key?: string;
  chat_inputs: Object;
  chat_input_field: string;
  send_icon_style?: React.CSSProperties;
@@ -976,6 +978,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
  style={chat_trigger_style}
  />
  <ChatWindow
+ api_key={api_key}
  chat_input_field={chat_input_field}
  chat_inputs={chat_inputs}
  open={open}

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, tweaks?: Object,) {
+export async function sendMessage(baseUrl: string, flowId: string, message: string,inputs: any,input_field:string, tweaks?: Object,api_key?:string) {
  let data;
  inputs[input_field] = message;
  if (tweaks) {
@@ -9,6 +9,9 @@ export async function sendMessage(baseUrl: string, flowId: string, message: stri
  else {
  data = { inputs: inputs };
  }
+ if(api_key){
+ data = {...data, api_key};
+ }
  let response = axios.post(`${baseUrl}/api/v1/process/${flowId}`, data,{headers:{"Content-Type": "application/json"}});
  return response;
 }

src/index.tsx

@@ -4,6 +4,7 @@ import ChatWidget from './chatWidget';
 customElements.define('langflow-chat', r2wc(ChatWidget, {
  shadow: "closed",
  props: {
+ api_key: "string",
  chat_input_field:"string",
  chat_inputs: "json",
  chat_trigger_style: "json",