jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Scroll to made and error when the message is empty done

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-16 15:31:00 -03:00
commit cf79a6ee76
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
space_flow/src/components/chatComponent/index.tsx
View file

@ -4,7 +4,7 @@ import {
PaperAirplaneIcon, PaperAirplaneIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useContext, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { sendAll } from "../../controllers/NodesServices"; import { sendAll } from "../../controllers/NodesServices";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
@ -22,12 +22,16 @@ export default function Chat({ reactFlowInstance }) {
return newChat; return newChat;
}); });
}; };
useEffect(()=>{
ref.current.scrollIntoView({behavior: 'smooth'});
}, [chatHistory])
function validateNodes(){ function validateNodes(){
if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id))))))){ if(reactFlowInstance.getNodes().some((n) => (n.data.node && Object.keys(n.data.node.template).some((t: any) => (n.data.node.template[t].required && !reactFlowInstance.getEdges().some((e) => (e.sourceHandle.split('|')[1] === t && e.sourceHandle.split('|')[2] === n.id))))))){
return false; return false;
} }
return true; return true;
} }
const ref = useRef(null);
return ( return (
<> <>
<Transition <Transition
@ -55,7 +59,7 @@ export default function Chat({ reactFlowInstance }) {
<XMarkIcon className="h-6 w-6 text-gray-600" /> <XMarkIcon className="h-6 w-6 text-gray-600" />
</button> </button>
</div> </div>
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto flex-col bg-gray-50 p-3 py-5"> <div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 p-3 py-5">
{chatHistory.map((c, i) => ( {chatHistory.map((c, i) => (
<div key={i}> <div key={i}>
{c.isSend ? ( {c.isSend ? (
@ -73,6 +77,7 @@ export default function Chat({ reactFlowInstance }) {
)} )}
</div> </div>
))} ))}
<div ref={ref}></div>
</div> </div>
<div className="w-full bg-white border-t flex items-center justify-between p-3"> <div className="w-full bg-white border-t flex items-center justify-between p-3">
<div className="relative w-full mt-1 rounded-md shadow-sm"> <div className="relative w-full mt-1 rounded-md shadow-sm">
@ -88,19 +93,24 @@ export default function Chat({ reactFlowInstance }) {
<div className="absolute inset-y-0 right-0 flex items-center pr-3"> <div className="absolute inset-y-0 right-0 flex items-center pr-3">
<button <button
onClick={() => { onClick={() => {
if(validateNodes()){ if(chatValue !== ""){
let message = chatValue; if(validateNodes()){
setChatValue(""); let message = chatValue;
addChatHistory(message, true); setChatValue("");
sendAll({ addChatHistory(message, true);
message, sendAll({
nodes: JSON.stringify(reactFlowInstance.getNodes()), message,
edges: JSON.stringify(reactFlowInstance.getEdges()), nodes: JSON.stringify(reactFlowInstance.getNodes()),
}).then((r) => {addChatHistory(r.data.messsage, false)}); edges: JSON.stringify(reactFlowInstance.getEdges()),
}).then((r) => {addChatHistory(r.data.messsage, false);});
} else {
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']})
}
} else { } else {
setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']}) setErrorData({title: 'Error sending message', list:['The message cannot be empty.']})
} }
}} }}
> >
<PaperAirplaneIcon <PaperAirplaneIcon