fix(index.html): update chat_inputs property to use "input" instead o…

…f "text" for better semantics fix(index.tsx): add sessionId prop to ChatWindow component to keep track of the session ID fix(index.tsx): update sendMessage function in ChatWindow component to include sessionId parameter fix(index.tsx): add sessionId useRef to ChatWidget component to store the session ID fix(index.ts): update sendMessage function to include sessionId parameter feat(index.ts): add sessionId prop to ChatWindow component to pass the session ID to the API request
SupaHuman-AI · Oct 25, 2023 · 1b932ca · 1b932ca
1 parent a1659fc
commit 1b932ca
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,9 +7,9 @@
 </head>
 <body style="width: 100vh; height: 100vh; ">
  <langflow-chat window_title="Langflow Chat" 
- flow_id="ae8ce68e-a6f9-4825-8543-99ba00f75110"
- chat_inputs='{"text":""}'
- chat_input_field="text"
+ flow_id="fe313166-da5f-4284-903b-3afb10fb4d12"
+ chat_inputs='{"input":""}'
+ chat_input_field="input"
  host_url="http:https://localhost:7860" 
  style="position: fixed; bottom: 50px; right: 50px;"
  api_key="lf-o6nUpFGaLwfFK76wobVkqTqMrlIeLAMwXKWq57RnJuE"

diff --git a/src/chatWidget/chatWindow/index.tsx b/src/chatWidget/chatWindow/index.tsx
@@ -35,6 +35,7 @@ export default function ChatWindow({
  width = 450,
  height = 650,
  tweaks,
+ sessionId
 }: {
  api_key?: string;
  chat_inputs: Object;
@@ -65,6 +66,7 @@ export default function ChatWindow({
  triggerRef: React.RefObject<HTMLButtonElement>;
  width?: number;
  height?: number;
+ sessionId: React.MutableRefObject<string>;
 }) {
  const [value, setValue] = useState<string>("");
  const ref = useRef<HTMLDivElement>(null);
@@ -88,7 +90,7 @@ export default function ChatWindow({
  addMessage({ message: value, isSend: true });
  setSendingMessage(true);
  setValue("");
- sendMessage(hostUrl, flowId, value, chat_inputs, chat_input_field, tweaks,api_key)
+ sendMessage(hostUrl, flowId, value, chat_inputs,chat_input_field,sessionId, tweaks,api_key)
  .then((res) => {
  if (
  res.data &&
@@ -116,6 +118,9 @@ export default function ChatWindow({
  });
  }
  }
+ if (res.data && res.data.session_id) {
+ sessionId.current = res.data.session_id;
+ }
  setSendingMessage(false);
  })
  .catch((err) => {

diff --git a/src/chatWidget/index.tsx b/src/chatWidget/index.tsx
@@ -58,6 +58,7 @@ export default function ChatWidget({
 }) {
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState<ChatMessageType[]>([]);
+ const sessionId = useRef("");
  function updateLastMessage(message: ChatMessageType) {
  setMessages((prev) => {
  prev[prev.length - 1] = message;
@@ -1007,6 +1008,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
  messages={messages}
  triggerRef={triggerRef}
  position={chat_position}
+ sessionId={sessionId}
  />
  </>
  );

diff --git a/src/controllers/index.ts b/src/controllers/index.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 
-export async function sendMessage(baseUrl: string, flowId: string, message: string,inputs: any,input_field:string, tweaks?: Object,api_key?:string) {
- let data;
+export async function sendMessage(baseUrl: string, flowId: string, message: string,inputs: any,input_field:string,sessionId:React.MutableRefObject<string>, tweaks?: Object,api_key?:string) {
+ let data:any;
  inputs[input_field] = message;
  if (tweaks) {
  data = { inputs: inputs, tweaks: tweaks };
@@ -13,6 +13,9 @@ export async function sendMessage(baseUrl: string, flowId: string, message: stri
  if( api_key){
  headers["x-api-key"]=api_key;
  }
+ if(sessionId.current && sessionId.current!=""){
+ data.session_id=sessionId.current;
+ }
  let response = axios.post(`${baseUrl}/api/v1/process/${flowId}`, data,{headers});
  return response;
 }