feat(index.html): update Langflow Chat component attributes to match …

…new flow ID and host URL feat(chatWindow/index.tsx): add support for chat_inputs and chat_input_field props to pass user input to sendMessage function feat(chatWidget/index.tsx): add chat_inputs and chat_input_field props to pass user input to ChatWindow component fix(controllers/index.ts): update sendMessage function to accept inputs and input_field parameters and pass them to the request body feat(index.tsx): add chat_inputs and chat_input_field props to Langflow Chat custom element definition
SupaHuman-AI · Jul 20, 2023 · b8e81c2 · b8e81c2
1 parent 62fbbf9
commit b8e81c2
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,14 @@
  <title>Document</title>
 </head>
 <body style="width: 100vh; height: 100vh; ">
- <langflow-chat window_title="Langflow Chat" online="false" online_message="We'll reply as soon as we can!" offline_message="We can't reply right now!" flow_id="c9e09201-420e-49a3-9ea4-df8d88d28c24" 
- host_url="http:https://localhost:3000" 
+ <langflow-chat window_title="Langflow Chat" 
+ online="false" 
+ online_message="We'll reply as soon as we can!" 
+ offline_message="We can't reply right now!" 
+ flow_id="60933d8b-058f-417d-bd72-0701574b0e6c"
+ chat_inputs='{"text":""}'
+ chat_input_field="text" 
+ host_url="http:https://localhost:7860" 
  style="position: fixed; bottom: 50px; right: 50px;"
  ></langflow-chat>
 </body>

diff --git a/src/chatWidget/chatWindow/index.tsx b/src/chatWidget/chatWindow/index.tsx
@@ -7,6 +7,8 @@ import { sendMessage } from '../../controllers';
 
 export default function ChatWindow(
  { flowId, hostUrl, updateLastMessage, messages,
+ chat_inputs,
+ chat_input_field,
  bot_message_style,
  send_icon_style, 
  user_message_style, 
@@ -23,6 +25,8 @@ export default function ChatWindow(
  input_container_style,
  addMessage, position, triggerRef, width = 450, height = 650, tweaks }:
  {
+ chat_inputs:Object,
+ chat_input_field: string,
  bot_message_style?: React.CSSProperties,
  send_icon_style?:React.CSSProperties, 
  user_message_style?: React.CSSProperties,
@@ -59,7 +63,7 @@ export default function ChatWindow(
  addMessage({ message: value, isSend: true });
  setSendingMessage(true);
  setValue('');
- sendMessage(hostUrl, flowId, value, tweaks)
+ sendMessage(hostUrl, flowId, value,chat_inputs,chat_input_field, tweaks)
  .then((res) => {
  console.log(res);
  if (res.data && res.data.result && res.data.result.text) {
@@ -74,7 +78,7 @@ export default function ChatWindow(
  else if (response && response.status === 500 && response.data && response.data.detail) {
  updateLastMessage({ message: response.data.detail, isSend: false, error: true });
  }
- console.log(err);
+ console.error(err);
  setSendingMessage(false);
  });
  addMessage({ message: "", isSend: false })

diff --git a/src/chatWidget/index.tsx b/src/chatWidget/index.tsx
@@ -4,6 +4,8 @@ import ChatWindow from "./chatWindow";
 import { ChatMessageType } from "../types/chatWidget";
 
 export default function ChatWidget({
+ chat_input_field,
+ chat_inputs, 
  chat_trigger_style,
  host_url,
  flow_id,
@@ -23,6 +25,8 @@ export default function ChatWidget({
  input_style,
  input_container_style,
 }: {
+ chat_inputs:Object;
+ chat_input_field: string;
  send_icon_style?: React.CSSProperties;
  chat_position?: string;
  chat_trigger_style?: React.CSSProperties;
@@ -964,6 +968,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
  style={chat_trigger_style}
  />
  <ChatWindow
+ chat_input_field={chat_input_field}
+ chat_inputs={chat_inputs}
  open={open}
  send_icon_style={send_icon_style}
  bot_message_style={bot_message_style}

diff --git a/src/controllers/index.ts b/src/controllers/index.ts
@@ -1,12 +1,13 @@
 import axios from "axios";
 
-export async function sendMessage(baseUrl: string, flowId: string, message: string, tweaks?: Object) {
+export async function sendMessage(baseUrl: string, flowId: string, message: string,inputs: any,input_field:string, tweaks?: Object,) {
  let data;
+ inputs[input_field] = message;
  if (tweaks) {
- data = { inputs: {text: message}, tweaks: tweaks };
+ data = { inputs: inputs, tweaks: tweaks };
  }
  else {
- data = { inputs: {text: message} };
+ data = { inputs: inputs };
  }
  let response = axios.post(`${baseUrl}/api/v1/process/${flowId}`, data,{headers:{"Content-Type": "application/json"}});
  return response;

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,6 +4,8 @@ import ChatWidget from './chatWidget';
 customElements.define('langflow-chat', r2wc(ChatWidget, {
  shadow: "closed",
  props: {
+ chat_input_field:"string",
+ chat_inputs: "json",
  chat_trigger_style: "json",
  host_url: "string",
  flow_id: "string",